wpf从我炫系列2----布局控件的使用(下)

最新推荐文章于 2021-06-22 11:51:17 发布
最新推荐文章于 2021-06-22 11:51:17 发布
阅读量4.3k 收藏 3
点赞数 1
分类专栏： WPF 文章标签： wpf textbox button class winform 网格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx13525079024/article/details/5682138
版权

4.        GRID控件

Grid控件可以是说是wpf中功能最强大和使用最多的控件。它有点类似于HMTL网页布局中的表格，可以自定义行列显示，并可以合并某些行和列.

使用<Grid.RowDefinitions>可以定义GRID中的行数，

使用<Grid.ColumnDefinitions>可以定义Grid中的列数

GRID控件的ShowGridLines="True"属性可以控制在运行时是否显示网格

下面定义了一个三行两列的网格，效果图如下

 

 

代码

<Window x:Class="WpfPanel.GridPanelOne"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="GridPanelOne" Height="300" Width="300">

    <Grid ShowGridLines="True">

        <Grid.RowDefinitions>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

      

       

    </Grid>

</Window>

 

用户可以自定义行列的尺寸，包括行列的宽高，缩放比例.用三种定义方法。

绝对尺寸：使用精确的设备无关单位的大小，指定一个精确的数字来指定宽高。

自动内容尺寸：这种设置方法根据每个单元格里面的内容而自动设定，通常用AUTO来进行设置

按比例分配剩余空间:这个是默认设置，有点类似于HTML表格中的百分比形式，通常使用*星号，来分配剩余空间.

使用Grid.Row和Grid.Column可以定义控件所在的行和列，GRID控件中行列索引默认都是从0开始的

效果图

 

 

代码

<Window x:Class="WpfPanel.GridPanelOne"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="GridPanelOne" Height="300" Width="300">

    <Grid ShowGridLines="True">

        <Grid.RowDefinitions>

            <RowDefinition Height="54*" ></RowDefinition>

            <RowDefinition Height="120*"></RowDefinition>

            <RowDefinition Height="87*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

          

        </Grid.ColumnDefinitions>

        <Label Content="姓?名?" Name="label1"  />

        <Label Content="年¨º龄¢?" Grid.Row="1"  Name="label2"/>

        <Label Content="地Ì?址¡¤" Grid.Row="2"  Name="label3" />

        <TextBox Grid.Column="1" Height="23" Name="textBox1" Text="张?三¨y" />

        <TextBox Grid.Column="1" Height="23" Name="textBox2"  Grid.Row="1"  Text="24"/>

        <TextBox Grid.Column="1" Height="23" Name="textBox3"  Grid.Row="2" Text="北À¡À京?市ºD海¡ê淀̨ª区?清?华a大䨮学¡ì南?门?成¨¦府?路¡¤" />

    </Grid>

</Window>

 

用户也可以使用Grid.ColumnSpan和Grid.RowSpan=""来合并多行或者多列，设计自定义的布局显示方式。

效果图

 

代码

<Window x:Class="WpfPanel.GridPanelOne"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="GridPanelOne" Height="300" Width="300">

    <Grid ShowGridLines="False">

        <Grid.RowDefinitions>

            <RowDefinition Height="54*" ></RowDefinition>

            <RowDefinition Height="120*"></RowDefinition>

            <RowDefinition Height="7"></RowDefinition>

            <RowDefinition Height="40"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

          

        </Grid.ColumnDefinitions>

        <Label Content="姓?名?" Name="label1"  />

        <Label Content="年¨º龄¢?" Grid.Row="1"  Name="label2"/>

        <Label Content="地Ì?址¡¤" Grid.Row="3"  Name="label3" />

        <TextBox Grid.Column="1" Height="23" Name="textBox1" Text="张?三¨y"  />

        <TextBox Grid.Column="1" Height="23" Name="textBox2"  Grid.Row="1"  Text="24"/>

        <TextBox Grid.Column="1" Height="23" Name="textBox3"  Grid.Row="3" Text="北À¡À京?市ºD海¡ê淀̨ª区?清?华a大䨮学¡ì南?门?成¨¦府?路¡¤" />

        <Rectangle Fill="Black" Grid.Row="2" Grid.ColumnSpan="2"></Rectangle>

    </Grid>

