当前位置：首页 > news >正文

【WPF】WPF学习之【二】布局学习

news 来源：原创 2024/9/20 13:40:07

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>