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

news2025/3/26 3:31:34

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 尺寸的行或列

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2320904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

deepSeek-SSE流式推送数据

1、背景 DeepSeek作为当前最火的AI大模型&#xff0c; 使用的时候用户在输入框输入问题&#xff0c;大模型进行思考回答你&#xff0c;然后会有一个逐步显示的过程效果&#xff0c;而不是一次性返回整个答案给前端页面进行展示&#xff0c;为了搞清楚其中的原理&#xff0c;我们…

【北京迅为】iTOP-RK3568开发板OpenHarmony系统南向驱动开发UART接口运作机制

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

C#实现自己的Json解析器(LALR(1)+miniDFA)

C#实现自己的Json解析器(LALR(1)miniDFA) Json是一个用处广泛、文法简单的数据格式。本文介绍如何用bitParser&#xff08;拥有自己的解析器&#xff08;C#实现LALR(1)语法解析器和miniDFA词法分析器的生成器&#xff09;迅速实现一个简单高效的Json解析器。 读者可在&#xf…

机器学习——KNN数据均一化

在KNN&#xff08;K-近邻&#xff09;算法中&#xff0c;数据均一化&#xff08;归一化&#xff09;是预处理的关键步骤&#xff0c;用于消除不同特征量纲差异对距离计算的影响。以下是两种常用的归一化操作及其核心要点&#xff1a; 质押 一 、主要思想 1. 最值归一化&#…

异步编程与流水线架构:从理论到高并发

目录 一、异步编程核心机制解析 1.1 同步与异步的本质区别 1.1.1 控制流模型 1.1.2 资源利用对比 1.2 阻塞与非阻塞的技术实现 1.2.1 阻塞I/O模型 1.2.2 非阻塞I/O模型 1.3 异步编程关键技术 1.3.1 事件循环机制 1.3.2 Future/Promise模式 1.3.3 协程&#xff08;Cor…

哈尔滨工业大学DeepSeek公开课人工智能:大模型原理 技术与应用-从GPT到DeepSeek|附视频下载方法

导 读INTRODUCTION 今天继续哈尔滨工业大学车万翔教授带来了一场主题为“DeepSeek 技术前沿与应用”的报告。 本报告深入探讨了大语言模型在自然语言处理&#xff08;NLP&#xff09;领域的核心地位及其发展历程&#xff0c;从基础概念出发&#xff0c;延伸至语言模型在机器翻…

Excel处理控件Spire.XLS系列教程:C# 在 Excel 中添加或删除单元格边框

单元格边框是指在单元格或单元格区域周围添加的线条。它们可用于不同的目的&#xff0c;如分隔工作表中的部分、吸引读者注意重要的单元格或使工作表看起来更美观。本文将介绍如何使用 Spire.XLS for .NET 在 C# 中添加或删除 Excel 单元格边框。 安装 Spire.XLS for .NET E-…

Web开发-JS应用NodeJS原型链污染文件系统Express模块数据库通讯

知识点&#xff1a; 1、安全开发-NodeJS-开发环境&功能实现 2、安全开发-NodeJS-安全漏洞&案例分析 3、安全开发-NodeJS-特有漏洞 node.js就是专门运行javascript的一个应用程序&#xff0c;区别于以往用浏览器解析原生js代码&#xff0c;node.js本身就可以解析执行js代…

国产达梦(DM)数据库的安装(Linux系统)

目录 一、安装前的准备工作 1.1 导包 1.2 创建用户和组 1.3 修改文件打开最大数 1.4 目录规划 1.5 修改目录权限 二、安装DM8 2.1 挂载镜像 2.2 命令行安装 2.3 配置环境变量 2.4 启动图形化界面 三、配置实例 四、注册服务 五、启动 停止 查看状态 六、数据库客…

git的底层原理

git的底层原理 三段话总结git&#xff0c; 1. 工作原理&#xff1a;git管理是一个DAG有向无环图&#xff0c;HEAD指针指向branch或直接指向commit&#xff0c;branch指向commit&#xff0c;commit指向tree&#xff0c;tree指向别的tree或直接指向blob。 2. git所管理的一个目录…

MATLAB+Arduino利用板上的按键控制板上Led灯

