WPF ListBox的进阶使用（二）

项目中经常使用需要根据搜索条件查询数据，然后用卡片来展示数据。用卡片展示数据时，界面的宽度发生变化，希望显示的卡片数量也跟随变化。WrapPanel虽然也可以实现这个功能，但是将多余的部分都留在行尾，十分不美观，最好是能够将多余的宽度平分在每个ListBoxItem之间，比较美观，也符合项目需求。如下便是我自己实现的Panel：

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

namespace WpfDemo
{
    public class MyWrapPanel : Panel
    {
        protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
        {
            Size currentLineSize = new Size();
            Size panelSize = new Size();

            foreach (UIElement element in base.InternalChildren)
            {
                element.Measure(availableSize);
                Size desiredSize = element.DesiredSize;

                if (currentLineSize.Width + desiredSize.Width > availableSize.Width)
                {
                    panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
                    panelSize.Height += currentLineSize.Height;
                    currentLineSize = desiredSize;

                    if (desiredSize.Width > availableSize.Width)
                    {
                        panelSize.Width = Math.Max(desiredSize.Width, panelSize.Width);
                        panelSize.Height += desiredSize.Height;
                        currentLineSize = new Size();
                    }
                }
                else
                {
                    currentLineSize.Width += desiredSize.Width;
                    currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
                }
            }

            panelSize.Width = Math.Max(currentLineSize.Width, panelSize.Width);
            panelSize.Height += currentLineSize.Height;

            return panelSize;
        }

        protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
        {
            int firstInLine = 0;
            int lineCount = 0;

            Size currentLineSize = new Size();

            double accumulatedHeight = 0;

            UIElementCollection elements = base.InternalChildren;
            double interval = 0.0;
            for (int i = 0; i < elements.Count; i++)
            {

                Size desiredSize = elements[i].DesiredSize;

                if (currentLineSize.Width + desiredSize.Width > finalSize.Width) //need to switch to another line
                {
                    interval = (finalSize.Width - currentLineSize.Width) / (i - firstInLine + 2);
                    arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, i, interval);

                    accumulatedHeight += currentLineSize.Height;
                    currentLineSize = desiredSize;

                    if (desiredSize.Width > finalSize.Width) //the element is wider then the constraint - give it a separate line                    
                    {
                        arrangeLine(accumulatedHeight, desiredSize.Height, i, ++i, 0);
                        accumulatedHeight += desiredSize.Height;
                        currentLineSize = new Size();
                    }
                    firstInLine = i;
                    lineCount++;
                }
                else //continue to accumulate a line
                {
                    currentLineSize.Width += desiredSize.Width;
                    currentLineSize.Height = Math.Max(desiredSize.Height, currentLineSize.Height);
                }
            }

            if (firstInLine < elements.Count)
            {
                if (lineCount == 0)
                {
                    interval = (finalSize.Width - currentLineSize.Width) / (elements.Count - firstInLine + 1);
                }
                arrangeLine(accumulatedHeight, currentLineSize.Height, firstInLine, elements.Count, interval);
            }
                

            return finalSize;
        }

        private void arrangeLine(double y, double lineHeight, int start, int end, double interval)
        {
            double x = 0;
            UIElementCollection children = InternalChildren;
            for (int i = start; i < end; i++)
            {
                x += interval;
                UIElement child = children[i];
                child.Arrange(new Rect(x, y, child.DesiredSize.Width, lineHeight));
                x += child.DesiredSize.Width;
            }
        }
    }
}

接下来，便是将这个MyWrapPanel作为ListBox的ItemsPanelTemplate即可：

<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}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 VerticalAlignment="Center" BorderThickness="0">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:MyWrapPanel 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}" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.Style>
                <Style TargetType="{x:Type ListBox}">
                    
                </Style>
            </ListBox.Style>
        </ListBox>
    </Grid>
</Window>

界面对应的ViewModel：

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;
            for(int i =0; i < 60; ++i)
            {
                var temp = new WndViewModel()
                {
                    CameraName = string.Format("Camera {0}", ++count),
                };
                DataSource.Add(temp);
            }
            //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);
            }
        }
    }
}

运行结果：

拉伸后：