设置ItemsControl子项的宽度和高度 [英] Set Width and Height of ItemsControl Children

问题描述

我的 CustomItemsControl 如下所示:

My CustomItemsControl looks like the following:

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

根据我的 CustomItemsControl 包含的项目数量，它应该计算容器"项目的宽度和高度.

Depending on the amount of the items which my CustomItemsControl contain, it should calculate the Width and the Height of "Container" Items.

我认为我可以通过调用 Measure/Arrange of the Items 方法来实现这一点.但是我的代码似乎对项目的大小没有任何影响((实际)宽度或(实际)高度为 NaN 或 0)

I thought I could achieve that by calling the methods Measure/Arrange of the Items. But my Code doesn't seem to have any effects on the Item's size ((Actual)Width or (Actual)Height is NaN or 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 计算项目的宽度和高度.我做错了什么?我怎样才能完成我的计划?

The items will not be displayed unless you set the Width and Height of the Border (e.g. 10). I try to accomplish that my CustomItemsControl calculates the Width and Height of the Items. What did I do wrong? How can I accomplish my plan?

推荐答案

您应该编写适当的自定义 Panel 并覆盖 MeasureOverride 和 ArrangeOverride方法并将其分配给 ItemsControl 的 ItemsPanel 属性:

You should write an appropriate custom Panel with overridden MeasureOverride and ArrangeOverride methods and assign it to the ItemsPanel property of an ItemsControl:

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

CustomPanel 类可能如下所示.该控件水平排列其子元素.它可以使用 Orientation 属性(如 StackPanel 之一)进行扩展，以水平或垂直排列其子项.

The CustomPanel class could look like shown below. The control arranges its child elements horizontally. It may be extended with an Orientation property like the one of StackPanel, to arrange its children either horizontally or vertically.

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

这篇关于设置ItemsControl子项的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！