WPF网格布局

1介绍:

Grid为WPF中最常用的布局容器, 它可以将一个区域分为若干个行或列功用其他组件使用。

2:网格标签Grid.ColumnDef

|------------------------|---------------------------------------------------------|
| Grid | 网格区域 |
| Grid.ColumnDefinitions | 自定义列 只能设置宽度 不能设置高度 |
| ColumnDefinition | 网格布局中列的区域(可以设置宽度,宽度可以是一个具体值 也可以设置*的意思, 把剩余的宽度按照比例进行平分) |
| Grid.RowDefinitions | 自定义行 可以设置高度 但是不能设置高度 |
| RowDefinition | 设置布局中行的区域(高度可以是一个具体值 也可以设置*的意思,把剩余的高度 按照比例进行平分) |

3:使用布局的属性

Grid.Row="1" 位置在第二行

Grid.Column = "0" 位置在第一列

实例:

cs 复制代码
<!--ShowGridLines 是否显示分割线-->
<Grid ShowGridLines ="True">
<!--网络标签-->
<!--一. Grid.ColumnDefinitions 自定义列 只能设置宽度 不能设置高度-->
        <Grid.ColumnDefinitions>
            <!--ColumnDefinition 每一个列可以设置宽度,宽度可以是一个具体指,也可以设置*,*的意思是将剩余的宽度按照比例进行平分-->
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
<!--二. Grid.RowDefinitions自定义行 可以设置高度 不能设置宽度-->
        <Grid.RowDefinitions>
            <RowDefinition Height ="100"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

<!--三. 使用网格布局Grid.Row="1" Grid.Column="0"  第二行第一列-->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="我是一个文本流"></TextBlock>
</Grid>
相关推荐
Wect1 小时前
LeetCode 39. 组合总和:DFS回溯解法详解
前端·算法·typescript
Wect1 小时前
LeetCode 46. 全排列:深度解析+代码拆解
前端·算法·typescript
IT_陈寒1 小时前
Vite 凭什么比 Webpack 快50%?揭秘闪电构建背后的黑科技
前端·人工智能·后端
hi大雄1 小时前
我的 2025 —— 名为《开始的勇气》🌱
前端·年终总结
从文处安2 小时前
「前端何去何从」一直写 Vue ,为何要在 AI 时代去学 React?
前端·react.js
aircrushin2 小时前
OpenClaw“养龙虾”现象的社会技术学分析
前端·后端
明君879972 小时前
#Flutter 的官方Skills技能库
前端·flutter
yuki_uix2 小时前
重新认识 React Hooks:从会用到理解设计
前端·react.js
林太白2 小时前
ref和reactive对比终于学会了
前端
Apifox2 小时前
测试数据终于不用到处复制了,Apifox 自动化测试新增「共用测试数据」
前端·后端·测试