WPF学习之路（十一）布局

布局

Canvas

基本面板，传统布局方式，支持与设备无关的坐标定位元素

<Border BorderThickness="2" BorderBrush="Black" Margin="5">
        <Canvas>
            <Button Canvas.Left="20" Canvas.Top="50" Content="Left=20,Top=50" />
            <Button Canvas.Right="20" Canvas.Bottom="50" Content="Right=20,Bottom=50" />
        </Canvas>
    </Border>

效率高，适合矢量绘图

StackPanel

用于顺序垂直或水平排列子元素

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="5">
        <StackPanel>
            <Button Content="1" />
            <Button Content="2" />
            <Button Content="3" />
            <Button Content="4" />
        </StackPanel>
    </Border>
    <Border Grid.Row="1" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="5">
        <StackPanel Orientation="Horizontal">
            <Button Content="1" />
            <Button Content="2" />
            <Button Content="3" />
            <Button Content="4" />
        </StackPanel>
    </Border>
    <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="5">
        <StackPanel FlowDirection="RightToLeft">
            <Button Content="1" />
            <Button Content="2" />
            <Button Content="3" />
            <Button Content="4" />
        </StackPanel>
    </Border>
    <Border Grid.Row="1" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="5">
        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button Content="1" />
            <Button Content="2" />
            <Button Content="3" />
            <Button Content="4" />
        </StackPanel>
    </Border>
</Grid>

 WrapPanel

 与StackPanel类似，当没有空间放置子元素时会自动放到下一行或下一列

<Border BorderThickness="2" BorderBrush="Black" Margin="5">
    <WrapPanel ItemHeight="120">
        <Button Content="1" MinWidth="50" />
        <Button Content="2" MinWidth="100" />
        <Button Content="3" MinWidth="150" />
        <Button Content="4" MinWidth="200" />
    </WrapPanel>
</Border>

 布局会随着窗口大小的改变一起改变

DockPanel

 将元素放到面板的某一个边上，拉伸元素填满高度或者宽度，可以设置是否填充剩余空间

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Margin="5">
        <Button DockPanel.Dock="Left" Content="1" />
        <Button DockPanel.Dock="Top" Content="2" />
        <Button DockPanel.Dock="Right" Content="3" />
        <Button DockPanel.Dock="Bottom" Content="4" />
        <Button DockPanel.Dock="Left" Content="5" />
        <Button DockPanel.Dock="Top" Content="6" />
        <Button DockPanel.Dock="Right" Content="7" />
        <Button DockPanel.Dock="Bottom" Content="8" />
    </DockPanel>
    <DockPanel Grid.Row="1" Margin="5" LastChildFill="False">
        <Button DockPanel.Dock="Left" Content="1" />
        <Button DockPanel.Dock="Top" Content="2" />
        <Button DockPanel.Dock="Right" Content="3" />
        <Button DockPanel.Dock="Bottom" Content="4" />
        <Button DockPanel.Dock="Left" Content="5" />
        <Button DockPanel.Dock="Top" Content="6" />
        <Button DockPanel.Dock="Right" Content="7" />
        <Button DockPanel.Dock="Bottom" Content="8" />
    </DockPanel>
</Grid>

Grid

 最常用且功能强大的布局（之前的实例中已经有过使用），允许在一个列表中放置子元素

常用属性 ColumnRowColumnSpanRowSpan

尺寸：绝对尺寸、自动尺寸、比例尺寸

<Grid Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Content="Width=100" />
        <Button Grid.Column="1" Content="Width=*" />
    </Grid>
    <Grid Grid.Row="1" Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Content="Width=100" />
        <Button Grid.Column="1" Content="Width=*" />
        <Button Grid.Column="2" Content="Width=*" />
        <Button Grid.Column="3" Content="Width=*" />
    </Grid>
    <Grid Grid.Row="2" Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Content="Width=100" />
        <Button Grid.Column="1" Content="Width=*" />
        <Button Grid.Column="2" Content="Width=2*" />
        <Button Grid.Column="3" Content="Width=*" />
    </Grid>
    <Grid Grid.Row="3" Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Content="Width=100" />
        <Button Grid.Column="1" Content="Width=*" />
        <Button Grid.Column="2" Content="Width=2*" />
        <Button Grid.Column="3" Content="Width=3*" />
    </Grid>
</Grid>

 IsSharedSizeScope

通过对SharedSizeGroup命名，相同名字的Grid的高度或者宽度可以设置为相同

<Grid Margin="5" Grid.IsSharedSizeScope="True">
                <Grid Grid.Row="0" Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" SharedSizeGroup="a"/>
                        <ColumnDefinition Width="*" SharedSizeGroup="a"/>
                    </Grid.ColumnDefinitions>
                  　...
                </Grid>
                <Grid Grid.Row="2" Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="2*" SharedSizeGroup="a"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
　　　　　　　　　　　　...

 GridSplitter

可以通过鼠标键盘改变尺寸

<Grid Margin="5" Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
　　　　...
    </Grid.RowDefinitions>
    <GridSplitter Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" ResizeDirection="Rows" Height="3" Background="Black" />
    <Grid Grid.Row="2" Margin="5">
        <Grid.ColumnDefinitions>
          ...
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" ShowsPreview="True" Width="3" Background="Black" />
        ...
    </Grid>

</Grid>

To be continue...