</Window>

 

以编程方式创建GRID

前面我们创建的GRID控件，都是以XAML标记代码实现的，现在我们在后台以编程方式来创建一个GRID。

我们来创建一个两行两列的GRID,代码如下

  public partial class Grid2 : Window

    {

        public Grid2()

        {

            InitializeComponent();

            this.Content = CreateGrid();

        }

        //创ä¡ä建¡§一°?个?两¢?行D两¢?列¢D的Ì?GRID

        public Grid CreateGrid()

        {

            Grid grid = new Grid();//实º¦Ì例¤y化¡¥一°?个?GRID对?象¨®

            grid.ShowGridLines = true;

            RowDefinition rowOne = new RowDefinition();//定¡§义°?第̨²一°?行D

            rowOne.Height = new GridLength(1, GridUnitType.Star);//设¦¨¨置?第̨²一°?行D的Ì?高?度¨¨，ê?并¡é以°?*设¦¨¨置?高?度¨¨尺?寸ä?方¤?式º?

            grid.RowDefinitions.Add(rowOne);

 

            RowDefinition rowTwo = new RowDefinition();//定¡§义°?第̨²二t行D

            rowTwo.Height = GridLength.Auto;

            grid.RowDefinitions.Add(rowTwo);

 

            ColumnDefinition colOne = new ColumnDefinition();

            colOne.Width = GridLength.Auto;

            grid.ColumnDefinitions.Add(colOne);

 

            ColumnDefinition colTwo = new ColumnDefinition();

            colTwo.Width = new GridLength(230);

            grid.ColumnDefinitions.Add(colTwo);

 

            Label lbname = new Label();

            lbname.Content = "姓?名?";

            Grid.SetRow(lbname, 0);

            Grid.SetColumn(lbname, 0);

            grid.Children.Add(lbname);

 

            Label lbAddress = new Label();

            lbAddress.Content = "地Ì?址¡¤";

            Grid.SetRow(lbAddress, 1);

            Grid.SetColumn(lbAddress, 0);

            grid.Children.Add(lbAddress);

 

            TextBox tbName = new TextBox();

            tbName.Text = "张?三¨y";

            tbName.Width = 150;

            Grid.SetRow(tbName, 0);

            Grid.SetColumn(tbName, 1);

            grid.Children.Add(tbName);

 

            TextBox tbAddress = new TextBox();

            tbAddress.Text = "北À¡À京?市ºD海¡ê淀̨ª区?";

            tbAddress.Width = 200;

            Grid.SetColumn(tbAddress, 1);

            Grid.SetRow(tbAddress, 1);

            grid.Children.Add(tbAddress);

 

 

               

            return grid;

 

       

        }

    }

 

窗体分割

在grid中，可以使用窗体分割条工具GridSpliter工具来手动调整GRID中行和列的大小.使用GRIDSPLITER工具要注意以下几点

指定gridspliter的HorizontalAlignment和VerticalAlignment属性可以设置分割条拖动方向为垂直或水平拉动。

通常建议把GRIDSPLITER放在一个单独单元格中显示。

效果图

 

XMAL代码

<Window x:Class="WpfPanel.Grid3"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Grid3" Height="379" Width="419">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition></RowDefinition>

         

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Rectangle Fill="Beige"></Rectangle>

          <GridSplitter Background="AliceBlue" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Height="8" Grid.ColumnSpan="3"></GridSplitter>

            <Rectangle Fill="Black" Grid.Row="2"></Rectangle>

        <Rectangle Fill="BlueViolet" Grid.Column="2"></Rectangle>

        <Rectangle Fill="DarkGreen" Grid.Row="2" Grid.Column="2"></Rectangle>

       

        <GridSplitter Background="Coral" Grid.Column="1" Width="8" HorizontalAlignment="Center" Grid.RowSpan="3"></GridSplitter>

    </Grid>

