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

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的朋友有所帮助，欢迎大家提出自己的宝贵意见。

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ios开发问题汇总（一）

ios开发问题汇总（一）

教程汇总 IOS比较好的网络教程&#xff1a;IOS编程浅蓝教程IOS编程教程&#xff08;五&#xff09;自定义UITableView的表单元格菜鸟教程-iOS教程 开发问题 实现页面切换&#xff0c;网上某些文章写的是&#xff1a; [self.navigationController performSegueWithIdentifie…
阅读更多...
oracle 建分区索引_Oracle分区表及分区索引-创建list分区

oracle 建分区索引_Oracle分区表及分区索引-创建list分区

Oracle分区表及分区索引-创建list分区创建list分区的语法如上&#xff0c;需要我们指定的:lcolumn:分区依赖列(注意&#xff1a;只能是一个);lpartition:分区名称;lliteral:分区对应值(注意&#xff1a;每个分区可以对应多个值);l tablespace_clause:分区的存储属性&#xff0c…
阅读更多...
【转】WPF从我炫系列3---内容控件的用法

【转】WPF从我炫系列3---内容控件的用法

今天我来给大家讲解WPF中内容控件的用法&#xff0c;在WPF中的内容控件&#xff0c;通俗的讲&#xff0c;是指具有Content属性的控件&#xff0c;在content属性里面可以嵌套放置任意其他类型的控件&#xff0c;但是Content只能接受单个元素&#xff0c;可以通过布局控件来组合放…
阅读更多...
【iOS开发】添加评分功能

【iOS开发】添加评分功能

问题 openURL无法跳转到App store 报错 &#xff1a;Failed to open URL itms://itunes.apple.com/us/app/apple-store/idxxxxx 使用canOpenURL时&#xff0c;打印出了错误原因&#xff1a;error: “This app is not allowed to query for scheme itms”&#xff0c;显然是配置…
阅读更多...
android 键盘遮盖输入框_Android各种键盘挡住输入框解决办法

android 键盘遮盖输入框_Android各种键盘挡住输入框解决办法

原标题&#xff1a;Android各种键盘挡住输入框解决办法今日科技快讯C919大型客机首飞成功&#xff0c;让很多人激动不已。然而近日网上也出现了一些不同的声音&#xff1a;说这架飞机许多部件都是进口货&#xff0c;甚至有人说C919中国人只是造了个壳子。对此&#xff0c;业内人…
阅读更多...
【转】WPF从我炫系列4---装饰控件的用法

【转】WPF从我炫系列4---装饰控件的用法

在这一节的讲解中&#xff0c;我将为大家介绍WPF装饰控件的用法&#xff0c;主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollViewer滚动条控件 大家知道在WPF中的一些布局控件中是不带滚动条的&#xff0c;如果里面…
阅读更多...
windeployqt.exe的使用与避坑（windows平台）

windeployqt.exe的使用与避坑（windows平台）

1. 介绍 windeployqt.exe是Qt自带的工具&#xff0c;用于创建应用程序发布包。 简单来说&#xff0c;这个工具可以自动地将某程序依赖的库、资源拷贝到其所在目录&#xff0c;防止程序在其他电脑上运行报找不到库的错误。 这里贴上官方文档&#xff1a;https://doc.qt.io/qt-5…
阅读更多...
【转】WPF从我炫系统5---基本控件的用法

【转】WPF从我炫系统5---基本控件的用法

今天我来给大家讲解WPF中一些基本控件的用法&#xff0c;所谓基本控件&#xff0c;就是我们最常用用到的一些控件&#xff0c;通过这一节的讲解&#xff0c;大家会对WPF中的控件的用法有一个更深入的了解。 1. 基本控件 LABEL控件 Label控件是我们最熟悉的控件&#x…
阅读更多...
android自定义push通知_Android自定义Notification的一些坑

android自定义push通知_Android自定义Notification的一些坑

第一次在简书发文章&#xff0c;有问题多指教本篇介绍自定义通知样式时会遇到的一些坑,本篇旨在记录坑,而不在全面讲解自定义的方法坑文字颜色:强烈使用系统定义的文字颜色,否则需要固定背景色自定义View的尺寸: 建议自适应&#xff0c;因为不同系统高度会有差别不同系统版本的…
阅读更多...
【微软官方文档】应用程序错误处理

【微软官方文档】应用程序错误处理

https://docs.microsoft.com/zh-cn/windows/win32/debugging-and-error-handling
阅读更多...
【转】在WPF中自定义控件

