04-使用StackPanel堆栈面板进行简单布局

WPF的布局原则

给控件设置高度和宽度的情况下 如果窗体变化 Grid是不会跟着变化的

<Grid Background="#FF8F3636" Margin="20">
</Grid>Code language: HTML, XML (xml)

上面没有设置高度 和宽度 只是设置了Margin 那么会随着窗口变化 而变化

如果我们给了width 则不会随着windows变化而变化

<Grid Background="#FF8F3636" Width="200" Margin="20">
</Grid>Code language: HTML, XML (xml)

不应该使用屏幕像素来指定

应该使用Margin等来设置距离（左 上 右 下）

嵌套的进行布局 通常Grid 里面嵌套其他的布局容器

进行简单的布局

我们在Grid里面添加一个StackPanel面板

为了不影响 我们添加一个新的windows的xaml

Border控件的使用

<StackPanel Orientation="Horizontal" Margin="10">
    <Button x:Name="button" Content="Button" Width="80" Height="30" HorizontalAlignment="Left"/>
    <Button x:Name="button1" Content="Button1"  Width="80" Height="30" HorizontalAlignment="Right"/>
    <Button x:Name="button2" Content="Button2"  Width="80" Height="30"/>
    <Button x:Name="button3" Content="Button3" Width="80" Height="30"/>
    <Button x:Name="button4" Content="Button4" HorizontalAlignment="Left" Width="80" Height="30"/>
    <Button x:Name="button5" Content="Button5" Width="80" Height="30" VerticalAlignment="Top"/>
</StackPanel>Code language: HTML, XML (xml)

我们可以通过设置Grid的高度和宽度来控制Grid的大小，但是这样 随着窗口的变动 Grid是不会变化的

<Grid Width="100" Height="200" Background="Black">
</Grid>Code language: HTML, XML (xml)

我们应该通过设置Margin来控制面板的大小

<Grid Margin="20,30,10,60">
</Grid>Code language: HTML, XML (xml)

在Grid里面 添加一个StackPanel

StackPanel 是堆栈面板 它约束它里面的控件 只能按顺序排序 可以横排 可以竖排

<Grid Margin="20,30,10,60">
    <StackPanel HorizontalAlignment="Left" Height="100" Margin="70,30,0,0" VerticalAlignment="Top" Width="100"/>
</Grid>Code language: HTML, XML (xml)

然后我们在StackPanel里面 添加控件

<Grid Margin="20,30,10,60">
    <StackPanel HorizontalAlignment="Left" Height="100" Margin="70,30,0,0" VerticalAlignment="Top" Width="100">
        <Label x:Name="label" Content="Label"/>
        <Button x:Name="button" Content="Button"/>
        <Button x:Name="button1" Content="Button"/>
        <Button x:Name="button2" Content="Button"/>
    </StackPanel>
</Grid>Code language: HTML, XML (xml)

我们可以看到 我们的这些控件 都被约束在一条线上面

通过设置Orientation=”Horizontal” 可以设置水平排 还是垂直排

另外 StackPanel里面的控件 还可以设置HorizontalAlignment=”Left” 来进行水平对其

当然 页可以进行 垂直对其

还可以设置宽度 <Button x:Name="button2" Content="Button2" Width="20"/>等属性

还可以设置 MinWidth 等最小 最大的宽度