使用 WrapPanel 指定每行的项目数答案

【问题标题】：Specifying number of items per row using a WrapPanel使用 WrapPanel 指定每行的项目数
【发布时间】：2011-10-23 06:52:29
【问题描述】：

我正在尝试创建一个看起来很像带有磁贴的 Windows 8 Metro UI 的应用程序。现在，如果您单击磁贴，我有一个动画可以增加宽度并显示该磁贴的更多信息。

我将瓦片放在 WrapPanel 中，这很好，因为如果我调整瓦片的大小，它旁边的其他瓦片会移动并完美地保持其边距。但是我已经研究了一段时间，如果可能的话，我想将包装面板中的项目数量限制为两个宽（现在它是三个宽），就好像你选择一个它自己调整大小的图块并推动一个图块在它旁边（或者如果它是结束图块，它会自行推动）到下一行，虽然我的动画很流畅，但它看起来并不是最好的展示方式..

有人能指出我如何将我的包装面板指定为只有两个项目的宽度吗？

非常感谢任何帮助。

【问题讨论】：

标签： c# silverlight xaml

【解决方案1】：

尝试按照this post 中的详细说明，从标准环绕面板派生出您自己的环绕面板。帖子解决了您尝试解决的同一问题。

public class MyWrapPanel : WrapPanel
{
    public int MaxRows
    {
      get { return (int)GetValue(MaxRowsProperty); }
      set { SetValue(MaxRowsProperty, value); }
    }

    public static readonly DependencyProperty MaxRowsProperty =
    DependencyProperty.Register("MaxRows", typeof(int), typeof(MyWrapPanel), new UIPropertyMetadata(4));

    protected override Size ArrangeOverride(Size finalSize)
    {
       Point currentPosition = new Point();
       double ItemMaxHeight = 0.0;
       int RowIndex = 0;

       foreach (UIElement child in Children)
       {
          ItemMaxHeight = ItemMaxHeight > child.DesiredSize.Height ? ItemMaxHeight : child.DesiredSize.Height;

          if (currentPosition.X + child.DesiredSize.Width > this.DesiredSize.Width)
          {
             currentPosition = new Point(0, currentPosition.Y + ItemMaxHeight);
             ItemMaxHeight = 0.0;
             RowIndex++;
          }

         if (RowIndex < MaxRows)
         {
             child.Visibility = System.Windows.Visibility.Visible;
             Rect childRect = new Rect(currentPosition, child.DesiredSize);
             child.Arrange(childRect);
         }
         else
         {
             Rect childRect = new Rect(currentPosition, new Size(0,0));
             child.Arrange(childRect);
         }

         currentPosition.Offset(child.DesiredSize.Width, 0);
      }

      return finalSize;
   }

   protected override Size MeasureOverride(Size availableSize)
   {
       return base.MeasureOverride(availableSize);
   }

}

【讨论】：