WPF如何用ItemsPanelTemplate实现元素固定高度比例显示？

要实现动态项数量下保持固定高度比例的ItemsControl，你可以自定义一个Panel控件，通过附加属性绑定每个项的高度比例，然后在面板内部计算并分配空间。以下是具体实现步骤：

1. 自定义比例垂直面板 #

创建一个继承自Panel的类，添加附加属性存储每个项的高度比例，并重写布局方法实现比例分配：

using System.Linq;
using System.Windows;
using System.Windows.Controls;

public class ProportionateVerticalPanel : Panel
{
    // 附加属性：用于指定每个子元素的高度比例
    public static readonly DependencyProperty ProportionProperty =
        DependencyProperty.RegisterAttached(
            "Proportion", 
            typeof(double), 
            typeof(ProportionateVerticalPanel),
            new FrameworkPropertyMetadata(1.0, FrameworkPropertyMetadataOptions.AffectsParentArrange));

    public static void SetProportion(UIElement element, double value)
    {
        element.SetValue(ProportionProperty, value);
    }

    public static double GetProportion(UIElement element)
    {
        return (double)element.GetValue(ProportionProperty);
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        double totalProportion = 0;
        foreach (UIElement child in InternalChildren)
        {
            // 累加有效比例（默认比例为1）
            double proportion = GetProportion(child);
            totalProportion += proportion > 0 ? proportion : 1;
            // 让子元素测量自身宽度，高度暂不限制
            child.Measure(new Size(availableSize.Width, double.PositiveInfinity));
        }

        // 面板的期望宽度取所有子元素的最大宽度，高度使用可用空间
        double maxWidth = InternalChildren.Cast<UIElement>().Max(c => c.DesiredSize.Width);
        return new Size(Math.Min(maxWidth, availableSize.Width), availableSize.Height);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        double totalProportion = 0;
        foreach (UIElement child in InternalChildren)
        {
            double proportion = GetProportion(child);
            totalProportion += proportion > 0 ? proportion : 1;
        }

        double currentY = 0;
        foreach (UIElement child in InternalChildren)
        {
            double proportion = GetProportion(child);
            // 计算当前项的高度：(项比例/总比例) * 面板总高度
            double itemHeight = (proportion > 0 ? proportion : 1) / totalProportion * finalSize.Height;
            // 排列子元素：宽度占满面板，高度按比例分配
            child.Arrange(new Rect(0, currentY, finalSize.Width, itemHeight));
            currentY += itemHeight;
        }

        return finalSize;
    }
}

2. 在ItemsControl中使用自定义面板 #

假设你的数据项ViewModel包含HeightProportion属性（用于指定该项的高度比例），XAML中可以这样配置：

ViewModel示例 #

public class ItemViewModel
{
    public double HeightProportion { get; set; }
    // 其他业务属性...
}

// 绑定的集合
public ObservableCollection<ItemViewModel> Items { get; } = new ObservableCollection<ItemViewModel>
{
    new ItemViewModel { HeightProportion = 2 },
    new ItemViewModel { HeightProportion = 3 },
    new ItemViewModel { HeightProportion = 4 }
};

XAML代码 #

<ItemsControl ItemsSource="{Binding Items}">
    <!-- 指定自定义面板为项容器 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:ProportionateVerticalPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    
    <!-- 项模板：绑定比例附加属性 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <control:MyControl 
                local:ProportionateVerticalPanel.Proportion="{Binding HeightProportion}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

方案说明 #

• 动态适配：不管项数量多少，面板都会根据所有项的比例总和自动分配高度
• 比例保持：窗口缩放时，每个项的高度会按原比例同步缩放，始终填满容器且无滚动条
• 灵活性：比例值通过数据绑定从ViewModel获取，支持动态修改比例

内容的提问来源于stack exchange，提问作者Surrizen