WPF基础入门-Class1-布局

WPF基础入门

Class1:布局

1、Grid行列结构
*:按比例设置宽高,eg:0.6*

<Grid>
        <!--两行两列-->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>

2、Grid.Column、Grid.ColumnSpan、Grid.Row、Grid.RowSpan的行列选中,在<Grid.ColumnDefinitions>同目录下:

<Button Width="100" Height="50" Name="SB" Content="SB"></Button>
        <Border Grid.RowSpan="2" Grid.Column="0" Background="YellowGreen"></Border>
        <Border Grid.Row="0" Grid.Column="1" Background="AntiqueWhite"></Border>
        <!--<Border Grid.Row="1" Grid.Column="0" Background="Aqua"></Border>-->
        <Border Grid.Row="1" Grid.Column="1" Background="Aquamarine"></Border>

在这里插入图片描述
3、其他容器:
StackPanle:
Orientation=排列方向,超出的不会自动换行,会被隐藏

<StackPanel Orientation="Horizontal">
            <Button Width="100" Height="40" Click="Button_Click"></Button>
            <Button Width="100" Height="40"></Button>
            <Button Width="100" Height="40"></Button>
            <Button Width="100" Height="40"></Button>
            <Button Width="100" Height="40"></Button>
        </StackPanel>

在这里插入图片描述

WrapPanel
默认水平排列 ,超出的自动排列

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

在这里插入图片描述

DockPanel
可控制靠边

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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43622870/article/details/132426850