WPF学习之窗体布局

StackPanel 堆栈式布局，子控件按顺序排列

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200" Orientation="Vertical">
            <Button Content="Button1" Height="20" Margin="2" Name="button1" Width="198" />
            <Button Content="Button2" Height="20" Margin="2" Name="button2" Width="198" />
            <Button Content="Button3" Height="20" Margin="2" Name="button3" Width="198" />
            <Button Content="Button4" Height="20" Margin="2" Name="button4" Width="198" />
        </StackPanel>
    </Grid>
</Window>

在这里插入图片描述
这里的横竖布局看的还是Orientation 注意，Stack默认垂直排列，而Wrap默认水平

WrapPanel布局类似Stack 但是子控件超出容器范围后会自动换行；

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel Height="271"  HorizontalAlignment="Left" Margin="12,10,0,0" Name="wrapPanel1" VerticalAlignment="Top" Width="472">
            <Button Content="Button1"  Name="button1"  />
            <Button Content="Button2"  Name="button2"  />
            <Button Content="Button3"  Name="button3"  />
            <Button Content="Button4"  Name="button4"  />
        </WrapPanel>
    </Grid>
</Window>

DockPanel 依赖属性 Dock，枚举类型，控制停靠方向。常配合控件的水平/垂直排列方式使用

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DockPanel Height="236" HorizontalAlignment="Right" Margin="22,22,0,0"  Name="dockPanel1" VerticalAlignment="Top" Width="435">
            <Button Content="Button1"  VerticalAlignment="Bottom" Height="20" Name="button1" Width="70" DockPanel.Dock="Bottom"/>
            <Button Content="Button2" HorizontalAlignment="Left" Height="20" Name="button2" Width="70" DockPanel.Dock="Left"/>
            <Button Content="Button3" HorizontalAlignment="Right" Height="20" Name="button3" Width="70" DockPanel.Dock="Right"/>
            <Button Content="Button4" VerticalAlignment="Top" Height="20" Name="button4" Width="70" DockPanel.Dock="Top" />
        </DockPanel>
    </Grid>
</Window>
但是这个我有地方不是很清楚，如果有大神看到了希望给我留言，这里的button4为什么我什么位置都不设置，他会定死在中间移动不动，只受配件水平垂直调控；

在这里插入图片描述

WPF学习之窗体布局

猜你喜欢