WPF/C#学习笔记.1

WPF中的布局TabControl，Grid与GridSpliter等

---

WPF布局原则

由于WPF窗体中只能包含单个元素。为了在WPF窗体中放置多个元素，需要在窗体中布置一个容器(TablControl，StackPanel，Grid等，其中Grid是WPF中功能最强大的布局控件)，然后在这个容器中添加别的元素。

核心布局面板

• StackPanel 在水平或者垂直的堆栈中放置元素。这个布局容器通常用于更大更复杂的窗体中的一些小区域。
• WrapPanel 在一系列可换行的行中放置元素（默认）:在水平（行）方向上，从左向右放置条目；在垂直（列）方向上，自上而下放置条目。
• DockPanel 根据容器的整个边界调整条目。
• Canvas 使用固定坐标绝对定位元素，不适合用于尺寸可变的窗口。一般用于图形绘制，可以在其外层再布置一个ViewBox以实现对Canvas中的图形动态地等比例缩放。
• Grid 根据不可见的表格在行和列中排列元素，这是最灵活和最常用的容器之一。
• GridSplitter Grid面板的分割条，用以实现让用户在使用APP时自己通过拖动分割条动态地决定各个部分占据窗体的比例。可以与别的元素共享一个表格单元，更好的方法是预留一列或一行来放置分割条，并将预留列或行的Width或Height的属性设置为auto。

容器修饰与封装

• Border 装饰元素只能包含一段嵌套内容（通常是布局面板），并为其添加背景或在其周围添加边框（必须设置其BorderBrush和BorderThickness属性才会显示边框效果）。
• ScrollViewer 可以包含任何内容通常用于封装布局容器，使得面板可以滚动以查看超出当前显示范围的内容。

---

WPF代码实例

<Window x:Class="PowerFlight.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:PowerFlight"
        mc:Ignorable="d"
        Title="PowerFlight" Height="768" Width="1366" Icon="Image/Airplane.ico">
    <TabControl TabStripPlacement="Left" Margin="3" >
        <TabItem Header="Simulator">
            <Grid ShowGridLines="False" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" /> 
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="8*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="3*"/>
                </Grid.RowDefinitions>
                
<!-- Element in Grid.Column="0" -->
                <Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Margin="3" 
                        BorderBrush="#FFACACAC" BorderThickness="1" >
                    <TextBlock Margin ="3" FontSize="20" Text="This is auto width"/>
                </Border>
<!-- End of Element in Grid.Column="0" -->
                
<!-- Element in Grid.Column="1" -->
                <Border Grid.Column="1" Grid.Row="0" Margin="0,3,0,0" 
                        BorderBrush="#FFACACAC" BorderThickness="1" >
                    <DockPanel LastChildFill="True">
                        <Label DockPanel.Dock="Top" FontSize="20" Content="This 2* weight"/>
                        <TextBlock Padding="2" Margin="3" TextWrapping="Wrap">
                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        </TextBlock>
                    </DockPanel>
                </Border>

                <GridSplitter Grid.Column="1" Grid.Row="1" Height="3"                              
                              VerticalAlignment="Center" HorizontalAlignment="Stretch"
                              ResizeDirection="Rows" Opacity="0" />

                <Border  Grid.Column="1" Grid.Row="2"  Margin="0,0,0,3" 
                         BorderBrush="#FFACACAC" BorderThickness="1" >
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Auto">
                        <StackPanel Margin="3,6,3,6" >
                            <Label Content="This 2* weight"/>
                            <TextBlock Margin="3" FontSize="20" >
                            xxxxxxxxxxxxxxxxxxxxxxxxxxxx
                            </TextBlock>
                        </StackPanel>
                    </ScrollViewer>
                </Border>
<!-- End of Element in Grid.Column="1" -->
                
                <GridSplitter Grid.Column="2" Grid.RowSpan="3" Width="3"
                              VerticalAlignment="Stretch" HorizontalAlignment="Center"
                              Opacity="0"/>

<!-- Element in Grid.Column="3" -->
                <Border Grid.Column="4" Grid.Row="0" Grid.RowSpan="3"  Margin="0,3,3,3" 
                        BorderBrush="#FFACACAC" BorderThickness="1" >
                    <TextBlock FontSize="20" Text="This 8* weight"/>
                </Border>
<!-- End of Element in Grid.Column="3" -->
                
            </Grid>
        </TabItem>
<!-- End Of TabItem Heardear="Simulator" -->
        
        <TabItem Header="Data">
        </TabItem>
        
    </TabControl>
</Window>

布局结果

• 拉伸前

• 拉伸后

Tips

通用属性

• Margin Margin="3" 在元素四周添加Thickness=new Thickness(3,3,3,3)的空间；Margin="0,3,0,0" 在元素四周添加Thickness=new Thickness(0,3,0,0)（顺序依次为：左，上，右，下）的空间。
• Padding 定义元素的内边距，例如TextBlock中的文本距离其边框的距离
• Opacity 不透明系数1-->0（完全透明）

TabControl

• TabStripPlacement 设置选项卡的停靠位置

TabItem

• Header 选项卡中显示的文本

Grid

• ShowGridLines 是否显示网格虚线
• ColumnDefinition Width="auto"，列的宽度取决于其中所包含的最大元素的宽度；Width="2"/Width="8"，列的宽度占未定义的剩余宽度的权重为2/8，若只有这两个列分割剩下的宽度，则宽度切割为2+8=10份，这两个列分别占2份和8份。行高度（Height）的定义与之相同。

Grid子元素属性

• Grid.Column="1" Grid.Row="0" 该子元素占据Grid的行1列0。
• Grid.RowSpan="3"/Grid.ColumnSpan="2" 该子元素穿越Grid的3列/2行布置。

GridSplitter

• VerticalAlignment/HorizontalAlignment GridSplitter外观在垂直/水平方向上的对齐与拉伸
• ResizeDirection ="Rows"/="Columns" GridSplitter对表格的调整方向

DockPanel

• LastChildFill 最后一个子元素占据DockPanel的所有剩余空间。

DockPanel子元素属性。

• DockPanel.Dock 子元素在DockPanel中的位置。

ScrollViewer

• HorizontalScrollBarVisibility/VerticalScrollBarVisibility ="Auto"，APP运行时根据其中具体元素大小自行决定是否启用滚动条。

TextBlock

• TextWrapping 定义当前句子超出文本框时文本框的行为（=“Wrap”,自动排版到下一行）。