当前位置: 首页 > news >正文

WPF 布局中的共性尺寸组(Shared Size Group)

1. 什么是共性尺寸组?

在 WPF 的 Grid 布局中,SharedSizeGroup 允许多个 Grid 共享同一列或行的尺寸,即使它们属于不同的 Grid 也能保持大小一致。这样可以保证界面元素的对齐性,提高布局的一致性。

SharedSizeGroup 主要用于需要多个 Grid 具有相同列宽或行高的情况,比如多行表单、数据展示等。


2. 如何使用 SharedSizeGroup

使用 SharedSizeGroup 需要满足以下几个条件:

  1. GridColumnDefinitionRowDefinition 中指定 SharedSizeGroup 名称。
  2. 所在的 Grid 必须设置 IsSharedSizeScope="True",否则 SharedSizeGroup 不会生效。

示例代码:

  <StackPanel >
      <!--  第一个 Grid:显示姓名  -->
      <Grid Grid.IsSharedSizeScope="True">
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
              <ColumnDefinition SharedSizeGroup="GroupA" />
              <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>

          <TextBlock
              Grid.Column="0"
              Background="LightBlue"
              Text="姓名:" />
          <TextBlock
              Grid.Column="1"
              Background="LightGray"
              Text="张三" />
      </Grid>

      <!--  第二个 Grid:显示年龄  -->
      <Grid Grid.IsSharedSizeScope="True">
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
              <ColumnDefinition SharedSizeGroup="GroupA" />
              <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>

          <TextBlock
              Grid.Column="0"
              Background="LightBlue"
              Text="年龄:" />
          <TextBlock
              Grid.Column="1"
              Background="LightGray"
              Text="25" />
      </Grid>
  </StackPanel>
  • 两个 Grid 的第一列都设置了 SharedSizeGroup="GroupA",因此无论各自内容多长,它们都会共享同一宽度。
  • 每个 Grid 都设置了 Grid.IsSharedSizeScope="True",保证共享尺寸生效。

3. Grid.IsSharedSizeScope 的作用

IsSharedSizeScope 属性用于开启共享尺寸的范围。只有在设置为 True 后,Grid 内部的 SharedSizeGroup 才会按照定义共享尺寸。如果不设置该属性,即使列或行定义了 SharedSizeGroup,它们也不会互相同步尺寸。

注意:默认情况下,IsSharedSizeScopeFalse,所以需要手动设置为 True


4. 详细示例代码

下面这个示例展示了在一个 StackPanel 中有两个 Grid,并且这两个 Grid 的第一列宽度保持一致:

 <StackPanel Grid.IsSharedSizeScope="True">
     <!--  第一个 Grid:显示产品名称  -->
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition SharedSizeGroup="GroupA" />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>

         <TextBlock
             Grid.Column="0"
             Background="LightBlue"
             Text="产品名称:" />
         <TextBlock
             Grid.Column="1"
             Background="LightGray"
             Text="苹果手机" />
     </Grid>

     <!--  第二个 Grid:显示价格  -->
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition SharedSizeGroup="GroupA" />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>

         <TextBlock
             Grid.Column="0"
             Background="LightBlue"
             Text="价格:" />
         <TextBlock
             Grid.Column="1"
             Background="LightGray"
             Text="5000元" />
     </Grid>
 </StackPanel>
  • 两个 Grid 中的第一列都属于 SharedSizeGroup="GroupA",因此这两列会共享相同的宽度。
  • 不论各自的文本内容如何变化,第一列的宽度始终保持一致。

5. 注意事项与适用场景

(1)SharedSizeGroup 仅适用于 Auto 尺寸的行或列

SharedSizeGroup 只能应用于 Width="Auto"Height="Auto" 的情况,不能用于使用 *(星号)分配尺寸的 ColumnDefinitionRowDefinition

错误示例:

<ColumnDefinition SharedSizeGroup="GroupB" Width="*" />  <!-- 无效 -->

