WPF ListBox的进阶使用（一）

公司项目有个需求，UI界面支持动态平均分割界面，想了想便想到用ListBox来实现，用UniformGrid作为ListBox的ItemsPanelTemplate，通过动态改变UniformGrid的Columns属性，可以动态分割界面。具体实现如下所示：

 <Window x:Class="WpfDemo.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:comm="clr-namespace:WpfDemo.CommonControls;assembly=WpfDemo.CommonControls"
         xmlns:local="clr-namespace:WpfDemo"
         Title="MainWindow" Height="350" Width="525">

     <Grid>
         <ListBox ItemsSource="{Binding DataSource}">
             <ListBox.ItemsPanel>
                 <ItemsPanelTemplate>
                     <UniformGrid Columns="{Binding Colums}" IsItemsHost="True"/>
                 </ItemsPanelTemplate>
             </ListBox.ItemsPanel>
             <ListBox.ItemContainerStyle>
                 <Style TargetType="{x:Type ListBoxItem}">
                     <Setter Property="Template">
                         <Setter.Value>
                             <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                 <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Green" BorderBrush="Yellow" BorderThickness="1">
                                     <TextBlock Text="{Binding CameraName}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                 </Border>
                             </ControlTemplate>
                         </Setter.Value>
                     </Setter>
                 </Style>
             </ListBox.ItemContainerStyle>
         </ListBox>
     </Grid>
 </Window>

对应的ViewModel层代码：

 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Linq;
 using System.Runtime.CompilerServices;
 using System.Text;
 using System.Threading.Tasks;

 namespace WpfDemo
 {
     public abstract class NotifyPropertyBase : INotifyPropertyChanged
     {
         protected void SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
         {
             if (object.Equals(storage, value)) return;
             storage = value;
             this.OnPropertyChanged(propertyName);
         }

         protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
         {
             if (this.PropertyChanged != null)
             {
                 this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
             }
         }

         public event PropertyChangedEventHandler PropertyChanged;
     }
 }

 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows.Threading;

 namespace WpfDemo
 {
     public class MainWindowVM : NotifyPropertyBase
     {
         private DispatcherTimer timer;
         public MainWindowVM()
         {
             DataSource = new ObservableCollection<WndViewModel>();
             Colums = ;
             timer = new DispatcherTimer();
             timer.Interval = new TimeSpan(, , );
             timer.Tick += timer_Tick;
             timer.Start();
         }

         private int count = ;
         void timer_Tick(object sender, EventArgs e)
         {
             var temp = new WndViewModel()
             {
                 CameraName = string.Format("Camera {0}", ++count),
             };
             DataSource.Add(temp);
             Console.WriteLine(temp.CameraName);
             if (count <= )
             {
                 Colums = count;
             }
             else if (count > )
             {
                 count = ;
                 DataSource.Clear();
                 Colums = ;
             }
         }

         private int colums;
         public int Colums
         {
             get { return colums; }
             set
             {
                 SetProperty(ref colums, value);
             }
         }

         private ObservableCollection<WndViewModel> dataSource;
         public ObservableCollection<WndViewModel> DataSource
         {
             get { return dataSource; }
             set
             {
                 SetProperty(ref dataSource, value);
             }
         }
     }
 }

软件运行的效果：