概述:本文简要介绍了WPF中布局常用控件及布局相关的属性

1 Canvas

Canvas是一个类似于坐标系的面板,所有的元素通过设置坐标来决定其在坐标系中的位置.。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

示例:

<Canvas>
<Button Canvas.Left="50" Canvas.Top="50" Content="Left=50 Top=50"/>
<Button Canvas.Left="50" Canvas.Bottom="50" Content="Left=50 Bottom=50"/>
<Button Canvas.Right="50" Canvas.Top="50" Content="Right=50 Top=50"/>
<Button Canvas.Right="50" Canvas.Bottom="50" Content="Right=50 Bottom=50"/>
</Canvas>

显示:

注意:如果同时设置 Canvas.Left="50"Canvas.Right="50",则以Canvas.Left="50"为准

如果同时设置Canvas.Top="50" Canvas.Bottom="50",则以Canvas.Top ="50"为准

2 StackPanel

StackPanel将控件按照行或列来顺序排列,但不会换行。通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical),默认为竖排(Vertical)。

示例:

<StackPanel>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

</StackPanel>

显示:

示例:

<StackPanel Orientation="Horizontal">

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

</StackPanel>

显示:

注意:Orientation="Horizontal"时,设置FlowDirection属性为RightToLeft,,则元素将从右向左排列。

3 DockPanel

DockPanel支持让元素简单地停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

DockPanel有一个Dock附加属性,因此子元素用4个值来控制她们的停靠:Left、Top、Right、Bottom。Dock没有Fill值。作为替代,最后的子元素将加入一个DockPanel并填满所有剩余的空间,除非DockPanel的LastChildFill属性为false,它将朝某个方向停靠。

示例:

<DockPanel>

<Button Content="Button左" DockPanel.Dock="Left"/>

<Button Content="Button右" DockPanel.Dock="Right"/>

<Button Content="Button上" DockPanel.Dock="Top"/>

<Button Content="Button下" DockPanel.Dock="Bottom"/>

</DockPanel>

显示:

设置LastChildFill属性为false

示例:

<DockPanel LastChildFill="False">

<Button Content="Button左" DockPanel.Dock="Left"/>

<Button Content="Button右" DockPanel.Dock="Right"/>

<Button Content="Button上" DockPanel.Dock="Top"/>

<Button Content="Button下" DockPanel.Dock="Bottom"/>

</DockPanel>

显示:

4 WrapPanel

WrapPanel布局面板将各个控件按照一定方向罗列,当长度或高度不够时自动调整进行换行换列。

Orientation="Horizontal"时各控件从左至右罗列,当面板长度不够时,子控件就会自动换行,继续按照从左至右的顺序排列。

Orientation=" Vertical"时各控件从上至下罗列,当面板高度不够时,子控件就会自动换列,继续按照从上至下的顺序排列。

示例:

<WrapPanel Orientation="Horizontal">

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

</WrapPanel>

显示:

运行程序,拖动窗体边缘改变窗体宽度,发现布局会变成如下所示:

注意WrapPanel的两个属性:

ItemHeight——所有子元素都一致的高度,任何比ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度,任何比ItemWidth高的元素都将被截断。

示例:

<WrapPanel Orientation="Horizontal" ItemWidth="120">

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

<Button Content="Burron" Width="200"/>

<Button Content="Burron" Width="150"/>

</WrapPanel>

显示:

5 Grid

Grid允许我们通过自定义行列来进行布局,这类似于表格.通过定义Grid的RowDifinitions和ColumnDifinitions来实现对于表格行和列的定义,元素根据附加属性Grid.Row和Grid.Column确定自己的位置.

1)Grid的列宽与行高可采用固定、自动、按比列三种方式定义

第一种,固定长度——值为一个确定的数字

第二种,自动长度——值为Auto,实际作用就是取实际控件所需的最小值

第三种,比例长度—— *表示占用剩余的全部宽度;两行都是*,将平分剩余宽度;一个2*,一个*,则前者占剩余全部宽度的2/3,后者占1/3;依此类推

示例:

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="40"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="2*"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Button Grid.Row="0" Content="Button"/>

<Button Grid.Row="1" Content="Button"/>

<Button Grid.Row="2" Content="Button"/>

<Button Grid.Row="3" Content="Button"/>

</Grid>

显示:

注:可以放大窗体 观察Grid每行高度是否变化

2) 合并行或列

示例:

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="40"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="2*"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Button Grid.Row="0" Content="Button"/>

<Button Grid.Row="1" Content="Button"/>

<Button Grid.Row="2" Grid.RowSpan="2" Content="Button"/>

