WPF：同步 ItemsControl 中所有项目的宽度

Question

是否可以将WrapPanel中所有TextBlock的宽度调整为WrapPanel中最大TextBlock的大小？最终结果应该是包含 "Some data" 的控件的宽度与包含 "Even more data than before." 的控件的宽度相同我已附加到我的初始代码作为起点。我以字符串为例，但集合数据和模板可以是任何东西，所以我不能依赖字符串的长度。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Collections:ArrayList x:Key="data">
            <System:String>Some data</System:String>
            <System:String>Some more data</System:String>
            <System:String>Even more data than before</System:String>
        </Collections:ArrayList>
    </Window.Resources>
    <ItemsControl ItemsSource="{StaticResource data}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Margin="5" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Text="{Binding}"></TextBlock>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

以及所需输出的图像：

Answer 1

您必须创建您自己的自定义版本的包装面板，该包装面板派生自包装面板才能实现您想要的效果。通常对于自定义面板，您必须覆盖以下 2 种方法：

MeasureOverride
排列覆盖

在您的情况下，您需要 measueoverride，您将在其中迭代元素并找出最大的元素，然后对 arrangeoverride 中的所有元素使用相同的大小。

有关如何创建自定义面板的更多信息： http://www.wpftutorial.net/CustomLayoutPanel.html

Answer 2

您可以在 itemsPanel 中添加 HorizontalContentAlignment=Stretch 和添加 UniformGrid。

 <Window.Resources>
    <Collections:ArrayList x:Key="data">
        <System:String>Some data</System:String>
        <System:String>Some more data</System:String>
        <System:String>Even more data than before</System:String>
    </Collections:ArrayList>
</Window.Resources>
<ListBox ItemsSource="{StaticResource data}" HorizontalContentAlignment="Stretch">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid IsItemsHost="True"></UniformGrid>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Margin="5" BorderThickness="1" BorderBrush="Black" >
                <TextBlock Text="{Binding}" Width="{Binding 
            RelativeSource={RelativeSource TemplatedParent},
            Path=Width}"></TextBlock>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 3

这是 Philip Stuyck 的自定义面板建议的替代方法，您可能会发现它更适合您的特定场景。（诚然，这有点骇人听闻。）

您可以使用 FormattedText class 计算字符串的长度。所以你可以遍历你的字符串并计算最大长度（这也假设你知道字体系列和大小）。然后只需将文本块的宽度绑定到最大宽度。我会将宽度值存储在父级别的单个属性中，然后使用 RelativeSource 绑定：

<TextBlock Text="{Binding}" 
           Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl},
                           Path=MaximumWidth}}" 
       />

（这种方法的一个缺点是，如果项目集合发生变化，您将不得不重新计算 MaximumWidth。）

Answer 4

使用共享大小的网格：

<ItemsControl ItemsSource="{StaticResource data}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnSize" />
                </Grid.ColumnDefinitions>
                <Border Margin="5" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Text="{Binding}"></TextBlock>
                </Border>
            </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

所有列保证宽度相同，因为它们共享一个尺寸组。由于它们是自动调整大小的，因此它们的大小也会调整为任何网格内容的最大实例。

WPF：同步 ItemsControl 中所有项目的宽度

WPF: Synchronize width of all items in ItemsControl

c#

wpf

xaml

wpf-controls