常见的几个布局面板

1.StackPanel面板

StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orientation属性控制。

Orientation属性:

  用户控制布局方向是垂直还是横向排列。分别有两个值可选:Vertical、Horizontal

示例代码:

    <StackPanel Orientation="Vertical">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
</StackPanel>

效果图(如上面所述 StackPanel面板Orientation属性默认为Vertical):

设置 Orientation="Horizontal" 时, 控件布局方向则为横向, 效果图。

默认情况下, StackPanel面板中的元素都会根据StackPanel的大小而改变, StackPanel面板指定了Width和Height值。

布局属性:

VerticalAlignment 当垂直方向有额外的空间, 可以选择Top、Center、Bottom、Stretch进行设置布局
HorizontalAlignment 当水平方向有额外的空间, 可以选择Center、Left、Right、Stretcj进行设置布局
Margin

相对控件的4个边、设置边距,可以单独设置各个边距,也可以统一设置一个边距

类似:Margin="1 2 3 4" 或 Margin="1"

【VerticalAlignment/HorizontalAlignment】属性:

为了能够看到效果, 通常预留控件额外的空间, 示例, 默认的StackPanel面板中添加几组按钮, 剩下的白色区域为额外的空间。

这个时候, 针对StackPanel面板设置VerticalAlignment属性为Center, 此时所有的子元素被居中显示,额外的空间被均分。

注: 而Bottom、Top、Stretch 则分别表示整体元素居下,居上、整体伸展。

默认情况下, StackPanel面板的VerticalAlignmentHorizontalAlignment 默认属性均为 Stretch

    <!-- StackPanel -->
<StackPanel VerticalAlignment="Center">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
</StackPanel>

效果图:

Margin(边距)属性:

正如前人书中所说, 一个设计良好窗口不止是包含元素、还应当在元素之间包含一定的额外空间。所以这个时候Margin属性派上用场。

以上的示例图中, 均没有设置Margin属性, 所以会看到的是, 每个元素之间都紧贴。

··

当设置边距时, 可以统一设置元素所有边的距离, 如下所示:

 <!-- StackPanel -->
<StackPanel>
<Button Margin="3">button1</Button>
<Button Margin="3">button2</Button>
<Button Margin="3">button3</Button>
</StackPanel>

另外一种,则是分别对元素的边: 左、上、右、下的顺序设置边距, 如下所示:

 <!-- StackPanel -->
<StackPanel>
<Button Margin="3 6 3 3">button1</Button>
<Button Margin="3">button2</Button>
<Button Margin="3">button3</Button>
</StackPanel>

2.WarpPanel面板

   与StackPanel面板类型, WarpPanel面板也是以行或列的形式进行元素排列, 默认情况下, WarpPanel面板的Orientation属性则为Horizontal,元素以横向进行排列。

注意:StackPanel面板不同的是, WarpPanel默认情况下, 所有元素均不会被拉伸。这里要强调的一点: StackPanel中, 元素会根据Orientation属性进行拉伸,

1.当Orientation="Horizontal"时, 元素被垂直拉伸

2.当Orientation="Vertical"时, 元素被水平拉伸

示例图:

       

同样的, WarpPanel面板具备StackPanel的属性。区别则在于上面的不同。

3.DockPanel面板  

  用过winform的小伙伴应该都知道, 在winform中, 几乎所有的空间都具备Dock停靠属性, 可以针对元素进行单独设置Dock定位。然而在WPF中, 这点显然是不具备的。

所以对于灵活的WPF来说, DockPanel面板具备了这个能力。凡是包含在DockPanel面板中的子元素, 都会具备Dock附加属性。

  下图所示, 对DockPanel进行简单的添加元素设置Dock属性:

  示例代码:

    <DockPanel>
<Button DockPanel.Dock="Top">button1</Button>
<Button DockPanel.Dock="Right" >button2</Button>
<Button DockPanel.Dock="Left">button3</Button>
</DockPanel>

 注意:DockPanel 的 LastChildFill 属性, 主要用于设置DockPanel中最后一个元素的会具备填充效果。如上图的button3元素

