一.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 布局总结的更多相关文章

  1. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  2. WPF快速入门系列(1)——WPF布局概览

    一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...

  3. 学习WPF——WPF布局——了解布局容器

    WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...

  4. 浅谈 WPF布局

    我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...

  5. WPF布局系统[转]

    转自:http://www.cnblogs.com/niyw/archive/2010/10/31/1863908.html前言 前段时间忙了一阵子Google Earth,这周又忙了一阵子架构师论文 ...

  6. 意外地解决了一个WPF布局问题

    原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...

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

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

  8. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

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

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

随机推荐

  1. [USACO2003][poj2110]Mountain Walking(二分答案+bfs)

    http://poj.org/problem?id=2110 题意:给你一个n*n矩形(n<=100),每个位置上都有一个数字代表此处山的高度,要从(1,1)走到 (n,n),要求一条路径使得这 ...

  2. linux网络命令

    关键字 write wall last lastlog traceroute netstat mount 1.write 该命令可以给所有在线用户发送消息 示例: 接受消息用户:按回车可以退出 2.w ...

  3. JS表单学习笔记(思维导图)

    导图

  4. 由DataGridTextColumn不能获取到父级DataContext引发的思考

    在项目中使用DataGrid需要根据业务动态隐藏某些列,思路都是给DataGrid中列的Visibility属性绑定值来实现(项目使用MVVM),如下 <DataGridTextColumn H ...

  5. [团队项目]Scrum 项目1.0 (演说视频)NABCD

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 2.SCRUM 流 ...

  6. Qt webkit插件相关知识

    1.在Qt中使用 WebKit 浏览器核心 使用 QtWebKit 需要在工程文件(*.pro)中加入: 1.           QT +=webkit   2.           QT += n ...

  7. Vijos p1518 河流 转二叉树左儿子又兄弟

    左儿子又兄弟的转发一定要掌握啊,竞赛必用,主要是降低编程复杂度,省时间.个人觉得状压DP也是为了降低编程复杂度. 方程就不说了,程序应该能看得懂,用的记忆化搜索,方便理解. #include<c ...

  8. hdu2222 字典树

    要注意二点 . 这组数据 1 6 she he he say shr her yasherhs出现重复的,也要算.所以这里答案为4: 这一组 1 6 she he he say shr her yas ...

  9. Spring-编程式事物

    所谓编程式事务指的是通过编码方式实现事务,即类似于JDBC编程实现事务管理. Spring框架提供一致的事务抽象,因此对于JDBC还是JTA事务都是采用相同的API进行编程. Connection c ...

  10. Netbeans 中的编译器相关配置

    gcc-core:C 编译器 gcc-g++:C++ 编译器 gdb:GNU 调试器 make:"make" 实用程序的 GNU 版本