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 = ;
             int lineCount = ;

             Size currentLineSize = new Size();

             double accumulatedHeight = ;

             UIElementCollection elements = base.InternalChildren;
             double interval = 0.0;
             for (int i = ; 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 + );
                     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, );
                         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 == )
                 {
                     interval = (finalSize.Width - currentLineSize.Width) / (elements.Count - firstInLine + );
                 }
                 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 = ;
             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="" Width="">

     <Grid>
         <ListBox ItemsSource="{Binding DataSource}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  VerticalAlignment="Center" BorderThickness="">
             <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="">
                                     <TextBlock Text="{Binding CameraName}" Width="" 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 = ;
             for(int i =; i < ; ++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 = ;
         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);
             }
         }
     }
 }

运行结果：

拉伸后：