2017-02-24 40 views
0

我CustomItemsControl如下所示:设置宽度和ItemsControl的儿童的身高

<local:CustomItemsControl x:Name="CustomItemsControl" > 
     <local:CustomItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border x:Name="rectangle" Background="Orange" CornerRadius="5" /> 
      </DataTemplate> 
     </local:CustomItemsControl.ItemTemplate> 
    </local:CustomItemsControl> 

取决于哪个我CustomItemsControl包含,它应该计算宽度和“容器”的相关文件高度的物品的数量。

我想我可以通过调用项目的Measure/Arrange方法来实现。但我的代码似乎并不具有((实际)宽度或(实际)高度为NaN或0)

public class CustomItemsControl : ItemsControl 
{ 
    protected override Size MeasureOverride(Windows.Foundation.Size availableSize) 
    { 
     Windows.Foundation.Size size = base.ArrangeOverride(availableSize); 
     if (ItemsSource != null) 
     { 
      double CellWidth = size.Width/Items.Count; 
      foreach (var Item in Items) 
      { 
       DependencyObject Container = ContainerFromItem(Item); 
       if(Container!=null) 
       { 
        FrameworkElement Element = Container as FrameworkElement; 
        //Element.Width = CellWidth; 
        //Element.Height = CellWidth; 
        Element.Measure(new Size(CellWidth, CellWidth)); 
        Element.Arrange(new Rect(0, 0, CellWidth, CellWidth)); 
       } 

      } 
     } 
     return size; 
    } 
} 

该项目将不会,除非你设置的宽度和高度显示在项目的大小产生任何影响的边界(例如10)。我尝试完成我的CustomItemsControl计算项目的宽度和高度。我做错了什么?我怎样才能完成我的计划?

回答

1

你应该写一个适当的定制Panel与重写MeasureOverrideArrangeOverride方法并将其分配给一个ItemsControl的ItemsPanel属性:

<ItemsControl> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <local:CustomPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border ... /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

CustomPanel类可能看起来像如下所示。控件水平排列其子元素。它可以使用像StackPanel之类的Orientation属性进行扩展,以便水平或垂直排列其子项。

public class CustomPanel : Panel 
{ 
    protected override Size MeasureOverride(Size availableSize) 
    { 
     var size = new Size(); 

     if (double.IsInfinity(availableSize.Width)) // availableSize may be infinite 
     { 
      availableSize.Width = RenderSize.Width; 
     } 

     if (Children.Count > 0) 
     { 
      var cellWidth = availableSize.Width/Children.Count; 
      var childSize = new Size(cellWidth, cellWidth); 

      foreach (var child in Children) 
      { 
       child.Measure(childSize); 
      } 

      size.Width = availableSize.Width; 
      size.Height = cellWidth; 
     } 

     return size; 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     var size = new Size(); 

     if (Children.Count > 0) 
     { 
      var cellWidth = finalSize.Width/Children.Count; 
      var childRect = new Rect(0, 0, cellWidth, cellWidth); 

      foreach (var child in Children) 
      { 
       child.Arrange(childRect); 
       childRect.X += cellWidth; 
      } 

      size.Width = finalSize.Width; 
      size.Height = cellWidth; 
     } 

     return size; 
    } 
} 
+0

谢谢!我怎样才能定位项目垂直?使用上述解决方案,它们显示为垂直 – Briefkasten

+0

您是否需要在两个方向之间切换? – Clemens

+1

是的。顺便说一句。我自己想出来了。我改变了'var cellWidth = size.Height/Children.Count;'和'childRect.Y + = cellWidth;':) – Briefkasten