</Grid>

显示:

3)GridSplitter重新分布Grid控件的列间距或行间距。(类似于WinForm中SplitContainer)

示例:

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="3"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Button Grid.Row="0" Content="Button"/>

<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"/>

<Button Grid.Row="2" Content="Button"/>

</Grid>

显示:

拖拽后 显示:

6 UniformGrid

UniformGrid 就是Grid的简化版,每个单元格的大小相同,不需要定义行列集合。每个单元格始终具有相同的大小,每个单元格只能容纳一个控件。

若不设置Rows Colums,则按照定义在其内部的元素个数,自动创建行列,并通常保持相同的行列数。若只设置Rows则固定行数,自动扩展列数。若只设置Colums则固定列数,自动扩展行数。

UniformGrid 中没有Row和Column附加属性,也没有空白单元格。

示例:

<UniformGrid>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

</UniformGrid>

显示:

示例:

<UniformGrid Rows="2">

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

<Button Content="Button"/>

</UniformGrid>

显示:

7 ScrollViewer

ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。

HorizontalScrollBarVisibility水平滚动条是否显示默认为Hidden

VerticalScrollBarVisibility垂直滚动条是否显示 默认为Visible。

一般我们都会设置 HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto"

意思是:当内容超出可视范围时,才显示横向/纵向滚动条

示例:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

<Button Content="Button" Width="800" Height="800"/>

</ScrollViewer>

显示:

8 Viewbox

Viewbox的作用是拉伸或延展位于其中的组件,以填满可用空间。在Viewbox中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel控件放置在父 Viewbox中。然后可以将子控件放置在该控件中。

常用属性:

Stretch:获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。具体设置值如下:

属性值
说明
None
不进行拉伸,按子元素设置的长宽显示。
Uniform
按原比例缩放子元素,使得一边不足,另一边恰好填充
Fill
缩放子元素,使得子元素的长变为Viewbox的长,宽变为Viewbox的宽
UniformToFill
按原比例缩放子元素,使得子元素一边恰好填充,另一边超出Viewbox的区域
Stretch默认值为Uniform。

示例:

<Grid>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">

<Button Width="100" Height="50" Content="None"/>

</Viewbox>

<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">

<Button Width="100" Height="50" Content="Uniform"/>

</Viewbox>

<Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">

<Button Width="100" Height="50" Content="Fill"/>

</Viewbox>

<Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">

<Button Width="100" Height="50" Content="UniformToFill"/>

</Viewbox>

</Grid>

显示:

StretchDirection:获取或设置该组件的拉伸方向以决定该组件中的内容将以何种形式被延展。具体的设置值如下。

属性值
说明
UpOnly
仅当内容小于父项时,它才会放大。 如果内容大于父项,不会执行任何缩小操作。(子元素要么放大,要么不变,不会因为迁就父项而缩小)
DownOnly
仅当内容大于父项时,它才会缩小。 如果内容小于父项,不会执行任何放大操作。(子元素要么缩小,要么不变,不会因为迁就父项而放大)
Both
内容根据 Stretch属性进行拉伸以适合父项的大小。
StretchDirection默认值为Both。

9 Border

Border 是一个装饰的控件,此控件用于绘制边框及背景,在 Border中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel控件放置在父 Border中。然后可以将子控件放置在该 Panel控件中。

常用属性:

Background:    背景色 ;

BorderBrush:    边框色 ;

BorderThickness: 边框宽度;

CornerRadius:   各个角 圆的半径;

示例:

<Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0,2,4,6" CornerRadius="0,10,20,30"/>

显示:

10 基本属性:Alignment, Margin 和 Padding

在设计UI时,WPF为我们提供了一些属性用于精确定位元素,其中最常用的有三个:Alignment(包括水平,垂直),Margin,Padding,具体用法如下:

名称
说明
HorizontalAlignment
子元素在水平方向的对齐方式,有左对齐,右对齐,中间对齐,拉伸填充等四种方式。
VerticalAlignment
子元素在垂直方向的对齐方式,有顶端对齐,底部对齐,中间对齐,拉伸填充等四种方式。
Margin
用于指定元素与其父级或同级之间的距离,包括上下左右四个值。也可通过使用 Margin="20"同时指定四个值。
Padding
用于指定元素与其子级之间的距离,包括上下左右四个值。也可通过使用 Padding="20"同时指定四个值。

示例:

<Grid>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Button Grid.Row="0" Content="Center" HorizontalAlignment="Center"/>

<Button Grid.Row="1" Content="Left"   HorizontalAlignment="Left"/>

<Button Grid.Row="2" Content="Right"  HorizontalAlignment="Right"/>

