示例:WPF中应用Grid的SharedSizeGroup设置整齐的布局

一、目的：应用Grid的SharedSizeGroup设置整齐的布局

二、实现

 <ItemsControl ItemsSource="{local:GetStudents Count=5}">
     <ItemsControl.ItemTemplate>
         <DataTemplate>
             <Grid ShowGridLines="True">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition/>
                     <ColumnDefinition/>
                 </Grid.ColumnDefinitions>
                 <TextBlock Text="{Binding Address}" Grid.Column="0"/>
                 <TextBlock Text="{Binding Name}" Grid.Column="1"/>
             </Grid>
         </DataTemplate>
     </ItemsControl.ItemTemplate>
 </ItemsControl>

当我们在一个ItemsControl里面用Grid定义了两列时，显示效果如下，比较乱

一般情况我们会把Grid，的列宽设置一个固定值

这样看起来比较整齐，但是字段长度不可控制，有些会被覆盖掉，这时候需要 SharedSizeGroup，去控制列的宽度

三、环境

VS2022

四、示例

<ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{local:GetStudents Count=5}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="group1"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Address}" Grid.Column="0"/>
                <TextBlock Text="{Binding Name}" Grid.Column="1"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

 Grid.IsSharedSizeScope="True" 放在父级上，所有子元素的Grid标识了SharedSizeGroup都会列宽自动对齐

显示效果如下

五、需要了解的知识点

Grid 类 (System.Windows.Controls) | Microsoft Learn

Grid.IsSharedSizeScope Attached Property (System.Windows.Controls) | Microsoft Learn

DefinitionBase.SharedSizeGroup Property (System.Windows.Controls) | Microsoft Learn

六、源码地址

GitHub - HeBianGu/WPF-ControlDemo: 示例

GitHub - HeBianGu/WPF-ControlBase: Wpf封装的自定义控件资源库

GitHub - HeBianGu/WPF-Control: WPF轻量控件和皮肤库

七、了解更多

System.Windows.Controls 命名空间 | Microsoft Learn

https://github.com/HeBianGu

HeBianGu的个人空间-HeBianGu个人主页-哔哩哔哩视频