WPF 布局

最近项目需要，使用WPF编制一些简单的工具。现在将学习和使用过程中的一些体会记录下来，作为备忘。

WPF的布局与Bootstrap 的网格布局有些类似，通过使用Grid将区域划分为若干网格，然后在网格中放置控件。WPF的控件属性与WinForm的有相似的地方，都可以在后台代码中修改属性的内容，也可以在页面描述中定义模板和需要与后台模型的绑定属性。所不同的是WPF中控件模板的定义更灵活，但同时也更复杂，绑定功能更强大，但同时语法也更复杂。这里简单总结一下，便于以后查询应用。

Grid布局

使用Grid嵌套进行布局，可以定义基本的页面，下面的布局是基本的布局样式：

<Window x:Class="WpfLayout.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:WpfLayout"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!--定义Grid的行，定义2行-->
            <!--第一行放Toolbar-->
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--定义Grid的列，定义1列-->
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ToolBar Grid.Column="0" Grid.Row="0">
            <Button>
                <Image   Source="Images/ToolbarImg/File.png" Width="32" Height="32"></Image>
            </Button>
        </ToolBar>
        <Grid  Grid.Column="0" Grid.Row="1">
            <Grid.RowDefinitions>
                <!--定义Grid的行，定义1行-->
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <!--定义Grid的列，定义2列-->
                <ColumnDefinition Width="200"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Grid.Row="0" Grid.Column="0" BorderThickness="0" >
                <TreeView >

                </TreeView>
            </Border>
            <GridSplitter Width="5"> </GridSplitter>
            <Border Grid.Row="0" Grid.Column="1" Width="auto"  >
                <Grid >

                </Grid>
            </Border>
        </Grid>
    </Grid>
</Window>

DockPanel布局

需要注意的是：DockPanel布局中最后一个控件填充剩余区域，而不是按从上到下的顺序:

<Grid>
        <DockPanel>
            <!--停靠布局，让菜单栏和工具栏位于窗口顶部-->
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="File">
                    <!--菜单项为MenuItem，文字使用属性 Header-->
                    <MenuItem Name="menuOpen" Header="Open" Click="menuOpen_Click"></MenuItem>
                    <MenuItem Header="Save"></MenuItem>
                    <MenuItem Header="Delete"></MenuItem>
                </MenuItem>
                <MenuItem Header="Edit"></MenuItem>
                <MenuItem Header="View"></MenuItem>
                <MenuItem Header="About"></MenuItem>
            </Menu>
            <ToolBar DockPanel.Dock="Top">
                <!--ToolBar和StatusBar就是一个容器-->
                <Button Content="Save"></Button>
                <Button Content="SaveAll"></Button>
                <Button Content="FileExplorer"></Button>
                <Button Content="Start"></Button>
                <Button Content="Test"></Button>
            </ToolBar>
            <StatusBar  DockPanel.Dock="Bottom"  >
                 <TextBlock Text="statusBar"></TextBlock>
            </StatusBar>
            <!--Grid最后加入，填充剩余区域-->
            <Grid>
                
            </Grid>
            
        </DockPanel>
    </Grid>

Canvas

支持坐标定位，在控件中使用Canvas.Left,Canvas.Top，Canvas.Right和Canvas.Bottom进行定位。

StackPanel

顺序排列控件，横向或者纵向，设置Orientation属性为Horizontal或Vertical。

WrapPanel

可以规定控件具有统一的宽度和高度，并且超出范围可以换行，也支持横向或纵向排列。

Orientation：这就像StackPanel中的Orientation属性，唯一不同的是默认值为Horizontal。当Horizontal Orientation看上去类似于Windows资源管理器的缩略图视图：元素是从左向右排列的，然后自上至下自动换行。Vertical Orientation看上去类似于Windows资源管理器的列表视图：元素是从上向下排列的，然后从左至右自动换行。
ItemHeight：所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。
ItemWidth：所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。