几年不使用&#xff0c;之前的知识都忘掉了。需要逐步捡起来。 1 熟悉按键的使用 2熟悉灯的控制 1 电路 我们将通过 MATLAB 的 Arduino 支持包与 Arduino 板通信&#xff0c;读取按键状态并控制 LED 灯的亮灭。 按键&#xff1a;连接到 Arduino 的数字引脚&#xff08;例如…

Cocos Creator Shader入门实战(五):材质的了解、使用和动态构建

引擎&#xff1a;3.8.5 您好&#xff0c;我是鹤九日&#xff01; 回顾 前面的几篇文章&#xff0c;讲述的主要是Cocos引擎对Shader使用的一些固定规则&#xff0c;这里汇总下&#xff1a; 一、Shader实现基础是OpenGL ES可编程渲染管线&#xff0c;开发者只需关注顶点着色器和…

vue设置自定义logo跟标题

准备 Logo 图片 将自定义的 Logo 图片&#xff08;如 logo.png&#xff09;放置在项目的 public文件夹下。 使用环境变量设置 Logo 和标题&#xff08;可选&#xff09; 创建或修改 .env 文件 在项目根目录下创建或修改 .env 文件&#xff0c;添加以下内容&#xff1a; VITE_A…

尝试在软考65天前开始成为软件设计师-计算机网络

OSI/RM 七层模型 层次名功能主要协议7应用层实现具体应用功能 FTP(文件传输)、HTTP、Telnet、 POP3(邮件)SMTP(邮件) ------- DHCP、TFTP(小文件)、 SNMP、 DNS(域名) 6表示层数据格式,加密,压缩.....5会话层建立,管理&终止对话4传输层端到端连接TCP,UDP3网络层分组传输&a…

VMware主机换到高配电脑,高版本系统的问题

原来主机是i3 ,windows7系统&#xff0c;vmware 14.0,虚机系统是ubuntu 14.04。目标新机是i7 14700KF,windows11系统。原以为安装虚拟机&#xff0c;将磁盘文件&#xff0c;虚拟机配置文件拷贝过去可以直接用。 新目标主机先安装了vmware 15&#xff0c;运行原理虚机&#xff0…

【Linux内核系列】:动静态库详解

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 有些鸟儿是注定是关不住的&#xff0c;因为它们的每一片羽翼都沾满了自由的光辉 ★★★ 本文前置知识&#xff1a; 编译与链接的过程…

windows环境下NER Python项目环境配置(内含真的从头安的perl配置)

注意 本文是基于完整项目的环境配置&#xff0c;即本身可运行项目你拿来用 其中有一些其他问题&#xff0c;知道的忽略即可 导入pycharm基本包怎么下就不说了&#xff08;这个都问&#xff1f;给你一拳o(&#xff40;ω*)o&#xff09; 看perl跳转第5条 1.predict报错多个设备…

IDEA批量替换项目下所有文件中的特定内容

文章目录 1. 问题引入2. 批量替换项目下所有文件中的特定内容2.1 右键项目的根目录&#xff0c;点击在文件中替换2.2 输入要替换的内容 3. 解决替换一整行文本后出现空行的问题4. 增加筛选条件提高匹配的精确度 更多 IDEA 的使用技巧可以查看 IDEA 专栏&#xff1a; IDEA 1. 问…

【蓝桥杯】4535勇闯魔堡(多源BFS + 二分)

思路 k有一个范围&#xff08;0到怪物攻击的最大值&#xff09;&#xff0c;求满足要求的k的最小值。很明显的二分套路。 关键是check函数怎么写&#xff0c;我们需要找到一条从第一行到最后一行的路径&#xff0c;每一次可以从上下左右四个方向前进&#xff0c;那么我么可以用…

HTML图像标签的详细介绍

1. 常用图像格式 格式特点适用场景JPEG有损压缩&#xff0c;文件小&#xff0c;不支持透明适合照片、复杂图像PNG无损压缩&#xff0c;支持透明&#xff08;Alpha通道&#xff09;适合图标、需要透明背景的图片GIF支持动画&#xff0c;最多256色简单动画、低色彩图标WebP谷歌开…