使用WrapPanel指定每行的项目数

时间:2011-10-23 06:52:30

标签: c# silverlight xaml

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

我在WrapPanel中放置了瓷砖,这很不错,因为如果我调整瓷砖的大小,旁边的其他瓷砖会移动并保持其边缘完美。然而,我一直在研究这个问题,我想尽可能将包装面板中的项目数限制为两个宽(现在它是三个宽),就像你选择其中一个瓷砖一样,它自己调整大小并推动一个瓷砖它旁边(或者如果它是自动推动它的结束方块)到下一行,而我的动画是平滑的,它看起来不是最好的演示......

有人能指出我如何指定我的报道只有两个项目的宽度?

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

尝试使用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);
   }

}