WPF用于布局的6大面板

目录

一、StackPanel

二、WrapPanel

三、DockPanel

四、Canvas

五、Grid

六、UniformGrid

---

一、StackPanel

        按照水平或垂直方向依次排列其子元素。子元素可以通过设置属性来控制其在面板中的对齐方式。

<StackPanel Orientation="Vertical">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
</StackPanel>

        Orientation：指定子元素的排列方向，可以是"Vertical"（垂直）或"Horizontal"（水平）。

二、WrapPanel

        按照水平或垂直方向依次排列其子元素，当空间不足时会自动换行。子元素可以根据需要进行自动换行或紧凑排列。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel Example" Height="300" Width="400">
    <WrapPanel>
        <Button Content="Button 1" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 2" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 3" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 4" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 5" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 6" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 7" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 8" Width="100" Height="30" Margin="5"/>
    </WrapPanel>
</Window>

三、DockPanel

        允许将子元素停靠到面板的不同位置，如顶部（Top）、底部（Bottom）、左侧（Left）、右侧（Right）以及中心（默认）。子元素可以通过设置属性Dockpanel.Dock来指定其停靠位置。

<DockPanel>
    <Button Content="Button 1" DockPanel.Dock="Top" />
    <Button Content="Button 2" DockPanel.Dock="Bottom" />
    <Button Content="Button 3" />
</DockPanel>

四、Canvas

        允许通过指定子元素的特定坐标来精确控制它们的位置。可以使用Canvas.Left和Canvas.Top属性来定位子元素。Canvas.Left：指定子元素相对于画布左侧的距离。Canvas.Top：指定子元素相对于画布顶部的距离。

<Canvas>
    <Button Content="Button 1" Canvas.Left="50" Canvas.Top="50" />
    <Button Content="Button 2" Canvas.Left="150" Canvas.Top="100" />
</Canvas>

五、Grid

        将子元素划分为行和列的网格，可以以网格单元的形式放置子元素，根据需要定义行和列的大小，以及子元素的位置。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Button Content="Button 1" Grid.Row="0" Grid.Column="0" />
    <Button Content="Button 2" Grid.Row="1" Grid.Column="0" />
    <Button Content="Button 3" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" />
</Grid>

Grid.RowDefinitions：定义行的高度。
Grid.ColumnDefinitions：定义列的宽度。
Grid.Row：指定子元素所在的行。
Grid.Column：指定子元素所在的列。
Grid.RowSpan：指定子元素跨越的行数。

六、UniformGrid

        将子元素平均分布在网格中的所有单元，无论网格的大小如何。可以指定网格的行数、列数以及子元素在网格中的对齐方式。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGrid Example" Height="300" Width="400">
    <UniformGrid Rows="2" Columns="3">
        <Button Content="Button 1" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 2" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 3" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 4" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 5" Width="100" Height="30" Margin="5"/>
        <Button Content="Button 6" Width="100" Height="30" Margin="5"/>
    </UniformGrid>
</Window>

        在示例中，创建了一个UniformGrid，并将其分为2行和3列。然后在UniformGrid中放置了6个按钮，UniformGrid会自动将这些按钮均匀地分布在网格中的单元格中。