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

news2024/11/15 12:53:48

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>