上一篇介绍了 xaml 基本知识, 我们已经知道了 WPF 简单的语法那么接下来, 我们要认识一下 WPF 的布局容器布局容器可以使控件按照分类显示, 我们一起来看看 WPF 里面可以使用哪些布局容器用来布局
在 WPF 中, 布局是由布局容器来完成的, 容器里面是可以放控件, 容器里面也可以放容器而在 WPF 中, 布局容器有很多, 下面主要介绍最常用的几种布局容器,
下面分别介绍 StackPanel,WarpPanel,DockPanel,Grid,Canvas 五种布局容器
一 StackPanel
在 WPF 中 StackPanel 的功能是, 紧凑地把子控件按照一定规律地排列在一起, 基本的排列方式有两种, 一种是横排列 <StackPanel Orientation="Horizontal"/>, 一种是竖排列 < StackPanel Orientation="Vertical"> 下面看一下这个布局容器的使用
这里随便说一下 Margin 属性, Margin 属性定义控件的外边缘, 可以通过以下几种方式来设置
1Margin=10: 各边缘均为 10
2Margin=10,20,30,40: 设定左上右下各边缘分别为 10203040
3 使用拆分式方式设定 Margin=20,10, 如上下为 10, 左右为 20
二 WarpPanel
StackPanel 是比较有局限性的, 那么 WPF 怎么解决这个问题呢, WarpPanel 和 DockPanel 就是补充 StackPanel 功能的布局容器, 下面通过观察来对比一下两个布局容器的区别吧看一下 WarpPanel 到底改进了什么功能?
看到上面的运行结果, 我想大家已经知道了, 区别在哪里, WarpPanel 是可以根据容器的大小变化, 来滚动控件的排布的而 StackPanel 只是死死地盯住控件, 容器小了, 就会遮挡内容
三 DockPanel
DockPanel 布局容器是以上下左右中为基本结构的布局方式, 主要是控件的停靠方式有类似于港口停船的方式我们可以利用 DockPanel.Dock 这个附加属性来设置控件的停泊方式的有四个方式, 上下左右
四 Grid
在 WPF 中可以说最强大的布局容器就是 Grid 了, 我们刚才演示的容器都可以放置在 Grid 中, 因为 Grid 可以模仿除了 Warppanel 之外的所有布局容器的功能 Grid 其实就是把一个页面分为一格格, 然后再这些格上面放东西
在布局控件之前, 我们首先要做的是布局 Grid 容器, 因为 Grid 容器是由小网格组成, 那么我们在布局容器的时候就要设置好有多少行, 有多少列然后就形成了用这些行和列分隔开的网格了
我们用 < ColumnDefinition > 标签来定义列的, 用 < RowDefinition > 来定义行的上图我们定义的 5*5 的 Grid 布局容器
注意, 默认情况下是平均分, 但是有很多情况不是平均分的, 我们可以设置高度或者宽度的值, 有三种方式. 我们利用列来说明:
第一就是 Width="*", 这种是按比例分的, 2 * 就是 2 倍的意思了
第二就是 Width="auto" 自动分配, 就是根据内容分配空间
第三就是 Width="Value" 一个确定的值这个属性可以这样写
- <ColumnDefinition Width="*"></ColumnDefinition>
- <ColumnDefinition Width="Auto"></ColumnDefinition>
- <ColumnDefinition Width="2*"></ColumnDefinition>
定义 Grid 的行和列以后, 网格就出来了就可以再里面放内容了
我们通过 Grid.Row 和 Grid.Column 来把空间放进去当然, 我们也可以在容器里面的空间标签中加入各种属性来改变一些东西, 如 Margin, 当我们不想看到分割线的话, 也可以设置 ShowGridLines=false 来取消我们可以再方格里面镶嵌一个布局容器, 在里面继续布局
五 Canvas
Canvas 布局容器就好像传统的布局一样, 基于坐标的布局, 利用 Canvas.Left,Canvas.Top,Canvas.Right,Canvas.Bottom 这四个附加属性来定位控件坐标
WPF 中使用的坐标是以左上角为原点, 向右为 X 轴, 向下为 Y 轴的
坐标点就是控件的左上角的位置
PS: 本人也是 WPF 的初学者, 如有不对的地方, 欢迎在评论区多多指教, 学习, 为了分享, 为了提高
来源: https://www.cnblogs.com/fly-bird/p/8531650.html