WPF学习笔记系列之一 (布局详情)
布局:
StackPanel 栈布局:控件不会拐弯且多出的不再显示。
DockPanel 停靠布局 吸在上边下边或左右。
WrapPanel 环绕布局 一行控件会拐弯
Canvas 进行基于坐标的布局
Grid中若不指定Grid.Row属性及Grid.Column则默认为:0行,0列。RowDefinitions ColumnDefinitions ShowGridLines=true
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
ColumnDefinition Width="*"></ColumnDefinition>
<Grid.RowDefinitions>
<RowDefinition Height="*"> </RowDefinition>
</Grid.RowDefinitions>
布局舍入:
如果一个窗体的两个部分被分正好要分一个像素就会使边框分开而不清楚,使用Grid 的UseLayoutRounding 属性设置为true就可以。
跨越多行多列:
Grid.RowSpan="n" Grid.ColumnSpan="n"
<Grid ShowGridLines="true">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*">
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">This is a test.</TextBox>
<Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
<Button Margin="2,10,10,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancel</Button>
</Grid>
Grid中使用GridSplitter分隔条使用原则:
1. 若要非和别的控件放在一个单元格中就要调整好边距,以使它们不重叠。更好的方法是预留一列或一行专门放置GridSplitter并将预留行或列的Heigh 或Width属性值设置为Auto。
2. GridSplitter对象总是改变整行或整列的尺寸(而不是改变单个单元格的尺寸) 为了使GridSplitter对象的外观和其行为一致,需要拉伸GridSplitter 对象使其穿越整行或整列,而不是将其限制在一个单元格中,为此,可以使用RowSpan或ColumnSpan
3. 太小不可见要设置高宽长,若竖直的则设置为:VerticalAlignment="Stretch" Width="10" 横的则:HorizontalAlignment="Center"
例子如下:
<Grid ShowGridLines="true">
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100">
</ColumnDefinition>
<ColumnDefinition Width="Auto">
</ColumnDefinition>
<ColumnDefinition Width="50">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<!--<TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">This is a test.</TextBox>-->
<Button Margin="3" Grid.Row="0" Grid.Column="0">左</Button>
<Button Margin="3" Grid.Row="0" Grid.Column="2">右</Button>
<Button Margin="3" Grid.Row="1" Grid.Column="0">左</Button>
<Button Margin="3" Grid.Row="1" Grid.Column="2">右</Button>
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Center" ShowsPreview="True"></GridSplitter>
</Grid>
ShowsPreview="True" ShowPreview GridSplitter的属性,当设置为false时当你拖动时马上就看到效果,而为true是就只显示你托运的阴影直到放开鼠标。
一个Grid中多个GridSplitter代码如下:
<Window x:Class="StudyWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="孙业宝学习WPF开始" Height="350" Width="525">
<!--This is the Grid for the entire window. -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--This is the nested Grid on the left.It isn't subdivided further with a splitter.-->
<Grid Grid.Column="0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Button Margin="3" Grid.Row="0" >左上</Button>
<Button Margin="3" Grid.Row="1">左下</Button>
</Grid>
<!--this is the vertical splitter that sits between the two nested(left and right) grids.-->
<GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="false"></GridSplitter>
<!-- This is the nested Grid on the right. -->
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Button Margin="3" Grid.Row="0">右上</Button>
<Button Margin="3" Grid.Row="2">右下</Button>
<!-- This is the horizontal splitter that subdivides it into a top and botton region.. -->
<GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch " ShowsPreview="false"></GridSplitter>
</Grid>
</Grid>
</Window>
共享尺寸组:也就是两个不同的grid可以设置其两个列宽度相同通过设置Grid的 Grid.IsSharedSizeScope=true; 且把想要使用共享尺寸组的列的SharedSizeGroup="相同的名称" 例子代码如下:
<Grid Grid.IsSharedSizeScope="True" Margin="3">
<Grid Margin="3" BackGround="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Margin="5"> A very long bit of text</Label>
<Label Grid.Column="1" Margin="5" >More Text</Label>
<TextBox Grid.Column="2" Margin="5" >A text box</TextBox>
</Grid>
<Grid Margin="3" BackGround="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel">
</ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grdi.ColumnDefinitinos>
<Label Margin="5" >Short</Lable>
<TextBox Grid.Column="1" Margin="5" >A text box</TextBox>
</Grid>
WPF学习笔记系列之一 (布局详情)的更多相关文章
- WPF学习笔记一之布局
1.Canvas 布局控件Canvas主要用来画图,注意Canvas.Left/Right/Top/Bottom <Canvas Margin="10,10,10,10" B ...
- $《利用Python进行数据分析》学习笔记系列——IPython
本文主要介绍IPython这样一个交互工具的基本用法. 1. 简介 IPython是<利用Python进行数据分析>一书中主要用到的Python开发环境,简单来说是对原生python交互环 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- WPF编游戏系列 之一 布局设计
原文:WPF编游戏系列 之一 布局设计 本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流.言归正传,在 ...
- MongoDB学习笔记系列
回到占占推荐博客索引 该来的总会来的,Ef,Redis,MVC甚至Sqlserver都有了自己的系列,MongoDB没有理由不去整理一下,这个系列都是平时在项目开发时总结出来的,希望可以为各位一些帮助 ...
- Dynamic CRM 2013学习笔记 系列汇总
这里列出所有 Dynamic CRM 2013学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址: Dynamic CRM 2013学习笔记 系列汇总 ...
- SQLServer学习笔记系列3
一.写在前面的话 今天又是双休啦!生活依然再继续,当你停下来的时候,或许会突然显得不自在.有时候,看到一种东西,你会发现原来在这个社会上,优秀的人很多,默默 吃苦努力奋斗的人也多!星期五早上按时上班, ...
- SQLServer学习笔记系列2
一.写在前面的话 继上一次SQLServer学习笔记系列1http://www.cnblogs.com/liupeng61624/p/4354983.html以后,继续学习Sqlserver,一步一步 ...
- Dynamic CRM 2015学习笔记 系列汇总
这里列出所有 Dynamic CRM 2015学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址:Dynamic CRM 2015学习笔记 系列汇总 一 ...
随机推荐
- Codeforces Round #316 (Div. 2) (ABC题)
A - Elections 题意: 每一场城市选举的结果,第一关键字是票数(降序),第二关键字是序号(升序),第一位获得胜利. 最后的选举结果,第一关键字是获胜城市数(降序),第二关键字是序号(升序) ...
- Unity3D GUI中的图片尾随鼠标旋转脚本
var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...
- phpmyadmin内存溢出
phpmyadmin Fatal error: Allowed memory size of 134217728 bytes 解决方法: 在报错的页面里,加上这句: ini_set('memory_l ...
- SQL Server里的 ISNULL 与 NULLIF(转)
SQL Server 中有两个参数,语法: ISNULL(check_expression, replacement_value) check_expression 与 replacement ...
- 深入理解Java虚拟机到底是什么(转)
原文链接:http://blog.csdn.net/zhangjg_blog/article/details/20380971 什么是Java虚拟机 作为一个Java程序员,我们每天都在写Java ...
- log4j 2 入门实例(1)
本文介绍log4j的基本概念和将日志输出到控制台的例子. 参考文章: http://www.jianshu.com/p/464058bdbc76 http://www.hankcs.com/progr ...
- 【Leetcode-easy】ZigZag Conversion
思路1:String[numRow]行字符串数组.读取原始字符串每一个字符,设置行变量 nrow和行标志位flag(向下一行为1或向上一行为-1).将该字符连接到数组中对应的行字符串,同时nrow+= ...
- 使用vscode写typescript(node.js环境)起手式
动机 一直想把typescript在服务端开发中用起来,主要原因有: javascript很灵活,但记忆力不好的话,的确会让你头疼,看着一月前自己写的代码,一脸茫然. 类型检查有利有敝,但在团队开发中 ...
- Object.create用法
用法: Object.create(object, [,propertiesObject]) 创建一个新对象,继承object的属性,可添加propertiesObject添加属性,并对属性作出详细解 ...
- loader与plugin,module与chunk,compiler与compilation
loader将各类型的文件转为webpack能处理的有效模块(module) 插件处理范围更广的任务,例如打包优化.压缩等 module程序的离散功能块,一个文件对应一个module chunk若干m ...