WPF学习：布局和Panel类

一.WPF布局

WPF的Window只能布置一个元素。想放置更多的元素，需要添加一个容器（如Panel类的容器）。
注：
造成这一限制的原因是Window类继承至ContentControl类。

1）原则：

1.不要显式的设定元素的尺寸。元素应该根据内容适当改变尺寸。（例）
2.不要使用屏幕坐标制定元素位置。元素应该根据尺寸，所在的容器信息来调整位置。这使得增加元素的时候具有弹性。
3.相似，相近元素嵌套布局。
4.布局容器的子元素共享可用的空间。

例子（TODO）

2）布局过程

1.测量
询问子元素的尺寸。
2.排列
排列和裁剪。

二.布局容器

所有的布局容器继承至System.WIndows.Controls.Panel抽象类。

1）面板容器分类

2）面板属性

3）布局属性

布局属性是所有空间和面板都有的属性。
注：某些布局容器可以给子元素提供属性。如grid分区后，子元素有Row和Column属性。

三.杂项

1）HorizontalAlignment和VerticalAlignment

他们都有四个值：
Center：居中
Left：居左
Right：居右
Stretch：将此方向铺满。

HorizontalAlignment="Stretch"//水平方向是占满的。下图的Button3和4

注：
这里的StackPanel默认HorizontalAlignment和VerticalAlignment都是Stretch。

Margin

两种用法：

Margin = "5"//所有方向都是5
Margin = "1,2,3,4"//依次设置 左 上 右 下 的边距值。

Border

Border通常用于添加背景和边框，设置圆角，用于装饰。

注：BOrder属于装饰性元素（decorator），继承至System.Windows.COntrols.Decorator类。大多数的装饰元素用于特定的类，如Button的ButtonChrome元素；ListBoxChrome元素。

四.StackPanel

用于紧密的排列元素。不会换行。如下：

其中一些属性简介

五.WrapPanel

用于一行一行的设置元素，一行元素满了就开始新行继续。效果如下：

其中一些属性简介

六.DockPanel（港口面板）

如题，这个面板会让元素贴满某个边。
DockPanel会给予直接子元素DockPanel.Dock属性，来设置停靠的“港口”。

<DockPanel LastChildFill="True">//此属性如名
            <Button DockPanel.Dock="Bottom" Content="btn_1"/>
            <Button DockPanel.Dock="Left" Content="btn_2"/>
            <Button DockPanel.Dock="Top" Content="btn_3"/>
            <Button DockPanel.Dock="Right" Content="btn_4"/>
            <Button Content="btn_5"/>
        </DockPanel>

其中一些属性简介

七.Grid

Grid是属性十分强大的面板。

Grid属性

使用以下代码将Grid分为4个区。每个区都可以当做容器来使用。子元素可以使用索引选择放置的分区。
配合多种Panel使用可以进行复杂的区块构造。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        //定义完行和列后，就可以像矩阵一样使用元素
        <Button Grid.Column="0" Grid.Row="0" Content="btn"/>//使用索引
        <Button Grid.Column="1" Grid.Row="0" Content="btn_1"/>
        <Button Grid.Column="0" Grid.Row="1" Content="btn_2"/>
        <Button Grid.Column="1" Grid.Row="1" Content="btn_3"/>
    </Grid>

赋予子元素的属性

定义完行和列后，就可以像矩阵一样使用grid分区了。

Grid.Column="0" Grid.Row="0"//区块索引
//跨行或列的值，最小为1。
Grid.ColumnSpan="1" //在某行里，蔓延多个列
Grid.RowSpan="1"//在某列，蔓延多个行

分隔条

<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"/>
    </Grid>

注：分割条在上例中是被放在了一个列中。当然也可以和其他放在控件放在一起，也有分割作用。

尺寸模式

grid的行和列宽有3种尺寸模式：
绝对尺寸：

       <ColumnDefinition MinWidth="100"></ColumnDefinition>

自动设置尺寸：使得每行和每列的尺寸刚好够需要。

       <ColumnDefinition MinWidth="auto"></ColumnDefinition>

比例设置尺寸：按照比例设置

       <ColumnDefinition MinWidth="1*"></ColumnDefinition>
       <ColumnDefinition MinWidth="2*"></ColumnDefinition>

其中一些属性简介

    <Grid UseLayoutRounding="True"/>//开启舍入，在元素出现反锯齿混合模糊时使用。
    <Grid ShowGridLines="True"/>//展示分割线

共享尺寸组

使用如下。
在一个父grid中，放置2个小grid。
父grid设置 属性 IsShareSizeScope = “true”，指以下的grid可以共享尺寸；
第一个grid设置Row时，设置属性ShareSizeGroup = “Row”。
第二个以及后面的可以共享。列的共享也是一样的。

八.Canvas面板

用于在制定的地方放置元素。通常用于制作图表。
通过Canvas.Left，Right，Top，Buttom来设置其具体位置。

z顺序

当元素重叠时，设置z顺序来显示某个想要在前面显示的元素。
设置Canvas.ZIndex为正数，负数，0来排序。数值越大排在越前面。

InkCanvas

InkCanvas具有Top，Left，Buttom，Right等属性，可以用于子元素。但是InkCanvas不是派生至Canvas类，甚至不是派生至Panel，而是FrameworkElement类。
主要目的是用于手写输入。

<InkCanvas x:Name = "inkCanvas" Background="LightYellow" EditingMode="Ink">
	<Image x:Name-"Img" Source="office.jpg" InkCanvas.Top="10" InkCanvas.Left="10" Width="400" Height="300"/>
	</InkCanvas>