WPF布局学习
- 常用布局
- Grid网格布局
- StackPanel 布局
- Canvas
- DockPanel布局
- WrapPanel布局
常用布局
1、StackPanel: 学习如何使用StackPanel进行垂直和水平布局。
2、Grid: 掌握Grid的网格布局技术。
3、Canvas: 了解Canvas的绝对定位布局。
4、DockPanel: 学习DockPanel的停靠布局方式。
5、WrapPanel: 了解WrapPanel的自动换行布局。
Grid网格布局
1、作用
作用:Grid布局的作用可以理解为拆分网格布局。
2、图片示例
3、代码示例
以下的示例中的属性也是该布局常用的几种属性。
<Grid><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Beige">这是跨单元格示例 </Button><Button Grid.Row="3" Grid.Column="3">指定单元格</Button><Button Grid.IsSharedSizeScope="True" Background="Aquamarine">共享单元格</Button></Grid>
StackPanel 布局
1、作用:将布局拆分为水平或者垂直的布局
2、图片示例
3、代码示例
Orientation(布局方式):Vertical(垂直堆叠)、Horizontal(水平堆叠)
HorizontalAlignment(对齐方式):LEFT、right、center、top、bottom<!--<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch"><Button >从上到下</Button></StackPanel>--><StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"><Button>从左到右</Button></StackPanel>
Canvas
1、作用:绝对布局
2、图片示例
3、代码示例
<Canvas Background="AliceBlue"><!--绝对定位布局--><Button Canvas.Left="50" Canvas.Bottom="20">Canvas1 </Button><Button Canvas.Left="50" Canvas.Bottom="50">Canvas2 </Button></Canvas>
DockPanel布局
1、作用:停靠布局
2、图片示例
3、代码示例
<DockPanel HorizontalAlignment="Left" LastChildFill="False" ><!--按照控件添加顺序,自动排序并停靠--><Button Width="80" Height="50">DockPanel3</Button><Button Width="80" Height="50" >DockPanel1</Button><Button Width="80" Height="50" DockPanel.Dock="Right">DockPanel2</Button></DockPanel>
WrapPanel布局
1、作用:自动换行布局
2、图片示例
3、代码示例
<WrapPanel><!--自动换行布局--><Button Width="400" Height="50" > wrapPanel 1 </Button><Button Width="400" Height="50" > wrapPanel 2 </Button><Button Width="400" Height="50" > wrapPanel 3 </Button></WrapPanel>