WPF 布局总结
一.WPF布局原理
WPF窗口只能包含单个元素,为在WPF窗口中放置多个元素,需要放置一个容器,让后在容器中添加其他元素。“理想的”WPF窗口需遵循以下几个原则:
1.不应显示设定元素的尺寸。元素应当可以改变尺寸适合他们的内容,如添加更多文字内容时,按钮会适当扩展。设置最大,最小尺寸,控制尺寸范围。
2.不应使用确定坐标确定元素的位置。元素应当由容器根据他们的尺寸,按一定的顺序进行排列。Margin属性可添加空白空间。
3.布局容器的子元素“共享”可用空间。布局容器根据每个元素的内容尽可能的为元素设置合理尺寸。
4.可嵌套的布局容器。如Grid面板,可以嵌套多种元素,如文本框,按钮。
核心布局面板
名称 | 说明 |
StackPanel | 水平或垂直的堆栈中放置元素。 |
WrapPanel | 在一系列可换行的行中放置元素。 |
DockPanel | 根据整个容器的边界调整元素。 |
Grid | 多行多列中排放元素,适用面最广 |
Canvas | 使用固定坐标定位元素,对于可变尺寸的窗口,不是合适选择。 |
二.个核心面板介绍
1.StackPanel面板
<StackPanel>
<Label HorizontalAlignment="Center">A Button Stack </Label> //对齐方式
<Button HorizontalAlignment="Left">button1</Button>
<Button HorizontalAlignment="Right">button2</Button>
<Button Margin="5">button3</Button> //边距为5
<Button Margin="10,5,10,5">button4</Button> //分别设置边距
</StackPanel>
2.Border控件
Border不是布局面板但是可以和控制面板搭配使用。
<Border Background="Yellow" Margin="5" Padding="5" BorderBrush="SteelBlue" CornerRadius="5" VerticalAlignment="Top">
<StackPanel Margin="3">
<Label HorizontalAlignment="Center">A Button Stack</Label>
<Button Margin="3" MaxWidth="200" MinWidth="100">button1</Button> //设置最大宽最小宽
<Button Margin="3" MaxWidth="200" MinWidth="100">button2</Button>
<Button Margin="3" MaxWidth="200" MinWidth="100">button3</Button>
</StackPanel>
</Border>
3.WrapPanel和DockPanel面板
<WrapPanel Margin="3">
<Button VerticalAlignment="Top">Top button1</Button>
<Button MinHeight="60">Tall button2</Button>
<Button VerticalAlignment="Bottom">Bottom button3</Button>
<Button VerticalAlignment="Center">Center button4</Button>
</WrapPanel>
注意:WrapPanel是唯一一个无法通过灵活使用Grid面板代替的面板
4.DockPanel面板
DockPanel面板沿一条外边缘拉升所包含的控件
<DockPanel Margin="3">
<Button DockPanel.Dock="Top">Top button1</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Center"> button2</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Left"> button3</Button>
<Button DockPanel.Dock="Bottom"> button4</Button>
<Button DockPanel.Dock="Left"> button5</Button>
<Button DockPanel.Dock="Right"> button6</Button>
<Button>bb</Button>
</DockPanel>
停靠行为保持不变,首先停靠顶部按钮,然后停靠底部按钮,剩余空间被分割,最后按钮在中间。
5.Grid面板及嵌套问题
Grid面板通常包含多个GridSplitter对象,可以在一个Grid面板中嵌套另一个Grid面板,如果在Grid面板中嵌套了Grid对象,那么每个单独的Grid都有自己的GridSplitter对象,这样可以创建被分割成两部分的窗口,还可以进行进一步的分割。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition> </ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions> <Grid Grid.Column="0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions> <Button Margin="3" Grid.Row="0">top left</Button>
<Button Margin="3" Grid.Row="1">botton left</Button> </Grid> <GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="False"></GridSplitter> <Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions> <Button Grid.Row="0" Margin="3">top right</Button>
<Button Grid.Row="2" Margin="3">bottom right</Button> <GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>
</Grid>
WPF 布局总结的更多相关文章
- 对比MFC资源文件谈谈WPF布局方式
对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...
- WPF快速入门系列(1)——WPF布局概览
一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...
- 学习WPF——WPF布局——了解布局容器
WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...
- 浅谈 WPF布局
我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...
- WPF布局系统[转]
转自:http://www.cnblogs.com/niyw/archive/2010/10/31/1863908.html前言 前段时间忙了一阵子Google Earth,这周又忙了一阵子架构师论文 ...
- 意外地解决了一个WPF布局问题
原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...
- WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- WPF布局控件常用属性介绍
WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows ...
随机推荐
- [USACO2003][poj2110]Mountain Walking(二分答案+bfs)
http://poj.org/problem?id=2110 题意:给你一个n*n矩形(n<=100),每个位置上都有一个数字代表此处山的高度,要从(1,1)走到 (n,n),要求一条路径使得这 ...
- linux网络命令
关键字 write wall last lastlog traceroute netstat mount 1.write 该命令可以给所有在线用户发送消息 示例: 接受消息用户:按回车可以退出 2.w ...
- JS表单学习笔记(思维导图)
导图
- 由DataGridTextColumn不能获取到父级DataContext引发的思考
在项目中使用DataGrid需要根据业务动态隐藏某些列,思路都是给DataGrid中列的Visibility属性绑定值来实现(项目使用MVVM),如下 <DataGridTextColumn H ...
- [团队项目]Scrum 项目1.0 (演说视频)NABCD
1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 2.SCRUM 流 ...
- Qt webkit插件相关知识
1.在Qt中使用 WebKit 浏览器核心 使用 QtWebKit 需要在工程文件(*.pro)中加入: 1. QT +=webkit 2. QT += n ...
- Vijos p1518 河流 转二叉树左儿子又兄弟
左儿子又兄弟的转发一定要掌握啊,竞赛必用,主要是降低编程复杂度,省时间.个人觉得状压DP也是为了降低编程复杂度. 方程就不说了,程序应该能看得懂,用的记忆化搜索,方便理解. #include<c ...
- hdu2222 字典树
要注意二点 . 这组数据 1 6 she he he say shr her yasherhs出现重复的,也要算.所以这里答案为4: 这一组 1 6 she he he say shr her yas ...
- Spring-编程式事物
所谓编程式事务指的是通过编码方式实现事务,即类似于JDBC编程实现事务管理. Spring框架提供一致的事务抽象,因此对于JDBC还是JTA事务都是采用相同的API进行编程. Connection c ...
- Netbeans 中的编译器相关配置
gcc-core:C 编译器 gcc-g++:C++ 编译器 gdb:GNU 调试器 make:"make" 实用程序的 GNU 版本