在ItemsControl中设置项目的最小和最大高度

Question

我正在使用ItemsControl来显示1到10个项目的列表（通常是2到4个）。我正在努力满足所有这些要求：

• 所有行必须是相同的高度
• 如果可能，所有行应显示在最大300的高度。
• 如果没有足够的空间显示300高的所有行，则以尽可能高的高度显示。
• 如果最大可能高度小于150，则以maxsize显示并使用滚动条
• 如果行没有填充页面，则它必须在顶部垂直对齐

这是我到目前为止：

<Window x:Class="TestGridRows.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:TestGridRows"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance vm:MainViewModel}"
        Height="570" Width="800">

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding Path=DataItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border MinHeight="150" MaxHeight="300" BorderBrush="DarkGray" BorderThickness="1" Margin="5">
                        <TextBlock Text="{Binding Path=TheNameToDisplay}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1" IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </ScrollViewer>
</Window>

这是目前看起来像1项：

这应该是它的样子：

---

2或3项目按预期显示：

---

对于4个以上的项目，滚动条显示正确，但项目的大小均为150，而不是300：

Question

当只有1个项目时，如何将内容与顶部对齐？ （显然没有打破其他功能）

红利问题：当有4件以上的物品时，如何让物品调整到最大高度而不是最小高度？

Answer 1

在WPF布局过程中，将按顺序进行测量和排列。在大多数演员表中，如果UIElement具有可变大小，则返回所需的最小值。但是如果任何布局对齐已经设置为Stretch，UIElement将尽可能在这个方向上进行安排。在你的情况下，UniFormGrid将始终返回160（这是Border.MinHeight + Border.Margin.Top + Border.Margin.Bottom）*测量结果中所需高度的项目数（将存储在DesiredSize.DesiredSize.Height中）。但它需要ItemsControl.ActualHeight作为安排的高度，因为它有Stretch VerticalAlignment。因此，如果UniFormGrid.DesiredSize.Height少于ItemsControl.ActualHeight，UniFormGrid和任何孩子有Stretch VerticalAlignment将垂直伸展，直到它遇到它的MaxHeight。这就是为什么你的1项测试导致了中心。如果你将UniFormGrid.VerticalAlignment或Border.VerticalAlignment改为Top，你将在ItemsContorl的顶部获得一个160高度的物品。

---

这两个问题最简单的解决方案是根据最大行高和最小行高覆盖测量结果。我在下面编写代码并做了一些基本的测试，似乎工作得很好。

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class MyScrollViewer : ScrollViewer
    {
        public double DesiredViewportHeight;

        public MyScrollViewer() : base() { }

        protected override Size MeasureOverride(Size constraint)
        {
            // record viewport's height for late calculation 
            DesiredViewportHeight = constraint.Height;

            var result = base.MeasureOverride(constraint);

            // make sure that `ComputedVerticalScrollBarVisibility` will get correct value 
            if (ComputedVerticalScrollBarVisibility == Visibility.Visible && ExtentHeight <= ViewportHeight)
                result = base.MeasureOverride(constraint);

            return result;
        }
    }

    public class MyUniformGrid : UniformGrid
    {
        private MyScrollViewer hostSV;
        private ItemsControl hostIC;

        public MyUniFormGrid() : base() { }

        public double MaxRowHeight { get; set; }
        public double MinRowHeight { get; set; }

        protected override Size MeasureOverride(Size constraint)
        {
            if (hostSV == null)
            {
                hostSV = VisualTreeHelperEx.GetAncestor<MyScrollViewer>(this);
                hostSV.SizeChanged += (s, e) =>
                {
                    if (e.HeightChanged)
                    {
                        // need to redo layout pass after the height of host had changed.  
                        this.InvalidateMeasure();
                    }
                };
            }

            if (hostIC == null)
                hostIC = VisualTreeHelperEx.GetAncestor<ItemsControl>(this);

            var viewportHeight = hostSV.DesiredViewportHeight;
            var rows = hostIC.Items.Count;
            var rowHeight = viewportHeight / rows;
            double desiredHeight = 0;

            // calculate the correct height
            if (rowHeight > MaxRowHeight || rowHeight < MinRowHeight)
                desiredHeight = MaxRowHeight * rows;
            else
                desiredHeight = viewportHeight;

            var result = base.MeasureOverride(constraint);

            return new Size(result.Width, desiredHeight);
        }
    }

    public class VisualTreeHelperEx
    {
        public static T GetAncestor<T>(DependencyObject reference, int level = 1) where T : DependencyObject
        {
            if (level < 1)
                throw new ArgumentOutOfRangeException(nameof(level));

            return GetAncestorInternal<T>(reference, level);
        }

        private static T GetAncestorInternal<T>(DependencyObject reference, int level) where T : DependencyObject
        {
            var parent = VisualTreeHelper.GetParent(reference);

            if (parent == null)
                return null;

            if (parent is T && --level == 0)
                return (T)parent;

            return GetAncestorInternal<T>(parent, level);
        }
    }
}

XAML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Height="570" Width="800">

    <local:MyScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl>
            <sys:String>aaa</sys:String>
            <sys:String>aaa</sys:String>
            <sys:String>aaa</sys:String>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="DarkGray" BorderThickness="1" Margin="5">
                        <TextBlock Text="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ContentPresenter}}"
                                   VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:MyUniformGrid Columns="1"  MinRowHeight="150" MaxRowHeight="300" VerticalAlignment="Top"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </local:MyScrollViewer>
</Window>