</Window>

 

共享尺寸组

  共享尺寸组就是让多个Grid具有一致的行列尺寸外观。

  使用Grid.IsSharedSizeScope属性可以为共享尺寸组设置一个共享范围。

  使用SharedSizeGroup可以为共享尺寸组指定一个名称。

  下面这个DEMO中，为第一个GRID中的矩形指定一个宽高，第二个GRID中的矩形不指定宽高，通过设置一个共享尺寸组来使两个GRID中的行列相同.

效果图

 

 

代码

 

XMAL代码

<Window x:Class="WpfPanel.Grid4"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Grid4" Height="380" Width="463">

    <DockPanel  Name="dockPanel1" Grid.IsSharedSizeScope="False">

        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

            <Button Content="设¦¨¨置?共2享¨ª尺?寸ä?组Á¨¦" Height="23" Name="button1" Click="button1_Click" />

            <Button Content="取¨?消?共2享¨ª尺?寸ä?组Á¨¦" Height="23" Name="button2" Click="button2_Click" />

        </StackPanel>

        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

            <Grid Margin="10">

                <Grid.RowDefinitions>

                    <RowDefinition SharedSizeGroup="firstrow"></RowDefinition>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition SharedSizeGroup="fisrtColumn"></ColumnDefinition>

                    <ColumnDefinition SharedSizeGroup="secondColumn"></ColumnDefinition>

                </Grid.ColumnDefinitions>

                <Rectangle Fill="Beige"  Width="70" Height="50">

                   

                </Rectangle>

                <Rectangle Fill="Azure" Grid.Column="1"  Width="70" Height="50"></Rectangle>

            </Grid>

           

            <Grid Margin="20">

                <Grid.RowDefinitions>

                    <RowDefinition SharedSizeGroup="firstrow"></RowDefinition>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition SharedSizeGroup="fisrtColumn"></ColumnDefinition>

                    <ColumnDefinition SharedSizeGroup="secondColumn"></ColumnDefinition>

                </Grid.ColumnDefinitions>

                <Rectangle Fill="Red"  ></Rectangle>

                <Rectangle Fill="Crimson" Grid.Column="1" ></Rectangle>

            </Grid>

        </StackPanel>

       

    </DockPanel>

</Window>

 

后台xmal.cs代码

private void button1_Click(object sender, RoutedEventArgs e)

        {

            //设¦¨¨置?共2享¨ª尺?寸ä?组Á¨¦

            Grid.SetIsSharedSizeScope(dockPanel1, true);

        }

 

        private void button2_Click(object sender, RoutedEventArgs e)

        {

            //取¨?消?共2享¨ª尺?寸ä?组Á¨¦设¦¨¨置?

            Grid.SetIsSharedSizeScope(dockPanel1, false);

        }

 

5.       UniformGrid均布网格

UniformGrid控件是一个标准的表格控件，可以说是一个简化的GRID控件，其中所有的单元格都有相同的尺寸，只要设置行数和列数即可.通过设置Rows和 Columns属性可以设置行数和列数.

 

效果图

UniformGrid

代码

<Window x:Class="WpfPanel.UniformPanel"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="UniformPanel" Height="300" Width="300">

    <UniformGrid Rows="3" Columns="2">

        <Label Background="Aqua">中D国¨²</Label>

        <Label Background="Azure">美¨¤国¨²</Label>

        <Label Background="Brown">俄¨ª罗T斯1</Label>

        <Label Background="Cyan">日¨?本À?</Label>

    </UniformGrid>

</Window>

6.Canvas面板

  Canvas画布面板，可以控制其内部元素的精确定位，类似于传统WINFORM的布局方式，可以使用像素单位来精确布局，在其布局元素可以任意拖动元素来设置元素位置。

可以通过设置Canvas.Left, Canvas.Top, Canvas.Bottom,Canvas.Right属性来具体设置元素的位置。

