wpf - 在 ItemsControl 中设置项目的最小和最大高度
问题描述
我正在使用 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>
对于 4 个以上的项目,滚动条显示正确,但项目的大小都为 150,而不是 300:
问题
当只有 1 个项目时,如何将内容对齐到顶部?(没有明显破坏其他功能)
额外问题:当有 4 个以上的项目时,如何让项目调整为最大高度而不是最小高度?
解决方案
在 WPF 布局过程中,将按顺序进行测量和排列。在大多数演员表中,如果一个UIElement
具有可变大小,它将返回所需的最小值作为结果。但是,如果任何布局对齐已设置为Stretch
,UIElement
则将尽可能沿该方向进行排列。在您的情况下,UniFormGrid
将始终返回 160(即Border.MinHeight
++ Border.Margin.Top
)Border.Margin.Bottom
* 测量结果中所需高度的项目计数(将存储在 中DesiredSize.DesiredSize.Height
)。但它会ItemsControl.ActualHeight
作为安排的高度,因为它有Stretch
VerticalAlignment
。所以,如果UniFormGrid.DesiredSize.Height
是 less then ItemsControl.ActualHeight
,那么UniFormGrid
任何孩子 hasStretch
VerticalAlignment
都会被垂直拉伸,直到遇到它的MaxHeight
。这就是为什么您的单项测试结果居中。如果您更改UniFormGrid.VerticalAlignment
或Border.VerticalAlignment
到Top
,你会得到一个 160 高度的项目在顶部ItemsContorl
。
这两个问题最简单的解决方案是根据最大行高和最小行高覆盖测量结果。我在下面编写代码并做了一些基本测试,它似乎工作得很好。
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>
推荐阅读
- java - 如何覆盖 BSImagePicker 画廊的后退按钮?
- python - 如何通过原生 API 在交易站显示买单
- javascript - 试图将 id 的值传递给占位符
- azure - Azure API 管理 - 动态 URL 问题
- javascript - Webpack 中的 SVG URL:模块解析失败:意外令牌 (1:0)
- python - 如何计算 num_fft 值?
- mysql - 如何在续集nodejs中从关联模型中加载没有嵌套对象的属性
- javascript - angular js多文件上传无法使用ngfile上传
- django - 当 proxy_set_header 设置为 $host 时 NGINX 不起作用
- regex - 非捕获组仍在选择元逃生