WPF WPF布局元素

WPF中的布局元素：

• Grid：网格。类似HTML中的Table。

• StackPanel：栈式面板。竖直或水平排成一条直线。

• Canvas：画布。绝对坐标定位，类似于Windows Form的布局。

• DockPanel：泊靠式面板。是具有停靠功能的布局控件，其内部控件根据附加属性指定停靠位置。

• WrapPanel：自动折行面板。排满一行自动折行，类似HTML中的流式布局。

综合实例链接：WPF综合实例

Gird(网格控件):

RowDefinitions : 拆分行，ColumnDefinitions：拆分列.

Grid.Column:指定所属行,Grid.Row :指定所属列；Grid.RowSpan:跨行数,Grid.ColumnSpan:跨列数.

指定行(列)的高度(宽度):

固定值：通过制定一个数值，如：Width="50" 。

自适应：通过Auto关键字指定，根据内部控件自适应。

平分值：通过 数字* 的格式指定，公式 = （总宽度 – 固定值 – 自适应） / *数量之和 * * 数量

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <!--未指明Grid.Column,Grid.Row,则默认其Grid.Column=0，Grid.Row=0-->
        <TextBlock Text="认识WPF布局元素"/>
        <Button Grid.Column="1" Grid.Row="0" Content="按键" Width="100" Height="30"/>
        <Rectangle Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Height="300" Width="80" Fill="LightBlue" />
    </Grid>

UniformGrid:在网格(网格中的所有单元格都具有相同的大小)中排列内容

StackPanel：

Orientation 排列方法，垂直还是水平:

• Horizontal :按照水平排列

• Vertical(默认) :按照垂直排列

FlowDirection 排列方向：

• LeftToRight(默认):从左向右排列

• RightToLeft:从右向左排列

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Height="50">
            <Button Content="1" Width="50"/>
            <Button Content="2" Width="50"/>
            <Button Content="3" Width="50"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="50" Grid.Column="1">
            <Button Content="1" Width="50"/>
            <Button Content="2" Width="50"/>
            <Button Content="3" Width="50"/>
        </StackPanel>
        <!--默认Orientation="Vertical"-->
        <StackPanel Width="60" Height="100" Grid.Row="1">
            <Button Content="1" Width="50"/>
            <Button Content="2" Width="50"/>
            <Button Content="3" Width="50"/>
        </StackPanel>
    </Grid>

Canvas:

用于定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素(如：Canvas.Left="25"),Canvas.Zindex表示Canvas内控件Z轴位置，数字越大越靠上(其他布局元素的控件设置Z轴位置使用Panel.Zindex)。

    <Canvas>
        <Ellipse Fill="Red"    Width="200" Height="100" Canvas.ZIndex="1" 
                Canvas.Left="65" Canvas.Top="45"/>
        <Rectangle Fill="Blue" Width="200" Height="200" Canvas.Left="200" Canvas.Top="100"/>
    </Canvas>

DockPannel:

停靠的长度或宽度计算顺序依次为左右上下中(如：DockPannel.Dock="Right"),最后一个控件的数量自适应剩余空间。

    <DockPanel>
        <Button DockPanel.Dock="Top" Background="Aqua">Top</Button>
        <Button DockPanel.Dock="Left" Background="Green">Left</Button>
        <Button DockPanel.Dock="Right" Background="Yellow">Right</Button>
        <Button DockPanel.Dock="Bottom" Background="Pink">Bottom</Button>
        <Button Background="Orange">Last</Button>
    </DockPanel>

WrapPanel：

自动折行面板，WrapPanel 跟StackPanel有点类似，不同之处在于其根据内部控件大小自动换行。