一.章節目標

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

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

二.簡單控制元件

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

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

五.項內容

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

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

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

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

<StackPanel>
        <Border BorderBrush="Violet" BorderThickness="5">
            <Label>呵呵噠</Label>
        </Border>
        <Viewbox StretchDirection="Both" Stretch="Uniform">
            <Label  Width="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>

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類。