WPF 布局

WPF布局原则

WPF窗口只能包含单个元素，为在WPF窗口中放置多个元素并创建更贴近使用的用户界面，需要在窗口上放置一个容器，然后在这个容器中添加其他元素

遵循以下几条重要原则

不应显式设定元素（如控件）的尺寸，元素应该可以改变尺寸以适合他们的内容。如：当添加更多的文本时按钮应当能够扩展。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围

不应使用屏幕坐标指定元素的位置。元素应当由他们的容器根据它们的尺寸，顺序以及（可选的）其他特定于具体布局容器的信息进行排列。如果需要在元素之前添加空白间，可使用Margin属性

布局容器的子元素“共享”可用空间，如果空间允许，布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸，它们还会向一个或多个子元素分配多余空间。

可嵌套的布局容器。Grid面板可包含其他布局容器，包含的这些容器以更小的分组排列元素

布局过程

WPF布局包括两个阶段，测量阶段和排列阶段

在测量阶段，容器遍历所有子元素，并询问子元素它们所期望的尺寸。

在排列阶段，容器在合适的位置放置子元素

布局容器

 

核心布局面板

StackPanel面板进行简单布局

该面板简单地在单行或单列中以堆栈形式放置子元素

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Label>
            A Button Stack
        </Label>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
        <Button>Button 4</Button>
    </StackPanel>
</Window>

默认情况下，StackPanel面板按自上而下的顺序排列元素，使每个元素的高度适合它的内容

设置Orientation属性，面板也可用于水平排列元素，这样做可能导致一些元素不适应

实际上布局面板支持一小组布局属性

<Label HorizontalAlignment="Center">
            A Button Stack
</Label>
<Label HorizontalAlignment="Left">
            A Button Stack
</Label>
<Label HorizontalAlignment="Right">
            A Button Stack
</Label>
<Label HorizontalAlignment="Stretch">
            A Button Stack 
</Label>

Stretch不同之处

　

 同理：

<Button Margin="10">Button 1</Button>

边距

Border空间

Border类只能包含一段嵌套内容（通常是布局面板）

<Border Margin="5" Padding="5" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3" VerticalAlignment="top">
    <StackPanel>
        <Button Margin="3">
                One
        </Button>
    </StackPanel>
</Border>    

BorderThickness="3,5,3,5"表示蓝色的边框厚度

WrapPanel面板

WrapPanel面板在可能的空间中，以一次一行或一列的方式布置控件，默认情况下WrapPanel.Orientation属性为Horizontal，控件从左向右排列，Vertical同上

<WrapPanel Margin="3">
        <Button VerticalAlignment="Top">Top Button</Button>
        <Button MinHeight="60">Tall Button 2</Button>
        <Button VerticalAlignment="Bottom">Bottom Button</Button>
        <Button>Stretch Button</Button>
        <Button VerticalAlignment="Center">Centered Button</Button>
</WrapPanel>

DockPanel面板

<DockPanel LastChildFill="True">
    <Button DockPanel.Dock="Top">Top Button</Button>
    <Button DockPanel.Dock="Bottom">Bottom Button</Button>
    <Button DockPanel.Dock="Left">Left Button</Button>
    <Button DockPanel.Dock="Right">Right Button</Button>
    <Button>Remaining Space</Button>
</DockPanel>

Grid面板

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition>

        </RowDefinition>
        <RowDefinition>

        </RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition>

        </ColumnDefinition>
        <ColumnDefinition>

        </ColumnDefinition>
    </Grid.ColumnDefinitions>
</Grid>

调整行和列

Grid面板支持一下三种设置尺寸模式

绝对设置尺寸方式

自动设置尺寸方式。每行和每列的尺寸刚好满足需要

按比例设置尺寸方式。按比例分割每一行每一列

布局舍入

比如有175个像素，分成两部分，而这两部分没办法细分

跨行和列

可以使用RowSpan和ColumnSpan这两个属性

分割窗口

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
    </Grid>

共享尺寸组

 

UniformGrid面板

<UniformGrid Rows="2" Columns="2">
        <Button>Top Left</Button>
        <Button>Top Right</Button>
</UniformGrid>

 Canvas面板

需要设置Canvas.Left和Canvas.Top附加属性

ZIndex

可以通过这个函数来提高层次级别，因为具有更高ZIndex值的元素始终显示在ZIndex的元素上面

InkCanvas

主要用于手写笔输入