WPF/C#學習筆記.1
WPF中的布局TabControl，Grid與GridSpliter等
WPF布局原則
由于WPF窗體中只能包含單個元素谭羔。為了在WPF窗體中放置多個元素，需要在窗體中布置一個容器(TablControl麦向，StackPanel瘟裸，Grid等，其中Grid是WPF中功能最強大的布局控件)诵竭，然后在這個容器中添加別的元素话告。
核心布局面板
- StackPanel 在水平或者垂直的堆棧中放置元素。這個布局容器通常用于更大更復雜的窗體中的一些小區(qū)域卵慰。
- WrapPanel 在一系列可換行的行中放置元素（默認）:在水平（行）方向上沙郭，從左向右放置條目；在垂直（列）方向上裳朋，自上而下放置條目病线。
- DockPanel 根據容器的整個邊界調整條目。
- Canvas 使用固定坐標絕對定位元素鲤嫡，不適合用于尺寸可變的窗口送挑。一般用于圖形繪制，可以在其外層再布置一個ViewBox以實現對Canvas中的圖形動態(tài)地等比例縮放暖眼。
- Grid 根據不可見的表格在行和列中排列元素惕耕，這是最靈活和最常用的容器之一。
- GridSplitter Grid面板的分割條诫肠，用以實現讓用戶在使用APP時自己通過拖動分割條動態(tài)地決定各個部分占據窗體的比例司澎。可以與別的元素共享一個表格單元区赵，更好的方法是預留一列或一行來放置分割條惭缰，并將預留列或行的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”,自動排版到下一行）锥惋。