效果图

canvas

代码

<Window x:Class="WpfPanel.CanvasPanel"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="CanvasPanel" Height="251" Width="268">

    <Canvas  Name="canvas1">

        <Label Canvas.Left="12" Canvas.Top="27" Content="姓?名?:" Height="28" Name="label1" />

        <TextBox Canvas.Left="72" Canvas.Top="27" Height="23" Name="textBox1" Width="157" />

        <Label Canvas.Left="12" Canvas.Top="79" Content="年¨º龄¢?" Height="28" Name="label2" />

        <TextBox Canvas.Left="72" Canvas.Top="79" Height="23" Name="textBox2" Width="157" />

    </Canvas>

</Window>

 

如果Canvas内部的元素位于同一个坐标点，将会出现重叠现象，可以通过设置Canvas.Zindex属性，来指定Z轴的排列顺序。元素的Canvas.Zindex值越大，显示的位置越靠前.

 

关于WPF中布局面板的简单使用，就写到这里，希望这对学习WPF的朋友有所帮助，欢迎大家提出自己的宝贵意见。

 

游响云停
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wpf 中借助 Grid 实现随着 Form 大小变化而按比例自动改变宽度或高度。
weixin_30836759的博客
07-21 857
<DockPanel> <Grid DockPanel.Dock="Bottom" VerticalAlignment="Bottom" Height="280"> <Grid.RowDefinitions> <RowDefinition Height="30"/>...
【转】WPF从我炫系列3---内容控件的用法
sinolover的专栏
12-22 262
今天我来给大家讲解WPF中内容控件的用法，在WPF中的内容控件，通俗的讲，是指具有Content属性的控件，在content属性里面可以嵌套放置任意其他类型的控件，但是Content只能接受单个元素，可以通过布局控件来组合放置多个元素。它继承System.Windows.Controls.ContentControl这个类。 WPF中的内容控件大致可以分为4类： 1.直接派生自ContentControl控件 在WPF控件库中，大多数控件都是这种类型的控件.,例如BUTTON,按钮，列表...
WPF超炫效果
04-15
Follow The Pointer 是开发WPF 动画的比较好的实例，通过了解其代码，你可以轻松构建属于你自己的WPF 动画
WPF超炫效果（附源码）
11-03
WPF实现超酷效果，动态图片，3D效果，树形结构，动态列表等等。包含实现源码！实现过程比较简单，适合学习WPF
WPF Grid容器的共享尺寸
卓尔的专栏
06-22 664
在父级Grid下，包含两个grid，两个子grid的列数不同，通常会造成两个grid的列不对齐。如果希望某几列对齐，则可以使用“共享尺寸”，方法如下： <Grid Grid.IsSharedSizeScope="True"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.Row
XF Grid使用-两行两列-跟WPF不同
weixin_30617695的博客
08-05 183
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" ...
通用WPF主题控件包rubyer-wpf-master
最新发布
12-20
此外，rubyer-wpf-master还添加了部分控件的附加功能，这些功能可能包括但不限于：数据验证、自定义布局、拖放操作等。这些功能的增加使得开发人员能够更高效地实现特定的业务逻辑，而不必从头编写复杂的代码。 ...
Dot2WPF-用于查看点图的WPF控件
04-02
在提供的压缩包文件中，"Dot2WPF-A-WPF-Control-for-Viewing-Dot-Graphs.pdf"很可能是关于Dot2WPF的详细文档，包含了使用指南、API参考和示例代码。"dot2wpf_demo.zip"和"dot2wpf_src.zip"则是示例应用和源代码，...
WPF优秀项目及源码 wosk-94877
06-11
WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF优秀项目及源码 wosk-94877WPF...
[WPF]-表格控件-ReoGrid.zip
05-27
WPF提供了一套完整的图形呈现系统，包括2D和3D图形、动画、布局、文本渲染等，同时也提供了丰富的用户界面控件。 在WPF中，表格控件是非常常见且重要的组件，它允许开发者展示和操作二维数据。【ReoGrid】是一个...
WPF教程（二十九）Grid行和列
热门推荐
刺猬的优雅
10-29 1万+
上一章我们介绍了重要的Grid面板，还展示了一些如何使用它的例子。这一章我们来做一些更深入的研究，这正是Grid真正闪光的地方。首先，加入更多的行和列，实现一个真正的表格布局。<Window x:Class="WpfTutorialSamples.Panels.TabularGrid" xmlns="http://schemas.microsoft.com/winfx/2006/x
WPF 在画布中布局N行N列的实现方法
weixin_30568591的博客
08-03 452
最近写一个WPF项目，中间有一个实现在画布中排列的问题（整齐摆列几行几列的算法）。本人逻辑有点差啊，废了老大功夫才实现，也没啥就牛逼的，就是拿出来分享一下，给需要的同学节省点时间，如果有用的话别忘赞一下啊！^^，谢谢！代码如下： double BetwDistance = 0;//两个之间的间距 double LDistance = 100;//整体离左的距离...
WPF中的容器控件——UniformGrid
weixin_34419326的博客
10-26 766
uniformGrid行列相同，大小相同的grid。 转载于:https://www.cnblogs.com/dagedan/archive/2012/10/26/2741116.html
WPF入门教程系列八——布局之Grid与UniformGrid（三）
weixin_30755393的博客
09-23 174
五.Grid Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。Grid和其他各个Panel比较起来，功能最多也最为复杂。要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。而放置在Grid面板中的控件元素都...
DataGridViewButtonColumn
天马3798
01-14 7729
.Net的DataGridView控件中，提供了一种列的类型，叫 DataGridViewButtonColumn ，这种列类型是展示为一个 按钮，可以给button赋予相应的text，并且，此button可以用来做处理事件的判断依据。 在正式开始介绍使用方法之前，我们先要进行一个概念性的说明： DataGridViewButtonColumn，虽然在UI展现上，是一个BUTTON的样子，但是
使用WPF创建炫亮按钮
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
08-07 9929
1. 创建三个按钮(创建多个按钮的目的是作对比及样式演示)(1)打开Microsoft Expression Blend 2(我这里是August Preview版本，以下简称Blend)(2)File -> New Project,默认选中的是第一个:WPF Applications(.exe),进行相关设置后按OK,如图:(3)此时回到刚才创建位置C:/Books/ButtonDemos目录中
C语言实现AES ecb加解密
ning_IOT的博客
05-05 5053
先做个声明：该偏aesecb加解密的底层源码是在网上找到的，没有追到原始出处，原代码在Ubuntu上编译不通过，可能是编译环境不兼容的问题。所以我只是在原有实现的基础上做了部分修改及测试调用，现在已经在Ubuntu上测试通过，加密解密结果与在线测试工具对比正确。 网上关于aes加解密的代码一搜索会有很多结果，但很少有使用C语言实现的。所以把我找到的这一个测试可以的代码贴出来，给大家分享一下。一...
WPF 自定义grid spliter的 Style
farawayplace613的专栏
12-25 3082
WPF 自定义grid spliter的 Style: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
对称加密AES算法c语言实现
小小城御园的博客
12-01 4499
什么是对称加密：对称加密就是指，加密和解密使用同一个密钥的加密方式。 发送方使用密钥将明文数据加密成密文，然后发送出去，接收方收到密文后，使用同一个密钥将密文解密成明文读取。对称加密计算量小、速度块，适合对大量数据进行加密的场景。 常见的对称加密算法有DES、3DES和AES。 对称加密的缺点 密钥传输问题：如上所说，由于对称加密的加密和解密使用的是同一个密钥，所以对称加密的安全性就不仅仅...
WPF（2）---线程与定时器
05-26
2. DispatcherTimer 类：表示一个 WPF 程序的定时器，可以使用 Start 方法启动定时器，使用 Stop 方法停止定时器。 下面是一个使用多线程和定时器的示例代码： ```csharp public partial class MainWindow : ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值