LastChildFill 字面意思则可以理解, 最后一个元素是否填充。通过设置true/false, 

效果图(LastChildFill="false") :

 <DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top">button1</Button>
<Button DockPanel.Dock="Right" >button2</Button>
<Button DockPanel.Dock="Left">button3</Button>
</DockPanel>

4.Grid面板

  Grid面板类型HTML中的table表格, 为了能够让元素或内容按照规定的位置排列, 首先得定义足够得行和列。

注意: Grid中定义得Row与Column属性默认在元素中都是从0开始索引, 在下面示例中,为了演示都进行了添加(如果在程序中,位置已经确定, 可以默认不加)。

定义行与列( RowDefinitions/ColumnDefinitions)

    <Grid>
<!-- 下面分别定义了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>

添加元素:

  下面为Grid定义得2行2列基础上添加4个按钮, 下图所示:

代码所示:

<Grid>
<!-- 下面分别定义了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions> <Button Grid.Column="0" Grid.Row="0">左上</Button>
<Button Grid.Column="1" Grid.Row="0">右上</Button>
<Button Grid.Column="0" Grid.Row="1">左下</Button>
<Button Grid.Column="1" Grid.Row="1">右下</Button>
</Grid>

注意: 尽管一个单元格中, 允许放置多个元素, 通常来说这没有什么意义。如上所示, 每个元素都明确了对应单元格中。

Grid与WarpPanelStackPanel面板等容器不同得区别在于, Grid需要显式定义行与列来放置元素。而相对于其他容器,则会隐式创建行与列。

调整行和列:

   Grid面板支持3种设置尺寸的方式:

硬编码尺寸  width="xxx" / height="xxx"
自动设置尺寸  width="auto" / height="auto"
按比例设置尺寸  width="*" / height="2*"

例如, 下面的代码演示了三种设置尺寸的方式:

 <Grid>
<!-- 下面分别定义了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="100"/>
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions> <Button Grid.Column="0" Grid.Row="0">左上</Button>
<Button Grid.Column="1" Grid.Row="0">右上</Button>
<Button Grid.Column="0" Grid.Row="1">左下</Button>
<Button Grid.Column="1" Grid.Row="1">右下</Button>
</Grid>

实际的显示效果可以看到, 第一列width=" *  "  为第二列的1/2, 第一行设置的自适应高度, 而第二行则是硬编码的高度 100

注意: 当使用Grid进行按比例设置列或者行时, 如果Grid宽度为奇数像素, 那么被分割的行列像素带小数, 当改列包含形状元素、边框、图像, 那么显示内容可能是模糊的,

如果这个问题影响布局, 则只需要将Grid的 UseLayoutRounding属性设置为True即可。

 跨行与跨列:

   处于Grid中的任意元素, 都具有两个附加属性, 分别为 RowSpan与 ColumnSpan。像这种跨行跨列在web应用中十分常见。

下面的示例中演示了如何针对元素进行跨列显示:

5.UniformGrid面板

  与Grid相反, UniformGrid并不遵循Grid的众多原则, 无论是显式声明行和列, 还有其附加属性。反而, 通过简单的设置

Rows和Columns属性来设定其尺寸。每个单元格都被均匀分配, 关键一点, 所有元素最后都根据其定义的先后顺序放置在

单元格中。

示例代码如下:

    <UniformGrid Rows="2" Columns="2">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
<Button>button4</Button>
</UniformGrid>

  

6.Canvas面板

  Canvas面板允许使用精准的坐标放置元素, 为了在Canvas面板中定位一个元素, 需要设置Canvas.Left 和 Canvas.Top属性。

Code:通过设置元素的附加属性 Canvas.Left  、Top、Right、Bottom 等进行元素定位

<Canvas>
<Button Canvas.Left="100" Canvas.Top="50">button1</Button>
<Button Canvas.Left="100" Canvas.Top="80">button2</Button>
</Canvas>

