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”,自动排版到下一行）。
