Zara帶你快速入門WPF(2)---佈局篇

摘要： 一.章節目標 這幾章節我們會建立一個完整的Window程式,包括使用DataGrid空間，資料繫結是把.NET類中的資料提供給使用者介面的一個重要概念,還允許修改資料,包括.NET4.5新增的INotifyDataErrorInfo介面。Commanding可以把UI的事件對映到程式碼上。...

一.章節目標

這幾章節我們會建立一個完整的Window程式,包括使用DataGrid空間，資料繫結是把.NET類中的資料提供給使用者介面的一個重要概念,還允許修改資料,包括.NET4.5新增的INotifyDataErrorInfo介面。Commanding可以把UI的事件對映到程式碼上。

TreeView和DataGrid控制元件是顯示資料繫結的UI控制元件.TreeView控制元件可以在樹形結構中顯示資料，其中資料根據使用者的選擇進行動態載入。通過DataGrid控制元件學習如何使用過濾、排序、分組，以及.NET4.5中新增的功能----實時成型，它可以實時改變排序或過濾選項。這篇只是簡單的說下WPF控制元件。

二.簡單控制元件

TextBox	用於顯示簡單無格式文字
RichTextBox	通過FlowDocument類支援帶格式的文字,它與TextBox都派生於TextBoxBase
Calendar	顯示你年份月份
DataPicker	控制元件會開啟Calendar螢幕,提供選擇日期
PasswordBox	輸入密碼，可以通過PasswordChar修改顯示的格式,通過PasswordChanged可以觸發輸入事件
ScrollBar	包含一個Thumb，使用者可以從Thumb中選擇一個值,如果內容超過這個了,我就可以顯示滾動條
ProgressBar	可以指示時間較長的操作的進度
Slider	使用者可以移動Thumb,選擇一個範圍的值,它和ScrollBar,ProgressBar都來源一個基類RanGeBase

簡單控制元件是沒有Content屬性的控制元件,例如Button類可以包含任意形狀和任意元素。

三.內容控制元件

ContentControl有一個content屬性,利用Content屬性，可以給空間新增任意內容，因為Button類派生自基類ContentControl.所以在這個地方可以新增任何內容

例如:Button、RepeatButton、toggleButton、CheckBox、RadioButton、Label、

Frame 該控制元件支援導航、使用Navigate()方法可以導航到一個頁面的內容上、如果內容是HTML、就是用WebBrowser控制元件來顯示。

ListBoxItem 是ListBox的一項 、 ToolTip 建立一個彈窗 、其中UserControl也是內容控制元件

四.帶標題的內容控制元件

帶標題的內容控制元件派生自HeaderContentControl基類。HeaderContentControl類又派生於ContentControl,HeaderContentControl類的Header屬性定義了標題的內容，HeaderTemplate屬性可對標題金泉完全的定製。HeaderContentControl的控制元件如表

Expander	可以建立一個帶對話方塊的“高階”模式，它在預設情況下不顯示所有的資訊，只有使用者展開它。才會顯示更多的資訊，在未展開下，只顯示標題資訊，在展開的情況下,顯示內容
GroupBox	提供了邊框和標題來組合控制元件
TabItem	TabItem的Header屬性定義了標題內容,這些內容都是用TabControl的標籤顯示

Expander空間的簡單用法如下列程式碼,把Expander控制元件的Header屬性設定未Click formove 這個文字用於顯示擴充套件，這個控制元件的內容只有在控制元件展開的時候才顯示。

另外有兩個屬性可以修飾Content,HorizontalAlignment與VerticalAlignment 屬性就Center、Left、Right

五.項內容

ItemsControl類包含一個可以用Items屬性訪問的資料項列表。派生自ItemsControl的類。

Menu、ContextMenu	Menu類和ContextMenu類派生自抽象基類MenuBase。把MenuItem元素放在資料項列表和相關聯的命令中
StatusBar	StatusBar控制元件通常在應用程式的底部、為使用者提供狀態資訊、可以把StatusBarItem元素放在StatusBar列表中
TreeView	要分層顯示資料項
ListBox、ComboBox、TabControl	都有相同的抽象基類Selector、這個基類可以選擇資料項
DataGrid	顯示資料、可定製網格