【转】在WPF中自定义控件

周银辉的开发博客(WPF) 在WPF中自定义控件(1) 一, 不一定需要自定义控件 在使用WPF以前,动辄使用自定义控件几乎成了惯性思维,比如需要一个带图片的按钮,但在WPF中此类任务却不需要如此大费周章,因为控件可以嵌套使用以及可以为控件外观打造一套新的样式就可以了.是否需要我们…
阅读更多...
二叉树前序中序后序javascript_JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】...

二叉树前序中序后序javascript_JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】...

本文实例讲述了JavaScript数据结构与算法之二叉树遍历算法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;javascript数据结构与算法--二叉树遍历(先序)先序遍历先访问根节点&#xff0c; 然后以同样方式访问左子树和右子树代码如下&#xff1a;/**二叉树中&#xff0…
阅读更多...
Windows上快速在指定目录打开cmd.exe命令行的方法

Windows上快速在指定目录打开cmd.exe命令行的方法

前言 命令行在项目开发中使用频率很高&#xff0c;在指定目录中打开命令行也是很常见的需求&#xff0c;本文将介绍几种快速在指定目录打开cmd.exe命令行的方法&#xff0c;提高效率。 普通方式 运行->输入cmd.exe&#xff0c;点击确定&#xff0c;打开cmd.exe。 在cmd.…
阅读更多...
【转】WPF默认控件模板的获取和资源词典的使用

【转】WPF默认控件模板的获取和资源词典的使用

一、获取默认的控件模板 WPF修改控件模板是修改外观最方便的方式&#xff0c;但是会出现不知道原来的控件的模板长什么样&#xff0c;或者如何在原有控件模板上修改的&#xff0c;下面就分享了获取某控件默认控件模板的方法&#xff08;以控件Button为例&#xff09;&#xff…
阅读更多...
python设置默认密码_使用Python生成随机密码的示例分享

python设置默认密码_使用Python生成随机密码的示例分享

生成随机密码这件事情用python来干确实相当的方便&#xff0c;优美的string方法加上choice简直是绝配make_password.py###简单几行代码执行即可生成记不住的字符串###$ python make_passwd.pyDLrw9EiTQs4Wm84qRQwl4L2Lu9g0LgwWjHPtYdyU...$ python make_passwd.pyDLrw9EiTQs4Wm…
阅读更多...
【微软官方文档】Windows终端（Windows Terminal）

【微软官方文档】Windows终端（Windows Terminal）

https://docs.microsoft.com/zh-cn/windows/terminal/
阅读更多...
【转】WPF Expander 收缩不占空间的用法

【转】WPF Expander 收缩不占空间的用法

WPF 中 Expander 的&#xff0c;默认折叠状态&#xff0c;只是把内容隐藏&#xff0c;实际是还是占有空间的。按照下面的做法&#xff0c;可以是下面的控件&#xff0c;位置移动。 <StackPanel > <Expander Name"a" Header"xxxx">…
阅读更多...
多级队列调度算法可视化界面_C++实现操作系统调度算法（FSFS，SJF，RR，多级反馈队列算法）...

多级队列调度算法可视化界面_C++实现操作系统调度算法（FSFS，SJF，RR，多级反馈队列算法）...

#include#include#include#includeusing namespace std;unsigned int q_id0; //用于队列进程号的全局变量unsigned int l_id0; //用于链表进程号的全局变量unsigned int stime0; //系统时间&#xff0c;开始为0struct Pro //调度进程的数据结构{unsigned int PID; //进程标志号…
阅读更多...
【iOS开发】崩溃问题汇总

【iOS开发】崩溃问题汇总

EXC_BAD_ACCESS崩溃 位置&#xff1a;在UIApplicationMain函数内崩溃&#xff0c;相关函数&#xff1a;objc_release&#xff0c;场景&#xff1a;在界面多次切换时崩溃&#xff0c;可以稳定复现&#xff0c;环境&#xff1a;启用了ARC。 原因可能有很多种&#xff0c;我的是…
阅读更多...
【转】WPF之路-常用布局控件一

【转】WPF之路-常用布局控件一

WPF布局原则 不应显式设置大小 为了布局的稳定性&#xff0c;控件的大小应该可以自动适应容器。如下为新建一个窗体&#xff0c;默认包含一个Grid容器&#xff0c;该控件没有显式设置宽高&#xff0c;所以&#xff0c;在改变窗体大小的时候&#xff0c;该容器的大小也随着变化…
阅读更多...
最新文章

Copyright @ 2022~2023