【转】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.RowGrid.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.ColumnSpanGrid.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();//¡§°?̨²tD

            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工具要注意以下几点

指定gridspliterHorizontalAlignmentVerticalAlignment属性可以设置分割条拖动方向为垂直或水平拉动。

通常建议把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">¨ªT1</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,一经查实,立即删除!

相关文章

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

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

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

在这一节的讲解中&#xff0c;我将为大家介绍WPF装饰控件的用法&#xff0c;主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollViewer滚动条控件 大家知道在WPF中的一些布局控件中是不带滚动条的&#xff0c;如果里面…

windeployqt.exe的使用与避坑(windows平台)

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

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

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

【转】在WPF中自定义控件

周银辉的开发博客(WPF) 在WPF中自定义控件(1) 一, 不一定需要自定义控件 在使用WPF以前,动辄使用自定义控件几乎成了惯性思维,比如需要一个带图片的按钮,但在WPF中此类任务却不需要如此大费周章,因为控件可以嵌套使用以及可以为控件外观打造一套新的样式就可以了.是否需要我们…

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

前言 命令行在项目开发中使用频率很高&#xff0c;在指定目录中打开命令行也是很常见的需求&#xff0c;本文将介绍几种快速在指定目录打开cmd.exe命令行的方法&#xff0c;提高效率。 普通方式 运行->输入cmd.exe&#xff0c;点击确定&#xff0c;打开cmd.exe。 在cmd.…

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

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

【转】github中origin和upstream的区别

Fork&#xff0c;本身并不是git工具中的一个命令&#xff0c;也不是对git的扩展&#xff0c;它是在GitHub上的概念&#xff0c;是另一种clone方式——在服务器端的clone。 而我们通常意义上的clone&#xff0c;是将远程repo 复制一份到本地。 当你从GitHub上 clone 一个 repo …

【转】WPF入门教程系列六——布局介绍与Canvas(一)

从这篇文章开始&#xff0c;我们将对WPF中的界面如何布局做一个较简单的介绍&#xff0c;大家都知道&#xff1a;UI是做好一个软件很重要的因素&#xff0c;如果没有一个漂亮的UI&#xff0c;功能做的再好也无法吸引用户使用&#xff0c;而且没有漂亮的界面&#xff0c;那么普通…

【OSG学习】学习方法

1. 环境准备 运行调试环境的准备参考我的另外一篇博客&#xff1a;【OSG学习】准备开发调试环境 运行调试环境准备比较麻烦&#xff0c;但是不复杂&#xff0c;需要耐心。但是可能很多人会被卡在这一步&#xff0c;后面我会专门提供直接可以使用的完整项目&#xff0c;方便大…

【转】Vue.js入门教程(二)在页面中引入vue的方式

第二章&#xff1a;安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法&#xff0c;所以我们不一定需要通过npm工程化进行安装&#xff0c;你直接用script在页面中引用也完全没有问题。 第一种引入方式&#xff0c;script直接引入&#xf…

【OSG】Examples

推荐内容 关于示例项目解析的内容推荐&#xff1a; OSG3.4内置Examples解析【目录】 下面是个人学习笔记。 1. Examples osgbillboard 这个项目很简单&#xff0c;就几个函数&#xff0c;而且很有意思。 osg::Billboard类是一个控制器&#xff0c;不管你怎么旋转漫游场景&a…

【转】页(page),用户控件(userControl),窗口(window)区别

欢迎加入BIM行业开发交流1群 群号:711844216 背景 大家在vs中新建wpf项目后&#xff0c;会发现在添加新建项时会出现下列三个选项 它们有什么区别呢&#xff1f; 区别&#xff1a; 页&#xff1a;通常用于网页窗口&#xff1a;通常一个桌面app只有一个主窗口用户控件&#…

OpenGL基本运行模型

OpenGL是一种三维技术规范。 我们知道三维渲染场景需要实时计算大量数据。 这里我根据自己的经验总结出一句话&#xff1a; 计算机中&#xff0c;对性能要求高的功能模块&#xff0c;其运行原理必然是简单易行的&#xff01; 有理由断言&#xff1a;OpenGL没那么难。 OpenGL工…

【转】浅谈TDD、BDD、ATDD、DDD的区别

四个开发模式意思: TDD&#xff1a;测试驱动开发&#xff08;Test-Driven Development&#xff09;BDD&#xff1a;行为驱动开发&#xff08;Behavior Driven Development&#xff09;ATDD&#xff1a;验收测试驱动开发&#xff08;Acceptance Test Driven Development&#x…

【OSG】OSG运行模型

关于运行模型 OSG中的类很多&#xff0c;只看OSG代码&#xff0c;很难把各个类串联起来。 我们知道面向对象程序的运行模型是&#xff1a;对象对象间协作。 单纯看代码&#xff0c;多数情形下&#xff0c;只能了解程序中有哪些对象&#xff0c;而不知道它们是如何协作的&…

用姓名字段统计人数_基于 Wide amp; Deep 网络和 TextCNN 的敏感字段识别

数据治理 (Data Governance) [1]作为一种数据管理的重要一环&#xff0c;主要目的在于保证数据在整个生命周期内的高质量性。数据治理的核心包括&#xff1a;数据的可用性 (Availability)&#xff0c;易用性 (Usability)&#xff0c;一致性 (Consistency)&#xff0c;完整性 (I…

【转】C# Stream篇(—) -- Stream基类

目录&#xff1a; 什么是Stream? 什么是字节序列&#xff1f; Stream的构造函数 Stream的重要属性及方法 Stream的示例 Stream异步读写 Stream 和其子类的类图 本章总结 什么是Stream? MSDN 中的解释太简洁了: 提供字节序列的一般视图 &#xff08;我可不想这么理解…

【已解决】解决Win7安装VS2013/VS2015结束时报错“无法建立到信任根颁发机构的证书链”的问题

问题描述 最近在Win7虚拟机上上安装VS&#xff0c;等待许久之后&#xff0c;提示安装完成。但是完成界面报错&#xff1a; “无法建立到信任根颁发机构的证书链”。 而且错误还不少&#xff0c;如下图所示&#xff1a; 根据我的个人经验&#xff0c;证书问题并没有影响日常开…

【转】C# Stream篇(二)TextReader 和StreamReader

目录&#xff1a; 为什么要介绍 TextReader&#xff1f; TextReader的常用属性和方法 TextReader 示例 从StreamReader想到多态 简单介绍下Encoding 编码 StreamReader 的定义及作用 StreamReader 类的常用方法属性 StreamReader示例 本章总结 为什么要介绍 TextReade…