wpf布局基础

# Grid

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <!-- 定义第一行 -->
        <RowDefinition
            Height="auto"
        />
        <!--
            Height(行高):
                - auto:根据内容元素自动设置行高
                - 100:设置行高为100
                - 2*: 第一行的高度就是第二行的2倍
        -->
        <!-- 定义第二行 -->
        <RowDefinition/>
    </Grid.RowDefinitions>

    <!-- 定义列 -->
    <Grid.ColumnDefinitions>
        <!-- 定义第一列 -->
        <ColumnDefinition/>
        <!-- 定义第二列 -->
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- 默认放在第一行第一列 -->
    <Button Background="Red"/>
    <!-- 将其放在第二列 -->
    <Button Background="Green" Grid.Column="1"/>
    <!-- 第二行第一列 -->
    <Button Background="Yellow" Grid.Row="1"/>
    <!-- 第二行第二列 -->
    <Button Background="Blue" Grid.Column="1" Grid.Row="1"/>
</Grid>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Grid内容元素常用属性：

Grid.Column="1": 指定第几列，默认0也就是第一列
Grid.Row="1": 指定第几行，默认0也就是第一行
Grid.ColumnSpan="2": 跨2列
Grid.RowSpan="2": 跨2行

# StackPanel

类似于css的flex不换行，内容居中排列，移除截断隐藏

<StackPanel Orientation="Horizontal">
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
</StackPanel>

1
2
3
4
5
6

Orientation: 排列方式，Horizontal水平排列，Vertical垂直排列默认。

# WrapPanel

类似于css的flex横向自动换行，靠边排列

<WrapPanel Grid.Row="1">
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
    <Button Width="100" Height="40" Content="button1"/>
</WrapPanel>

1
2
3
4
5
6
7

Orientation: 排列方式，Horizontal水平排列默认，Vertical垂直排列。

# DockPanel

<DockPanel LastChildFill="False">
    <Button Width="100" Height="40" DockPanel.Dock="Left" />
    <Button Width="100" Height="40" DockPanel.Dock="Top"  />
    <Button Width="100" Height="40" DockPanel.Dock="Right"  />
    <Button Width="100" Height="40" DockPanel.Dock="Bottom"  />
</DockPanel>

1
2
3
4
5
6

默认是从左到右排列，最后一个元素填充搜索位置，设置LastChildFill="False"让最后一个元素不填充所有位置。

DockPanel.Dock="Left": 用来设置元素的对齐位置，默认左对齐，相当于position:relative;left:0;

# UniformGrid

相当于固定均分的网格布局，如果不指定Column或Row，将会根据元素的个数自动定义行和列。

<UniformGrid Columns="3" Rows="3">
    <Button/>
    <Button/>
    <Button/>
    
    <Button/>
    <Button/>
    <Button/>
    
    <Button/>
    <Button/>
    <Button/>
</UniformGrid>

1
2
3
4
5
6
7
8
9
10
11
12
13

#wpf

上次更新: 2023/12/06, 22:57:57