上一篇介绍了xaml基本知识,我们已经知道了WPF简单的语法。那么接下来,我们要认识一下WPF的布局容器。布局容器可以使控件按照分类显示,我们一起来看看WPF里面可以使用哪些布局容器用来布局。

在WPF中,布局是由布局容器来完成的,容器里面是可以放控件,容器里面也可以放容器。而在WPF中,布局容器有很多,下面主要介绍最常用的几种布局容器,

下面分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器

一、StackPanel

在WPF中StackPanel的功能是,紧凑地把子控件按照一定规律地排列在一起,基本的排列方式有两种,一种是横排列<StackPanel Orientation="Horizontal"/>,一种是竖排列<StackPanel Orientation="Vertical">。下面看一下这个布局容器的使用

这里随便说一下Margin属性,Margin属性定义控件的外边缘,可以通过以下几种方式来设置

1、Margin=”10”:各边缘均为10

2、Margin=”10,20,30,40”:设定左、上、右、下各边缘分别为10、20、30、40

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的初学者,如有不对的地方,欢迎在评论区多多指教,学习,为了分享,为了提高。

WPF自学入门(二)WPF-XAML布局控件的更多相关文章

  1. WPF自定义控件(二)の重写原生控件样式模板

    话外篇: 要写一个圆形控件,用Clip,重写模板,去除样式引用圆形图片可以有这三种方式. 开发过程中,我们有时候用WPF原生的控件就能实现自己的需求,但是样式.风格并不能满足我们的需求,那么我们该怎么 ...

  2. WPF自学入门(六)WPF带标题的内容控件简单介绍

    在WPF自学入门(二)WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用,可以让我们大致了解容器可以使用在什 ...

  3. WPF自学入门(十二)WPF MVVM模式提取函数

    我们平时在写代码时为了不重复写代码,会进行复制代码或者写通用方法.今天我们就来把上传做的函数提取成为通用的方法调用.把上次写的函数提取为两个主要的文件:ObserableObject和RelayCom ...

  4. WPF自学入门(十一)WPF MVVM模式Command命令 WPF自学入门(十)WPF MVVM简单介绍

    WPF自学入门(十一)WPF MVVM模式Command命令   在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式 ...

  5. WPF自学入门(三)WPF路由事件之内置路由事件

    有没有想过在.NET中已经有了事件机制,为什么在WPF中不直接使用.NET事件要加入路由事件来取代事件呢?最直观的原因就是典型的WPF应用程序使用很多元素关联和组合起来,是否还记得在WPF自学入门(一 ...

  6. WPF自学入门(十一)WPF MVVM模式Command命令

    在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式.正如上一篇文章中在开始说的,MVVM的目的是为了最大限度地降低了 ...

  7. wpf布局控件总结

    首先要认识到wpf所有的布局控件都继承自Panel类,Panel类又继承自其他类.继承关系如下: 一.StackPanel布局面板 1.该面板在单行或者单列中以堆栈的形式放置其子元素. 默认情况下,S ...

  8. WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系

    WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...

  9. WPF布局控件常用属性介绍

    WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0)   概述:WPF布局控件都是派生自System.Windows ...

随机推荐

  1. BZOJ 2986: Non-Squarefree Numbers [容斥原理 二分]

    题意:求第$n \le 10^{10}$个不是无平方因子数 二分答案, 容斥一下,0个质数的平方因子-1个..... 枚举$\sqrt$的平方因子乘上莫比乌斯函数,最后求出无平方因子数的个数取补集 # ...

  2. 安装基于 Linux 发行版的重要事项(流程指引)

    安装基于 Linux 发行版的重要事项(Install important issues based on the Linux distribution. (Process guidance)) 1. ...

  3. 异步请求时有时会让js不起作用,那么重新加载js

    function reloadSmartMenu() { var jsElem = document.createElement('script'); jsElem.src= path+'/syste ...

  4. Redis Sentinel安装与部署,实现redis的高可用

    前言 对于生产环境,高可用是避免不了要面对的问题,无论什么环境.服务,只要用于生产,就需要满足高可用:此文针对的是redis的高可用. 接下来会有系列文章,该系列是对spring-session实现分 ...

  5. C++ Primer Plus阅读笔记

    cin进行文本输入 使用cin获取字符的基本方式 char ch; cin >> ch; cin读取char值时将忽略空格和换行符.此外,发送给cin的输入被缓冲.这意味着只有在用户按下回 ...

  6. TJ4运行环境

    http://springwq2011.blog.51cto.com/4332889/966028 http://blog.csdn.net/u013573789/article/details/45 ...

  7. 940D Alena And The Heater

    传送门 题目大意 给出两个长度为N的数组A,B,以及一种计算规律: 若t[i]=1,需满足t[i-1]=t[i-2]=t[i-3]=t[i-4]=0,以及max{A[i],A[i-1],A[i-2], ...

  8. Python自动化--语言基础5--面向对象、迭代器、range和切片的区分

    面向对象 一.面向对象代码示例: 1 class Test(): #类的定义 2 car = "buick" #类变量,定义在类里方法外,可被对象直接调用,具有全局效果 3 def ...

  9. 排序算法(Java实现)

    这几天一直在看严蔚敏老师的那本<数据结构>那本书.之前第一次学懵懵逼逼,当再次看的时候,发觉写的是非常详细,非常的好. 那就把相关的排序算法用我熟悉的Java语言记录下来了.以下排序算法是 ...

  10. Java经典编程题50道之三

    打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1的三次 ...