如何填写ItemsControl中的按钮

Question

我需要填写可点击的按钮，基于细胞的面板，看起来像这样：

with rectangle

这与矩形做：

<ItemsControl ItemsSource="{Binding Path=Cells}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Rectangle> 
        <Rectangle.Fill> 
         <SolidColorBrush Color="Red"></SolidColorBrush> 
        </Rectangle.Fill> 
       </Rectangle> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <commonControls:UniformGrid ElementsGap="5" HorizontalCount="{Binding Path=CellsInRow}" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 

，但我需要用按钮来完成。我想的是：

<ItemsControl ItemsSource="{Binding Path=Cells}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button> 
        <Button.Background> 
         <SolidColorBrush Color="Red"></SolidColorBrush> 
        </Button.Background> 
       </Button> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <commonControls:UniformGrid ElementsGap="5" HorizontalCount="{Binding Path=CellsInRow}" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 

但似乎这样的：

with button

如何我可以从按键的第一图像做细胞？下面UniformGrid的

代码：

public class UniformGrid : Panel 
{ 
    public static readonly DependencyProperty HorizontalCountProperty = 
     DependencyProperty.Register("HorizontalCount", typeof (int), typeof (UniformGrid), 
            new PropertyMetadata(default(int))); 

    public int HorizontalCount 
    { 
     get { return (int) GetValue(HorizontalCountProperty); } 
     set { SetValue(HorizontalCountProperty, value); } 
    } 

    public static readonly DependencyProperty ElementsGapProperty = 
     DependencyProperty.Register("ElementsGap", typeof (double), typeof (UniformGrid), 
            new PropertyMetadata(default(double))); 

    public double ElementsGap 
    { 
     get { return (double) GetValue(ElementsGapProperty); } 
     set { SetValue(ElementsGapProperty, value); } 
    } 

    protected override Size MeasureOverride(Size availableSize) 
    { 
     return new Size(); 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     if (Children != null && Children.Count != 0) 
     { 
      var squareSideForElement = (finalSize.Width - (HorizontalCount - 1)*ElementsGap)/HorizontalCount; 
      var sizeOfElement = new Size(squareSideForElement, squareSideForElement); 
      for (var i = 0; i < Children.Count; i++) 
      { 
       var rowIndex = i%HorizontalCount; 
       var columnIndex = i/HorizontalCount; 
       var resultPoint = new Point 
        { 
         X = rowIndex*(squareSideForElement + ElementsGap), 
         Y = columnIndex*(squareSideForElement + ElementsGap) 
        }; 
       Children[i].Arrange(new Rect(resultPoint, sizeOfElement)); 

      } 

     } 
     return finalSize; 
    } 
} 

Answer 1

你的MeasureOverride必须调用Measure上的每个孩子。请仔细阅读说明部分中MeasureOverride，尤其是下面的注释：

元素在此过程中应该调用每个孩子措施， 否则子元素将不会被正确尺寸或安排

你应该至少做到这一点：

protected override Size MeasureOverride(Size availableSize) 
{ 
    foreach (UIElement element in InternalChildren) 
    { 
     element.Measure(availableSize); 
    } 

    return new Size(); 
} 

如果你想确保每一个孩子计算其最大首选大小，你可以通过一个无限宽度和高度Measu再次：

protected override Size MeasureOverride(Size availableSize) 
{ 
    availableSize = new Size(double.PositiveInfinity, double.PositiveInfinity); 

    foreach (UIElement element in InternalChildren) 
    { 
     element.Measure(availableSize); 
    } 

    return new Size(); 
}