WPF 入门《布局面板》的更多相关文章

  1. WPF入门教程系列六——布局介绍与Canvas(一)

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

  2. 三、WPF入门教程——布局和常用Panel学习

    布局和常用Panel学习 一.简介 所有的WPF布局容器都派生自System.Windows.Controls.Panel.Panel继承自FrameworkElement. 在Panel中有一个比较 ...

  3. WPF入门教程系列七——布局之WrapPanel与StackPanel(二)

    三. WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation— ...

  4. WPF入门教程系列一

    WPF入门教程 一.  前言  公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了温 ...

  5. WPF入门:数据绑定

    上一篇我们将XAML大概做了个了解 ,这篇将继续学习WPF数据绑定的相关内容 数据源与控件的Binding Binding作为数据传送UI的通道,通过INotityPropertyChanged接口的 ...

  6. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  7. WPF入门教程系列十九——ListView示例(一)

    经过前面的学习,今天我做一个比较综合的WPF程序示例,主要包括以下功能: 1) 查询功能.从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,然后展示到WPF的Windo ...

  8. WPF入门教程系列十三——依赖属性(三)

    四. 只读依赖属性 在以前在对于非WPF的功能来说,对于类的属性的封装中,经常会对那些希望暴露给外界只读操作的字段封装成只读属性,同样在WPF中也提供了只读属性的概念,如一些 WPF控件的依赖属性是只 ...

  9. WPF入门教程系列(一) 创建你的第一个WPF项目

    WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...

随机推荐

  1. wxWidgets笔记_1_linux环境下wxwidgets的安装与配置

    linux下wxwidgets环境的安装与配置 一.建立目标文件夹(自己定义) mkdir /opt/SCOTT 二.安装wxWidgets 1.wxWidgets版本号能够选用wxGTK-2.8.1 ...

  2. C语言keywordstatic的绝妙用途

    为什么要说static妙,它确实是妙,在软件开发或者单片机开发过程中,大家总以为static就是一个静态变量.在变量类型的前面加上就自己主动清0了.还有就是加上statickeyword的,无论是变量 ...

  3. 3.菜鸟教你一步一步开发 web service 之 axis 服务端创建

    转自:https://blog.csdn.net/shfqbluestone/article/details/37610601 第一步,新建一个工程,如图: 选 Java 写一个工程名,选择好工程路径 ...

  4. centos 项目上线shell脚本

    最近在弄项目上线,然后写了个上线,备份,回滚的shell脚本 上线可根据自己公司项目做相关操作,备份回滚可修改目录则可实现 主管要求用shell写,那就用shell写吧 本想Python写更好的 哈哈 ...

  5. gym 100735I

    Description standard input/outputStatements You are given three numbers. Is there a way to replace v ...

  6. 分享js中的 sort 另一种用法

    // 看上去正常的结果: ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // apple排 ...

  7. 网络协议 4 - 交换机与 VLAN

    上一次,我们通过公司需求,认识了如何通过物理层和链路层组建一个公司局域网.今天,我们切换到复杂点的办公室场景.     在这个场景里,就不像在大学教室那样,搞几根网线,拉一拉,扯一扯就可以了.一个办公 ...

  8. 手把手教你安装Navicat——靠谱的Navicat安装教程

    Navicat是一款轻量级的用于MySQL连接和管理的工具,非常好用,使用起来方便,简洁.下面讲讲其安装的过程. 1.进入navicat官网,选择Navicat for MySQL,然后点击进行下载即 ...

  9. webpack4强势来袭

    # Webpack4## 安装> webpack 4默认不需要配置文件(它吸收了Parcel的思想,零配置)> - npm i -D webpack> - npm i -D webp ...

  10. jmeter名词解释之聚合报告

    新浪围脖>@o蜗牛快跑o    温馨提示: 1. tps(吞吐量)表征系统性能,系统的好坏能够用这个评估 2. 90%Line是满足需求响应时间的重要指标,假设用户需求说是响应时间不小于5s,那 ...