• 课时:25
  • 访问:1823
  • 时长:00:22:21
  • 日期:2018-03-26 11:59

WPF的布局原则

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

    <Grid Background="#FF8F3636" Margin="20">
    </Grid>

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

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

    <Grid Background="#FF8F3636" Width="200" Margin="20">
    </Grid>

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

应该使用Margin等来设置距离(左 上 右 下)

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

进行简单的布局

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

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

Border控件的使用

图片3.png

    <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>

图片4.png

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

    <Grid Width="100" Height="200" Background="Black">
    </Grid>

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

    <Grid Margin="20,30,10,60">    
    </Grid>

在Grid里面 添加一个StackPanel

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

    <Grid Margin="20,30,10,60">
        <StackPanel HorizontalAlignment="Left" Height="100" Margin="70,30,0,0" VerticalAlignment="Top" Width="100"/>
    </Grid>

然后我们在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>

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

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

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

当然 页可以进行 垂直对其

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


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