WPF布局控件之Grid布局

文章目录

前言
- 概述：本文简要介绍了WPF中布局常用控件及布局相关的属性。先介绍Grid布局控件用法.
- 总揽概况
一、Grid
总结

前言

博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

概述：本文简要介绍了WPF中布局常用控件及布局相关的属性。先介绍Grid布局控件用法.

总揽概况

名称	说明
Grid	网格，根据自定义行和列来设置控件的布局
StackPanel	栈式面板，包含的元素在竖直或水平方向排成一条直线
WrapPanel	自动折行面板，包含的元素在排满一行后，自动换行
DockPanel	泊靠式面板，内部的元素可以选择泊靠方向
UniformGrid	网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
Canvas	画布，内部元素根据像素为单位绝对坐标进行定位
Border	装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

一、Grid

常用属性	说明
ShowGridLines	可以设置行业的边距线的显示（True/False）默认不False ,不显示
Grid. RowDefinitions	可以创建任意行, 进行固定高度与百分比高度设置
Grid. ColumnDefinitions	可以创建任意列, 进行固定宽度与百分宽度设置
Background	背景色
Grid.Column	内部元素放在第几列，默认从零开始数，不设置，默认第零列
Grid.Row	内部元素放在第几行，默认从零开始数，不设置，默认第零列
Grid.ColumnSpan	内部元素跨第几列
Grid.ColumnRow	内部元素跨第几行

1.1：ShowGridLines属性演示

代码如下:

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
    Grid>
1
2
3
4
5
6

效果图如下：
在这里插入图片描述

1.2： Grid.RowDefinitions/Grid.ColumnDefinitions属性演示

** 代码如下(两行)：**

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
    Grid>
1
2
3
4
5
6

效果图如下：

在这里插入图片描述

代码如下（两列）

   <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition>ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
    Grid>
1
2
3
4
5
6

效果图如下：
在这里插入图片描述

** 代码如下（两行两列）**

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition>ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
    Grid>
1
2
3
4
5
6
7
8
9
10

效果图如下：

在这里插入图片描述

** 代码如下(第一列宽度是第二列2倍) ) 行同理**

   <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*">ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>

    Grid>
1
2
3
4
5
6
7
8
9
10
11

** 效果如下图**

在这里插入图片描述

代码如下(第一列宽度固定值) 行同理

 <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition Width="50">ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>

    Grid>
1
2
3
4
5
6
7
8
9
10
11
12

效果图如下：

在这里插入图片描述

代码如下(第一列宽度Auto) 行列的大小会随着控件的大小变化而变化；

      <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition Width="auto">ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
        <Button Width="100">张三Button>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12

效果图如下：Button子控件宽度设置100像素

在这里插入图片描述

效果图如下：Button子控件宽度设置300像素

在这里插入图片描述

1.3：Grid.Column/Grid.Row属性演示

代码如下(默认不设置)

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition Width="auto">ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
        
        <Button Width="300">张三Button>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

在这里插入图片描述

** 代码如下(第二行第一列)**

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition>ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
        
        <Button Grid.Row="1" Width="300">张三Button>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

在这里插入图片描述

1.4：Grid.ColumnSpan/Grid.ColumnRow 属性演示

** 代码如下(跨两行)**

 <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition>ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
        
        <Button Grid.RowSpan="2" Width="300">张三Button>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

在这里插入图片描述

代码如下(跨两列)

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            
            <ColumnDefinition>ColumnDefinition>
            <ColumnDefinition>ColumnDefinition>
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition>RowDefinition>
        Grid.RowDefinitions>
        
        <Button Grid.ColumnSpan="2" Width="300">张三Button>
    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图如下

在这里插入图片描述

总结

Grid控件常用于界面表格网格的布局，Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。

相关阅读:
Python跨语言调用Java服务Rpc接口
 ReportLab创建合同PDF
SpringMVC的视图
 P2524 Uim的情人节礼物·其之弐 [洛谷]
计算机毕业设计springboot警务人员工作信息系统设计与实现s6ag7源码+系统+程序+lw文档+部署
 Vue3-ref函数、reactive函数的响应式
 C#WPF嵌入字体实例
 NLP工具——自制zero-shot事件抽取器
 垂直分表为什么能够加快查询效率？
MySQL-Linux安装、卸载：
原文地址：https://blog.csdn.net/qq_36819973/article/details/127797476