下面例子說明了Border ViewBox和BulletDecorator類

ViewBox將子元素拉伸並縮放到可用的空間中。StretchDirection和Streth屬性專用於ViewBox的功能，它們允許設定子元素是否雙向拉伸，以及是否保持寬高比

BulletDecorator類用一個專案符號修飾其子元素。子元素可以是任何元素，專案符號也可以是任何元素。

<StackPanel>
<Border BorderBrush="Violet" BorderThickness="5">
<Label>呵呵噠</Label>
</Border>
<Viewbox StretchDirection="Both" Stretch="Uniform">
<LabelWidth="79">麼麼噠</Label>
</Viewbox>
<BulletDecorator Height="99.874">
<BulletDecorator.Bullet>
<Image Width="196.968" HorizontalAlignment="Center" Margin="5,5,-166.968,-51.636"
Source="http://p4.123.sogoucdn.com/imgu/2018/10/20181019163410_194.jpg"/>
</BulletDecorator.Bullet>
<BulletDecorator.Child>
<TextBlock>案說法</TextBlock>
</BulletDecorator.Child>
</BulletDecorator>
</StackPanel>

六.佈局

1.StackPanel

在window程式中只能包含一個子元素。作為其內容。如果要在其中包含多個元素，就可以將StackPanel當作成一個子元素，並將在它當中新增子元素。它是一個簡單的控制元件，可以通過StackPanel控制顯示方向。ToolBarPanel類派生於StackPanel

2.WrapPanel

WrapPanel將子元素字左右逐個排列,若一個書評行中放不下，就排在下一行，面板的方向可以是水平或是垂直。

<WrapPanel>
<WrapPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="5"></Setter>
</Style>
</WrapPanel.Resources>
<Button>button</Button>
<Button>button</Button>
<Button>button</Button>
</WrapPanel>

Line"/>

3.Canvas

Canvas是一個允許顯式指定控制元件位置的面板，它定義了Left、right、top、bottom 屬性。這個我們後續詳解。

4.DockPanel

它非常類似於winform中的停靠功能，DockPanel可以指定排列子空間的區域。Panel定義了Dock附加屬性，程式碼如下：

<DockPanel>
<Border Background="AliceBlue" Height="25" DockPanel.Dock="Top">
<TextBlock>menu</TextBlock>
</Border>
<Border Background="DarkMagenta" DockPanel.Dock="Top">
<TextBlock>ribbon</TextBlock>
</Border>
<Border Background="LightPink" DockPanel.Dock="Bottom">
<TextBlock>status</TextBlock>
</Border>
<Border Background="LightPink" DockPanel.Dock="left">
<TextBlock>left side</TextBlock>
</Border>
<Border Background="HotPink">
<TextBlock>remaining part</TextBlock>
</Border>
</DockPanel>

七.Grid

使用grid可以在行和列中排序控制元件，對於每一列可以指定一個ColumnDefintion，對於每一行可以指定一個RowDefintion,在每一列和每一行中都可以指定高度和寬度，其中前面說到的兩個屬性中分別有一個Width以及Height 依賴屬性，其中單位有畫素、釐米

英寸或點為單位定義高度和寬度，或者把它們設定為Auto,根據內容來確定其大小、在為列提供可用控制元件時，可以將width屬性設定為*，要使擴大到兩倍，就設定為2.  寫個示例大家就瞭解了。這個grid包含幾個label和textbox控制元件，因為這些控制元件的父控制元件是grid，所以可以設定附加column、columnspan、row、rowspan.

 <Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"
VerticalAlignment="Center" HorizontalAlignment="Center" Content="Title"/>
<Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Content="firstname:" Margin="10"/>
<TextBox Grid.Column="1" Grid.Row="1" Width="100" Height="30"></TextBox>
<Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" Content="lastname:" Margin="10"/>
<TextBox Grid.Column="1" Grid.Row="2" Width="100" Height="30"></TextBox>
</Grid>

為了發方便看到行和列,把showgridlines屬性設定為True;注意：要使Grid的每個單元格有相同的尺寸，可以使用UniformGrid類。