问题

Question

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

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

这是我到目前为止所拥有的：

<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：

问题

当只有一项时，如何将内容对齐到顶部？（不会明显破坏其他功能）

奖励问题：当有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} }。这就是为什么您的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>

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

问题

1 个答案: