Specifying number of items per row using a WrapPanel

问题

I'm attempting to create an application that looks much like the Windows 8 Metro UI with the tiles.. right now if you click on a tile I have an animation that increases the width and reveals more info on that tile.

I have the tiles laid out in a WrapPanel which is nice because if I resize the tile the other tiles next to it move and keep it's margin perfectly. However I've been researching this for awhile, I would like to if possible limit the number of items in the wrap panel to two wide (Right now it's three wide) as if you select one of the tiles it resizes itself and pushes a tile next to it (or if it's the end tile it will push itself) to the next row, while my animations are smooth it doesn't look the best presentation-wise..

Could someone point me towards how I might specify my wrappanel to only have a width of two items across?

Any help is very much appreciated.

回答1:

Try making your own wrap panel deriving from standard wrap panel as described in this post in detail. Post addresses the same issue which you are trying to solve.

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);
   }

}

来源：https://stackoverflow.com/questions/7864792/specifying-number-of-items-per-row-using-a-wrappanel

标签

silverlight

xaml