WPF学习笔记02_布局

布局原则

WPF窗口只能包含单个元素。如果要放置多个元素，需要放置一个容器，然后在容器中添加元素。

• 不应显示的设定元素的尺寸
• 不应该使用屏幕坐标指定元素的位置
• 布局容器的子元素”共享“可用的空间
• 可嵌套的布局容器

前两个是为了使得WPF程序更加灵活，在不同的设备上能灵活适应，能处理动态内容。

总的目标都是为了创建更好更灵活的用户界面。

StackPanel面板

简单地在单行或单列中以堆栈方式放置其子元素。

默认按照自上而下地顺序排列元素。通过设置Orientation属性，可以更改排列方式。水平：Horizontal。

布局属性

名称	说明
HorizontalAlignment	水平方向定位
VerticalAlignment	垂直方向上定位
Margin	四周空间
MinWidth和MinHeight	最小尺寸
MaxWidth和MaxHeight	最大尺寸
Width和Height	显示设置尺寸

这些属性从FrameworkElement基类继承而来。

Border控件

包含一段嵌套内容（布局面板）。为其添加背景或在其周围添加边框。

名称	说明
Background	背景
BorderBrush和BorderThickness	边框颜色和边框宽度
CornerRadius	圆角。值越大，圆角效果越明显
Padding	在边框和内部的内容间添加空间

WrapPanel

在可能的空间中，以一次一行或一列的方式布局控件。

WrapPanel.Orientation属性设置为：

Horizontal：空间从左向右进行排列，再在下一行中排列。

Vertical:在多列中放置元素

DockPanel

沿着一条外边缘来拉伸所包含的控件。

可以通过Dock附加属性来设置子元素停靠的边。属性又Left、Right、Top和Bottom。

<DockPanel LastChildFill="True">
	<Button DockPanel.Dock="Top">Top Button</Button>
</DockPanel>

LastChildFill属性:是否将最后一个元素占满剩余的空间

Grid面板

WPF中功能最强大的布局容器。

创建步骤

1. 选择希望使用的行和列的数量。

2. 为每个包含的元素指定恰当的行和列。

   创建两行三列

<Grid ShowGridLines="True">
        <Grid.RowDefinitions> <!--描述行-->
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions> <!--描述列-->
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>

为在单元格中放置各个元素，需要使用Row和Column附加属性。这两个属性值都是从0开始的，和数组下标一样。

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions> <!--描述行-->
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions> <!--描述列-->
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Border Grid.Row="1" Grid.Column="0" Margin="5" Padding="5" Background="LightBlue" BorderBrush="SteelBlue" BorderThickness="3,5,3,5"
             CornerRadius="3">
            <StackPanel  Margin="3">
                <Label Margin="3" HorizontalAlignment="Center">
                    A Button Stack
                </Label>
                <Button Margin="3" MaxWidth="200" MinWidth="100">Button 1</Button>
                <Button Margin="3" MaxWidth="200" MinWidth="100">Button 2</Button>
                <Button Margin="3" MaxWidth="200" MinWidth="100">Button 3</Button>
                <Button Margin="3" MaxWidth="200" MinWidth="100">Button 4</Button>
            </StackPanel>
        </Border>

        <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
        <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
        <Button Grid.Row="1" Grid.Column="2">Bottom Right</Button>
        <Button Grid.Row="1" Grid.Column="1">Bottom Middle</Button>

    </Grid>

这两个属性不指定时默认为0。

布局舍入

按比例设置尺寸时可能会出现边缘模糊的问题，将布局容器的UseLayoutRounding属性设置为true即可解决。

跨行和跨列

使用 RowSpan和ColumnSpan进行

跨列填充

<Button Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">Middle Left</Button>

Canvas面板

它允许使用精确的坐标放置元素。

在Canvas中定位元素，需要设置Canvas.Top和Canvas.Left附加属性。

可使用Width和Height属性明确设置子元素的尺寸。