1、Canvas
支持用显式坐标定位元素,可以用Left,Right,Top,Bottom来定位子元素
元素不能同时设置2个以上的Canvas属性
在子元素中定位边角:Canvas.Left="10"
默认为left=0,top=0,即靠左上角
2、StackPanel
会顺序对它的子元素进行排列
Orientation:排列顺序(横竖):Horizontal/Vertical(默认)
FlowDirection:元素顺序:RightToLeft/LeftToRight
Margin:控制元素与StackPanel,元素和元素之间的距离
HorizontalAlignment:
VerticalAlignment:
LayoutTransform:旋转后拉拉升元素原空间
3、WrapPanel
当没有足够的空间来存放子元素时,会把子元素封装在行和列中。
Orientation:排列顺序(横竖):Horizontal(默认)/Vertical
ItemHeight:所有子元素一致的高度,每个子元素填充的高度取决于自身,子元素高度比ItemHeight高的,都将被拦截,宽度同
ItemWidth:所有子元素一致的宽度
部分属性同StackPanel
4、DockPanel
支持让元素简单地停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或者高度
支持让一个元素填充其他已停靠元素没有占用的剩余空间
Dock:Left(默认),Right,Top,Bottom(控制子元素的停靠)
LastChildFill:false/true(默认)(最后一个子元素填充所有剩余空间)
5、Grid
在一个多行、多列的表中排列子元素,提供多种特性来有效地控制行和列
例:
- <Grid>
- <Grid.RowDefinitions>
- <RowDefinition/>
- <RowDefinition/>
- <RowDefinition/>
- <span style="font-size:16px; "></span><pre name="code" class="html"> <RowDefinition/></pre> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White" HorizontalContentAlignment="Center">
- Start Page </Label> <GroupBox Grid.Row="1" Grid.Column="0" Background="GreenYellow" Header="Recent Projects">No.1</GroupBox> <GroupBox Grid.Row="2" Grid.Column="0" Background="GreenYellow" Header="Recent Projects">No.2</GroupBox> <GroupBox Grid.Row="3" Grid.Column="0"
- Background="GreenYellow" Header="Recent Projects">No.3</GroupBox> <GroupBox Grid.Row="1" Grid.Column="1" Background="Aquamarine" Header="Online Articles"> <ListBox> <ListBoxItem>One</ListBoxItem> <ListBoxItem>two</ListBoxItem> <ListBoxItem>three</ListBoxItem>
- <ListBoxItem>four</ListBoxItem> </ListBox> </GroupBox> </Grid><p></p>
- <pre></pre>
- <p></p>
- <p><span style="font-size:16px"><img src="http://hi.csdn.net/attachment/201202/24/0_1330065308e7N7.gif" alt=""><br>
- </span></p>
- <p><span style="font-size:16px"><br>
- </span></p>
- <p><span style="font-size:16px">使用Grid,首先要定义行和列:</span></p>
- <p><span style="font-size:16px"><Grid.RowDefinitions><br>
- <RowDefinition/> // 行<br>
- </Grid.RowDefinitions><br>
- </span></p>
- <p><span style="font-size:16px"><Grid.ColumnDefinitions><br>
- <ColumnDefinition/> // 列<br>
- </Grid.ColumnDefinitions><br>
- </span></p>
- <p><span style="font-size:16px">然后使用Grid.Row和Grid.Column定位子元素</span></p>
- <p><span style="font-size:16px">RowSpan/ColumnSpan:合并行、列,默认为1</span></p>
- <p><span style="font-size:16px">改变行和列的尺寸:绝对尺寸(Absolute sizing)、自动尺寸(Autosizing)、比例尺寸(Proportional sizing)</span></p>
- <p><span style="font-size:16px">GridSplitter:交互改变尺寸,必须有一个显示的Width或者Height</span></p>
- <p><span style="font-size:16px">SharedSizeGroup:共享属性 先设置IsSharedSizeScope属性<Grid IsSharedSizeScope="true">,然后在定义行列数时加上SharedSizeGroup="MyGroupNmae",需要共享属性的则都加上此属性</span></p>