WPF下制作的简单瀑布流效果

  1 [TemplatePart(Name = "grdRoot", Type = typeof(UniformGrid))]
  2     public class WaterfallControl : ItemsControl
  3     {
  4         private UniformGrid grdRoot;
  5 
  6         private List<ItemsControl> itemsContorls;
  7 
  8         public int Columns
  9         {
 10             get { return (int)GetValue(ColumnsProperty); }
 11             set { SetValue(ColumnsProperty, value); }
 12         }
 13 
 14         // Using a DependencyProperty as the backing store for Columns.  This enables animation, styling, binding, etc...
 15         public static readonly DependencyProperty ColumnsProperty =
 16             DependencyProperty.Register("Columns", typeof(int), typeof(WaterfallControl), new PropertyMetadata(3, OnColumnsChanged));
 17 
 18         private static void OnColumnsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
 19         {
 20             int columns = (int)e.NewValue;
 21             if (columns < 1)
 22             {
 23                 throw new ArgumentOutOfRangeException("Columns");
 24             }
 25             var control = sender as WaterfallControl;
 26             control.Columns = columns;
 27             control.InitPanel();
 28         }
 29 
 30         public WaterfallControl()
 31         {
 32             this.Loaded += WaterfallControl_Loaded;
 33             this.itemsContorls = new List<ItemsControl>();
 34         }
 35 
 36         void WaterfallControl_Loaded(object sender, RoutedEventArgs e)
 37         {
 38             this.InitPanel();
 39         }
 40 
 41         private void InitPanel()
 42         {
 43             if (!this.IsLoaded)
 44             {
 45                 return;
 46             }
 47 
 48             grdRoot.Children.Clear();
 49             itemsContorls.Clear();
 50             for (var i = 0; i < this.Columns; i++)
 51             {
 52                 var ic = new ItemsControl();
 53                 ic.ItemTemplate = this.ItemTemplate;
 54                 ic.VerticalAlignment = System.Windows.VerticalAlignment.Top;
 55                 grdRoot.Children.Add(ic);
 56                 itemsContorls.Add(ic);
 57             }
 58 
 59             if (this.ItemsSource != null)
 60             {
 61                 var enumerator = this.ItemsSource.GetEnumerator();
 62                 while (enumerator.MoveNext())
 63                 {
 64                     this.AddChild(enumerator.Current);
 65                 }
 66             }
 67         }
 68 
 69         public override void OnApplyTemplate()
 70         {
 71             base.OnApplyTemplate();
 72             grdRoot = (UniformGrid)this.GetTemplateChild("grdRoot");
 73         }
 74 
 75         protected override void AddChild(object value)
 76         {
 77             var ic = itemsContorls.OrderBy(t => t.ActualHeight).FirstOrDefault();
 78             ic.Items.Add(value);
 79             ic.UpdateLayout();
 80         }
 81 
 82         protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
 83         {
 84             if (e.Action == NotifyCollectionChangedAction.Add || e.Action == NotifyCollectionChangedAction.Remove)
 85             {
 86                 var enumerator = e.NewItems.GetEnumerator();
 87                 while (enumerator.MoveNext())
 88                 {
 89                     if (e.Action == NotifyCollectionChangedAction.Add)
 90                     {
 91                         this.AddChild(enumerator.Current);
 92                     }
 93                     else
 94                     {
 95                         foreach (var ic in this.itemsContorls)
 96                         {
 97                             ic.Items.Remove(enumerator.Current);
 98                         }
 99                     }
100                 }
101             }
102         }
103     }

<Style TargetType="controls:WaterfallControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:WaterfallControl">
                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                        <UniformGrid Name="grdRoot" Columns="{TemplateBinding Columns}">

                        </UniformGrid>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>