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

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

二、实现

XML 复制代码
 <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

四、示例

XML 复制代码
<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个人主页-哔哩哔哩视频

相关推荐
huizhixue-IT8 小时前
华为存储考试内容&HCIP-Storage
wpf
桂月二二1 天前
实时事件流处理架构的容错设计
架构·wpf
源之缘-OFD先行者1 天前
GMap.NET + WPF:构建高性能 ADS-B 航空器追踪平台
.net·wpf·ads-b
Marzlam1 天前
WPF学习路线
wpf
weixin_535455791 天前
WPF设计学习记录滴滴滴2
学习·wpf
^@^lemon tea^@^1 天前
WPF 浅述IsHitTestVisible属性
wpf·wpf 穿透
lixy5791 天前
C# WPF 命令机制(关闭CanExecute自动触发,改手动)
c#·wpf
Marzlam2 天前
一文了解WPF技术简介
wpf
arriettyandray2 天前
C#/WPF学习系列之问题记录——使用不流畅
c#·wpf
勘察加熊人3 天前
wpf+c#路径迷宫鼠标绘制
开发语言·c#·wpf