WPF布局控件之Grid布局

最新推荐文章于 2024-08-05 15:06:28 发布
最新推荐文章于 2024-08-05 15:06:28 发布
阅读量3.9k 收藏 19
点赞数 1
文章标签： wpf c# .net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36819973/article/details/127797476
版权

文章目录

前言

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

概述：本文简要介绍了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： Grid.RowDefinitions/Grid.ColumnDefinitions属性演示

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

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
    </Grid>

效果图如下：

在这里插入图片描述

代码如下（两列）

   <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>

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

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

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

效果图如下：

在这里插入图片描述

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

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

    </Grid>

** 效果如下图**

在这里插入图片描述

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

 <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <!--第一列固定宽度-->
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

    </Grid>

效果图如下：

在这里插入图片描述

代码如下(第一列宽度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>

效果图如下：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>
        <!--不设置值，默认Grid.Column/Grid.Row 都是0-->
        <Button Width="300">张三</Button>
    </Grid>

效果图如下

在这里插入图片描述

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

    <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.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>

效果图如下

在这里插入图片描述

代码如下(跨两列)

    <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>

效果图如下

在这里插入图片描述

总结

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

落笔生花_花
关注
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
三、深入浅出WPF之控件与布局
程序员ken的博客
07-27 1288
很多编程都要自己的GUI工具：像java的Swing、c++的QT 、C#的winform等等.包含控件有：Grid 、StackPanel、DockPanel、WrapPanel、Canvas等等。特点：均派生于**System.Windows.Controls.ContentControl **包含控件有：ComboBox、Menu、TabControl、ToolBar、ListBox等等。包含控件有：Button 、Label、Frame、GroupItem、CheckBox等等。
C# WPF入门学习主线篇（十六）—— Grid布局容器
weixin_56595425的博客
06-09 1923
在《C# WPF入门学习主线篇（十六）—— Grid布局容器》这篇文章中，我们详细介绍了WPF中的 `Grid` 布局容器。本文涵盖了 `Grid` 的基本概念、常见属性及使用方法，并通过具体的示例代码展示了如何实现复杂且灵活的用户界面布局。此外，还讨论了 `Grid` 布局容器的优缺点，帮助读者在实际开发中做出更好的布局选择。
wpf Grid布局
01-04
wpf Grid布局 简单介绍Grid布局控件的基本属性
WPF篇（1）-Grid控件（网格布局）
最新发布
一个人的江湖
08-05 608
Grid控件绝对是WPF中所有布局控件中最好用的一个，因为它自适应屏幕的宽度，最关键的一点是，它在呈现时，其ActualWidth实际宽度和ActualHeight实际高度会有一个计算值，我们在业务开发中，有时候要根据父控件的实际宽度和高度来计算子控件的呈现位置和大小。
使用Grid来对WPF页面进行布局排版
蝈蝈俊.net
08-17 8785
       对于以前用 Windows Form 来开发客户端程序的程序员，在使用 WPF 开发客户端的程序时，在窗体布局上将是他必须面对的一个坎。       布局产生困惑的一个典型场景如下：       我们在开发WPF窗体时候，我们会发现，当我们把菜单控件(Menu)、工具条（ToolBar、ToolBarPanel）、状态条（StatusBar）这些最常见的页面元素拖动到WPF窗
WPF Grid布局
weixin_33842328的博客
09-07 159
本节讲述布局，顺带加点样式给大家看看~单纯学布局，肯定是枯燥的~哈哈 那如上界面，该如何设计呢？ 1、一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等。如上这种布局，在子元素数量未知的情况下，我们应该使用WrapPanel或者StackPanel来布局，子元素会自己换行。 2、然后每一行的元素中，第一个要居左，第...
WPF(Grid与布局）
weixin_34185512的博客
04-03 117
<Window x:Class="TestOfGridLayout.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Ti...
WPF入门2：Grid网格布局
黄瓜炒鸡蛋的博客
02-16 2191
WPF入门2：Grid网格布局
WPF布局、控件、事件、绑定、MVVM基础入门
03-26
**WPF布局** Windows Presentation Foundation (WPF) 是微软推出的一种强大的用户界面框架，用于构建桌面应用程序。在WPF中，布局系统是构建用户界面的基础，它负责自动管理控件的位置和大小，以适应不同的屏幕尺寸...
wpf 布局控件 StackPanel DockPanel WrapPanel UniformGrid Canvas I
07-04
wpf 布局控件demo Grid StackPanel DockPanel WrapPanel UniformGrid Canvas InkCanvas Border
WPF经典教程之Grid、UniformGrid布局
10-05
Grid UniformGrid容器 一、Grid Grid是以表格形式组织控件的一种布局方式，与Java AWT中的GridLayout类似，但区别在于..... 更多WPF资源：http://cleopard.download.csdn.net/
WPF的ListView控件自定义布局用法实例
09-02
在WPF中，ListView控件是一个非常常用的组件，它用于展示数据集合，并提供了多种布局方式。自定义布局允许开发者根据需求灵活设计ListView显示的内容和样式。本实例将深入讲解如何在WPF中自定义ListView控件的布局。...
WPF---Grid布局讲解
weixin_41883890的博客
08-04 1976
清单 4 中的以下代码片段创建一个 TextBlock 控件并将其显示在代表 Grid 的第一行和第一列的 Cell(0,0) 中。WPF 中的任何控件都可以使用其 Grid.Row 和 Grid.Column 属性放置在网格中，这些属性表示控件将放置在哪一列和哪一行。以下代码片段创建了一个 Grid 控件，设置它的宽度、水平对齐、垂直对齐并显示网格线并设置背景颜色。下面的代码片段创建一个 Grid 控件，设置它的宽度和前景色，并确保网格线可见。要将图像设置为网格的背景，我们可以将图像设置为网格的背景。..
WPFGrid布局
weixin_43826111的博客
04-18 301
WPF中Grid布局XMAl<Grid Width="200" Height="100" ><Windowx:Class="wpfyonghukongjian.login" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sch...
WPF:(三) Grid布局
weixin_44870681的博客
06-24 749
一：Grid Grid面板也许是最复杂的面板类型了。Grip可以包含多行多列。你可以定义每一行的高度和每一列的宽度，通过一个像素值、可用空间的百分比或者自动分配这三种方式。自动分配会根据内容自动调整行高和列宽。Grip一般用于其他面板无法实现的情形，譬如如你需要很多列而且需要联合其他面板。 在Grid中的所有控件都会被最大化，同时一个叠一个放置。这是Grid最基本的形式。 <Window x...
wpf:Grid 布局
热门推荐
张海涛
07-10 2万+
今天新学习了一下wpfBroserApplication中的Grid布局：虽然比起ASP.NET有点麻烦，但是挺容易理解的，下面我就分享一下
WPF语言中Grid布局
jiangqingzhihe的博客
07-08 1万+
WPF语言中Grid布局 一、什么是布局？这是一个非常简单的问题，简单来说就是把一些控件有条理的放在你想放的地方，就是把控件放在界面上合适的位置，让人看的不是乱七八糟的布局 二、WPF的布局控件有很多，不过我们常用的布局控件就有五个 1、Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似...
WPF —— Grid网格布局
一个新人博客，愿多多支持。
03-14 1252
Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值