(2)适用场景

  • 表单布局:确保多个表单项的标签列宽一致,提高界面美观。
  • 数据列表:在多 Grid 布局的情况下,保持同一列宽度一致性,便于阅读和比较。
  • 动态调整界面:当界面布局需要根据内容动态变化时,使用共享尺寸组可保证整体对齐。

(2)SharedSizeGroup 仅适用于 Auto 尺寸的行或列

错误示例:

<Grid Grid.IsSharedSizeScope="True" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="GroupA" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock
        Margin="80"
        Background="Red"
        Text="33333dd3333333333333333333333333333333333333333333333" />

    <Grid Grid.IsSharedSizeScope="True" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="GroupA" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBlock
            Grid.Row="0"
            Margin="0,50,0,0"
            Background="DarkBlue"
            Text="333333333333333333333333333" />
    </Grid>
</Grid>

外层 Grid

  •  Grid.IsSharedSizeScope="True"开启了共享尺寸组作用域,这意味着在这个 Grid 内部,设置了同一 SharedSizeGroup 名称的行或列将会共享尺寸。

内层 Grid

  • Grid.IsSharedSizeScope="True"内层 Grid 同样开启了共享尺寸组作用域,但要注意:由于它是嵌套在外层 Grid 内部,默认情况下内层 Grid会拥有独立的共享尺寸作用域。也就是说,外层 Grid 中的 GroupA 与内层 Grid 中的 GroupA 不会相互影响,除非它们在同一个共享尺寸作用域中。

关键点与注意事项

  • 共享尺寸作用域(IsSharedSizeScope)

    外层和内层 Grid 都设置了 Grid.IsSharedSizeScope="True"。不过,它们分别拥有自己的共享尺寸作用域,因此外层 Grid 中的 GroupA 与内层 Grid 中的 GroupA 不会共享尺寸。如果你的目的是让内外层的行共享同一尺寸,需要将它们置于同一个作用域中(例如,把它们作为同一父容器的直接子元素,并在父容器上设置 IsSharedSizeScope="True")。

6. 总结

功能实现方式
让多个 Grid 共享同一列/行的尺寸ColumnDefinitionRowDefinition 中设置 SharedSizeGroup 属性
启用共享尺寸功能设置 Grid.IsSharedSizeScope="True"
使用限制仅适用于 Auto 尺寸的行或列

相关文章:

  • Git远程拉取和推送配置
  • Docker Compose部署MantisBT
  • 在本地跑通spark环境
  • 网络防火墙(Firewall)、Web防火墙(WAF)、入侵检测系统(IDS)、入侵防御系统(IPS)对比总结
  • webrtc3A算法
  • Python数据可视化工具:六西格玛及其基础工具概览
  • 进程管理笔记1-进程线程基础知识
  • R语言绘图:小提琴图
  • 在Mac上一键安装Mysql(解决所有安装问题)
  • sql-DDL
  • 《C语言中的“吃豆人”:%*c 的奇妙冒险》
  • Lineageos 22.1(Android 15)实现负一屏
  • CSS 选择器详解:类型、用法与示例
  • 微博ip属地不发微博会不会变
  • Oracle 数据迁移至 GaussDB 注意事项
  • Gone v2 Tracer 组件-给微服务提供统一的traceID
  • 科技资讯杂志科技资讯编辑部科技资讯杂志社2025年第2期目录
  • 软考笔记——程序设计语言基础知识
  • Linux文件IO
  • 浅谈canal实例 在docker里面安装canal镜像 Canal监听MySQL数据库变更并同步更新Redis和Elasticsearch 示例
  • 特朗普将举行集会庆祝重返白宫执政百日,被指时机不当
  • 云南鲁甸县一河滩突然涨水致4死,有人在救人过程中遇难
  • 时代邻里:拟收购成都合达联行科技剩余20%股权
  • 《不眠之夜》上演8年推出特别版,多业态联动形成戏剧经济带
  • 昆明一小区电梯突然从40楼降到负4楼,回应:临时断电引起
  • 联手华为猛攻主流市场,上汽集团总裁:上汽不做生态孤岛