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 = 1;
            timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0, 0, 1);
            timer.Tick += timer_Tick;
            timer.Start();
        }

        private int count = 0;
        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 <= 6)
            {
                Colums = count;
            }
            else if (count > 100)
            {
                count = 0;
                DataSource.Clear();
                Colums = 1;
            }
        }

        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);
            }
        }
    }
}

软件运行的效果：