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学习笔记 系列汇总 一 ...
随机推荐
- 用Newtonsoft将json串转为对象的方法(详解)
首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq) ...
- 补充ajax分页的代码
1.主页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 九度OJ 1082:代理服务器 (DP)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1871 解决:574 题目描述: 使用代理服务器能够在一定程度上隐藏客户端信息,从而保护用户在互联网上的隐私.我们知道n个代理服务器的IP地 ...
- iOS 流布局 UICollectionView使用(简单使用)
简介 UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似.简单来说,UICollectionView是比UI ...
- 题解 P3372 【【模板】线段树 1】
发一篇不需要O2就能过的分块. 基本思路: 分块的思路,大段维护,小段朴素. 维护几个数组: 区块\(block[maxn]\) 懒标记\(tag[maxn]\) 真实数据\(data[maxn]\) ...
- JS dom最常用API
//document方法: var cont = document.getElementByIdx_x('cont'); //className给标签添加class cont.classN ...
- Javascript代码收集
1.模仿jquery each 原文地址 function each(obj, fn){ var i; if(Object.prototype.toString.call(obj) === '[obj ...
- PopupWindow 实现 查看所有手机应用弹出框
public class MainActivity extends Activity implements OnItemLongClickListener, OnClickListener { pri ...
- 前端基础之---css
css 介绍 css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...
- 【HDU2050】折线分割平面
Position Solution 2×n^2-n+1 证明见分割问题 Code // This file is made by YJinpeng,created by XuYike's black ...