<Button Grid.Row="3" Content="Stretch" HorizontalAlignment="Stretch"/>

</Grid>

显示:

示例:

<Border Background="YellowGreen">

<Button Margin="0,50,100,150"/>

</Border>

显示:

示例:

<Border Background="YellowGreen" Padding="0,50,100,150" >

<Button/>

</Border>

显示:

---------------------
作者:孙家乐
来源:CSDN
原文:https://blog.csdn.net/woshisunjiale/article/details/54136323
版权声明:本文为博主原创文章,转载请附上博文链接!

WPF常用布局介绍的更多相关文章

  1. Android 基础:常用布局 介绍 & 使用(附 属性查询)

    Android 基础:常用布局 介绍 & 使用(附 属性查询)   前言 在 Android开发中,绘制UI时常需各种布局 今天,我将全面介绍Android开发中最常用的五大布局 含 Andr ...

  2. ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  3. 跟我学android-android常用布局介绍

    在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...

  4. WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  5. WPF中的常用布局 栈的实现 一个关于素数的神奇性质 C# defualt关键字默认值用法 接口通俗理解 C# Json序列化和反序列化 ASP.NET CORE系列【五】webapi整理以及RESTful风格化

    WPF中的常用布局   一 写在开头1.1 写在开头微软是一家伟大的公司.评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好,应该抛弃对微软和微软的技术的偏见. 1.2 本文内容本文主要内容 ...

  6. WPF教程二:理解WPF的布局系统和常用的Panel布局

    WPF的布局系统 了解元素的测量和排列方式是理解布局的第一步.在测量(measure)阶段容器遍历所有子元素,并询问子元素它们所期望的尺寸.在排列(arrange)阶段,容器在合适的位置放置子元素.理 ...

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

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

  8. WPF Step By Step 完整布局介绍

    WPF Step By Step 完整布局介绍 回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的 ...

  9. WPF中的常用布局

    一 写在开头1.1 写在开头评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好. 1.2 本文内容本文主要内容为WPF中的常用布局,大部分内容转载至https://blog.csdn.net ...

随机推荐

  1. Spring3基础原理解析

    一.Spring3主要含义 Spring3是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架. 注:IOC的作用:对象依赖的其他对象通过被动的形式传递进来而不是这个对象常见或者查找依赖对象 ...

  2. H264--2--语法及结构

    转自:http://blog.csdn.net/yangzhongxuan/article/details/8003494 名词解释 场和帧 :    视频的一场或一帧可用来产生一个编码图像.在电视中 ...

  3. iOS安全系列之一:HTTPS

    如何打造一个安全的App?这是每一个移动开发者必须面对的问题.在移动App开发领域,开发工程师对于安全方面的考虑普遍比较欠缺,而由于iOS平台的封闭性,遭遇到的安全问题相比于Android来说要少得多 ...

  4. [UE4]镜像

    一.这是一个右手模型,通过镜像可以得到一个左右模型. 二.通过上图分析,镜面是X轴和Z轴形成的一个面,Y轴与XZ面垂直,因此就是镜像Y轴,将模型的Transform.Scale.Y设置为-1,即可得到 ...

  5. mysql 下的update select from的两种方式比较

    工作中遇到需要将一个表中的数据按照对应规则填入别的表中的情况 例如 表1 a a1    a2 11     90889 32     31241 12     52123 表2 b b1     b ...

  6. 搭建真正的zookeeper集群

    搭建zookeeper伪分布式集群 zookeeper是Hadop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调服务, 提供的功能包括配置维护,域名服务,分布式同步和组 ...

  7. JavaScript 正则表达式学习笔记

    定义规则让计算机去处理字符串正则表达式写法: //第一种 var reg = new RegExp('ab'); //第二种 var reg = /ab/; 量词:{} [a-z] 从小写a-z [A ...

  8. jquery datatable数据初始化

    一个datatable的初始化问题,困扰了在下整整半天,最后在网上各位大神的帮助下,终于解决了. 首先分析一下我所遇到的问题: 在HTML上有个下拉框,我需要获取下拉框的值来从后台数据库中获取不同的数 ...

  9. 转:VB.NET Office操作之Word

    在这里给出了一个Word操作的类,该类具备了对word 文档操作的基本功能,包括word 文档的新建,打开,保存,另存,插入图片,插入表格,插入文字,读取文字,定位光标位置,移动光标,移动到指定页等等 ...

  10. WebApp的自动测试工具: Jenkins

    一.下载并安装(msi)https://jenkins.io/download/thank-you-downloading-windows-installer-stable/ 在安装过程这, 需要从p ...