WPF学习之路（十一）布局
布局
Canvas
基本面板，传统布局方式，支持与设备无关的坐标定位元素
<Border BorderThickness="" BorderBrush="Black" Margin="">
<Canvas>
<Button Canvas.Left="" Canvas.Top="" Content="Left=20,Top=50" />
<Button Canvas.Right="" Canvas.Bottom="" Content="Right=20,Bottom=50" />
</Canvas>
</Border>
效率高，适合矢量绘图
StackPanel
用于顺序垂直或水平排列子元素
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">
<StackPanel>
<Button Content="" />
<Button Content="" />
<Button Content="" />
<Button Content="" />
</StackPanel>
</Border>
<Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">
<StackPanel Orientation="Horizontal">
<Button Content="" />
<Button Content="" />
<Button Content="" />
<Button Content="" />
</StackPanel>
</Border>
<Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">
<StackPanel FlowDirection="RightToLeft">
<Button Content="" />
<Button Content="" />
<Button Content="" />
<Button Content="" />
</StackPanel>
</Border>
<Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="" />
<Button Content="" />
<Button Content="" />
<Button Content="" />
</StackPanel>
</Border>
</Grid>
WrapPanel
与StackPanel类似，当没有空间放置子元素时会自动放到下一行或下一列
<Border BorderThickness="" BorderBrush="Black" Margin="">
<WrapPanel ItemHeight="">
<Button Content="" MinWidth="" />
<Button Content="" MinWidth="" />
<Button Content="" MinWidth="" />
<Button Content="" MinWidth="" />
</WrapPanel>
</Border>
布局会随着窗口大小的改变一起改变
DockPanel
将元素放到面板的某一个边上，拉伸元素填满高度或者宽度，可以设置是否填充剩余空间
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="" Margin="">
<Button DockPanel.Dock="Left" Content="" />
<Button DockPanel.Dock="Top" Content="" />
<Button DockPanel.Dock="Right" Content="" />
<Button DockPanel.Dock="Bottom" Content="" />
<Button DockPanel.Dock="Left" Content="" />
<Button DockPanel.Dock="Top" Content="" />
<Button DockPanel.Dock="Right" Content="" />
<Button DockPanel.Dock="Bottom" Content="" />
</DockPanel>
<DockPanel Grid.Row="" Margin="" LastChildFill="False">
<Button DockPanel.Dock="Left" Content="" />
<Button DockPanel.Dock="Top" Content="" />
<Button DockPanel.Dock="Right" Content="" />
<Button DockPanel.Dock="Bottom" Content="" />
<Button DockPanel.Dock="Left" Content="" />
<Button DockPanel.Dock="Top" Content="" />
<Button DockPanel.Dock="Right" Content="" />
<Button DockPanel.Dock="Bottom" Content="" />
</DockPanel>
</Grid>
Grid
最常用且功能强大的布局（之前的实例中已经有过使用），允许在一个列表中放置子元素
常用属性 Column\Row\ColumnSpan\RowSpan
尺寸：绝对尺寸、自动尺寸、比例尺寸
<Grid Margin="">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="" Content="Width=100" />
<Button Grid.Column="" Content="Width=*" />
</Grid>
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="" Content="Width=100" />
<Button Grid.Column="" Content="Width=*" />
<Button Grid.Column="" Content="Width=*" />
<Button Grid.Column="" Content="Width=*" />
</Grid>
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="" Content="Width=100" />
<Button Grid.Column="" Content="Width=*" />
<Button Grid.Column="" Content="Width=2*" />
<Button Grid.Column="" Content="Width=*" />
</Grid>
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="" Content="Width=100" />
<Button Grid.Column="" Content="Width=*" />
<Button Grid.Column="" Content="Width=2*" />
<Button Grid.Column="" Content="Width=3*" />
</Grid>
</Grid>
IsSharedSizeScope
通过对SharedSizeGroup命名，相同名字的Grid的高度或者宽度可以设置为相同
<Grid Margin="" Grid.IsSharedSizeScope="True">
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" SharedSizeGroup="a"/>
<ColumnDefinition Width="*" SharedSizeGroup="a"/>
</Grid.ColumnDefinitions>
...
</Grid>
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" SharedSizeGroup="a"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
GridSplitter
可以通过鼠标键盘改变尺寸
<Grid Margin="" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<GridSplitter Grid.Row="" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" ResizeDirection="Rows" Height="3" Background="Black" />
<Grid Grid.Row="" Margin="">
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Stretch" ShowsPreview="True" Width="" Background="Black" />
...
</Grid> </Grid>
To be continue...
WPF学习之路（十一）布局的更多相关文章
- WPF学习之路初识
WPF学习之路初识 WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...
- WPF学习（一）--布局控件简介
WPF的4种基本布局介绍 1.Grid的布局 这个就没啥特别好说的,其实,基本上复杂的布局,都需要用到Grid. 主要就是对行和列进行进行设置和定义. 1.行表格 列表格: 包含行和列的表格 2.St ...
- WPF学习（3）布局
今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...
- 【WPF学习】第二十一章 特殊容器
内容控件不仅包括基本控件,如标签.按钮以及工具提示:它们还包含特殊容器,这些容器可用于构造用户界面中比较大的部分区域. 首先介绍ScrollViewer控件,该控件直接继承自ContentContro ...
- WPF学习之路（十一）布局（续）
布局实际上是一个Slot模型,其中每个父对象分配给子对象一个Slot,子对象可以自由占用Slot中的空间,通过Margin\VerticalAlignment\HorizontalAlignment控 ...
- WPF学习之路（三） 属性与依赖
类型是DependencyProperty的属性是依赖属性 依赖属性不同于普通的.Net属性,类似于一个计算过程,根据依赖的值得到最终值. 为什么引入依赖属性: MSDN原文 One of the p ...
- WPF学习之路（二） XAML(续)
属性 简单属性 前面用到的Width/Height都是简单属性,其赋值一定要放到双引号里 XAML解析器会根据属性的类型执行隐式转换 与C#的区别 SolidBrush.Color = Colors. ...
- WPF学习之路（一） 初识WPF
参考<葵花宝典-WPF自学手册> VS2012 先创建第一个WPF小程序 1.创建WPF程序 2.查看Solution,WPF中xaml文件和cs文件经常成对出现 两个主要的类:APP(W ...
- Wpf学习之路……
Wpf学习之路-- Wpf是 .net中一门做winform的技术,和传统的winform的区别在于: 1. 原来的winform就是拖控件,而wpf的控件都死自己拿标记语言(xaml ...
随机推荐
- SQL中 将同一个表中的A列更新到B列，B列更新到A列
有网友在SKYPE问及,如标题,SQL中 将同一个表中的A列更新到B列,B列更新到A列. 其实这个不是问题,直接写更新语句即可,可以参考下面动画演示: SQL source code: CREATE ...
- 基于Winform的.cs文件命名空间排序及注释批量处理工具
公司里每个程序员在命名空间的排序和注释上都有很多的不同. 杂乱的命名空间: using System; using System.Collections.Generic; using Autodesk ...
- Web设计之网页布局CSS技巧
1.两列布局 1.1.左列固定,右列自适应 #left{ width:190px; float:left; } #right{ margin-left:205px; } 1.2.右列固定, ...
- C#编程总结（十二）断点续传
C#编程总结(十二)断点续传 我们经常使用下载工具,如bit精灵.迅雷.FlashGet,这些软件都支持断点续传. 断点续传即下载任务暂停后可以继续,而无需重新下载,即下载时需要通知服务器的起始位置. ...
- 【C#】第3章学习要点（三）--常用类和结构的用法
分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.DateTime结构和TimeSpan结构 DateT ...
- 基于吉日嘎底层架构的Web端权限管理操作演示-组织机构管理
软件是服务组织的系统,而任何组织一定会涉及到权限:所以权限控制是一个系统的核心基础,不管你做啥系统都逃不过:有人的地方就有江湖,有系统就有权限管理. 今天我们继续讲一下组织机构的管理: 新增.修改.锁 ...
- Visual Studio统计代码行数
按[Ctrl+Shift+F]弹出查找窗口(不统计以#号开头.以/开头的代码和空行) 1.输入 :b*[^:b#/]+.*$ 2.选择使用正则表达式 3.查找文件类型,*.cs多种类型用分号(;)隔 ...
- PHP高效率写法
1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍.当然了,这个测试方法需要在十万级以上次执行,效果才明显.其实静态方法和非静态方法的效率 ...
- Java--如何使用sun.misc.Unsafe完成compareAndSwapObject原子操作
package com; import sun.misc.Unsafe; import java.lang.reflect.Field; /** * Created by yangyu on 16/1 ...
- 【Effective Java】5、覆盖equals时总要覆盖hashcode
package cn.xf.cp.ch02.item9; import java.util.HashMap; import java.util.Map; public class PhoneNumbe ...