WPF几种常用布局方式-CFANZ编程社区

一、Grid(网格 ***)

 (*代表重要程度，一颗星代表了解就行，三颗星代表重要)

类似于html中的Table标签

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand"> 按钮1 </Button>
        <Button Grid.Row="0" Grid.Column="1" Background="Red" Foreground="White" FontSize="20" Cursor="Hand">按钮2</Button>
        <Button Grid.Row="1" Grid.Column="0" Background="Blue" Foreground="White" FontSize="20" Cursor="Hand">按钮3</Button>
        <Button Grid.Row="1" Grid.Column="1" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand">按钮4</Button>
    </Grid>

在这里插入图片描述

二、StackPanel(***)

<StackPanel Orientation="Vertical">
        <Button  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand">按钮1</Button>
        <Button  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand">按钮2</Button>
        <Button  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand">按钮3</Button>
        <Button  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand">按钮4</Button>
    </StackPanel>

在这里插入图片描述

三、WrapPanel(*)

类似于充数的，随着页面的大小位置而改变

<WrapPanel>
      
        <Button Height="100" Width="100" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" Margin="10">按钮1</Button>
        <Button Height="100" Width="100" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" Margin="10">按钮2</Button>
        <Button Height="100" Width="100" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" Margin="10">按钮3</Button>
        <Button Height="100" Width="100" Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" Margin="10">按钮4</Button>
    </WrapPanel>

在这里插入图片描述

四、DockPanel(*)
停靠栏，上下左右，中间

  <DockPanel>
        <Button DockPanel.Dock="top"  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" >按钮1</Button>
        <Button  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" >按钮2</Button>
        <Button DockPanel.Dock="Bottom"  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" >按钮3</Button>
        <Button DockPanel.Dock="Right"  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" >按钮4</Button>
        <Button DockPanel.Dock="Top"  Background="Orange" Foreground="White" FontSize="20" Cursor="Hand" >按钮5</Button>
        
    </DockPanel>

在这里插入图片描述