二、WPF入門教程——Bingding學習

Bingding學習

一、簡介

WPF的核心理念是變傳統的UI驅動數據變成數據驅動UI，支撐這個理念的基礎就是本章講的Data Binding和與之相關的數據校驗和數據轉換。在使用Binding的時候，最重要的就是設置它的源和路徑。
Bingding的源：
有三個屬性用來設置源：ElementName(string)、Source(Object) 和 RelativeSource(RelativeSource)。注：這三個只能指定一個，否則異常。
ElementName：源為一個元素(Element)，這里用的是此元素中設置的Name屬性。
Source：以object作為源。<TextBlock Text="{Binding Source={StaticResource myDataSource}, Path=PersonName}"/>
RelativeSource：源相對於綁定目標的位置。
源是元素本身：{Binding RelativeSource={RelativeSource Self}}；
源是Tempalte中元素的Parent：{Binding RelativeSource={RelativeSource TemplatedParent}}；
源是綁定以collection形式的前一個數據：{Binding RelativeSource={RelativeSource PreviousData}}，MSDN上關於PreviousData的說明並不多。
以上三項為RelativeSource中的Static值，使用這些值可以減少內存開銷。
源是Ancestor(可能比parent還高)：{Binding RelativeSource={RelativeSource FindAncestor,AncestorLevel=n, AncestorType={x:Type desiredType}}}

Bingding的Path:
Binding中的Path是 PropertyPath對象。
在最簡單的情況下，Path 屬性值是要用於綁定的源對象的屬性名稱，如 Path=PropertyName。
通過類似於C#中使用的語法，可以指定屬性的子屬性。例如，子句 Path=ShoppingCart.Order 將綁定設置為對象的子屬性 Order 或屬性 ShoppingCart。
若要綁定到附加屬性，請將附加屬性用括號括起。例如，若要綁定到附加屬性 DockPanel.Dock，則語法為 Path=(DockPanel.Dock)。
在應用了索引器的屬性名稱之后的方括號內，可以指定屬性的索引器。例如，子句 Path=ShoppingCart[0] 將綁定設置為與屬性的內部索引處理文本字符串“0”的方式對應的索引。此外，還支持多個索引器。
在 Path 子句中可以同時使用索引器和子屬性，例如，Path=ShoppingCart.ShippingInfo[MailingAddress,Street]。
在索引器內部，可以有多個由逗號(,) 分隔的索引器參數。可以使用圓括號指定每個參數的類型。例如，可以使用 Path="[(sys:Int32)42,(sys:Int32)24]"，其中 sys 映射到 System 命名空間。
如果源為集合視圖，則可以用斜杠(/) 指定當前項。例如，子句 Path=/ 設置到視圖中當前項的綁定。如果源為集合，則此語法指定默認集合視圖的當前項。
可以結合使用屬性名和斜杠來遍歷作為集合的屬性。例如，Path=/Offices/ManagerName 指定源集合的當前項，該源集合包含同樣是集合的 Offices 屬性。其當前項是包含 ManagerName 屬性的對象。
也可以使用句點(.)路徑綁定到當前源。例如，Text=”{Binding}” 等效於 Text=”{Binding Path=.}”。

二、案例

案例一：

Grid代碼：

   <Grid>
        <!--行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition Height="200"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--設置在Grid中布局位置-->
        <!--將MainWindow分為3x3的布局，則位於中間(1,1)位置，個人理解相當於坐標。-->
        <StackPanel  Grid.Row="1" Grid.Column="1">
            <TextBlock Width="250" Height="30" Text="顏色:" TextWrapping="Wrap"  Background="Azure" FontSize="20"/>
            <ListBox x:Name="listColor" Width="200" Height="90"  Background="Azure"  FontSize="20">
                <ListBoxItem Content="Blue"/>
                <ListBoxItem Content="Red"/>
                <ListBoxItem Content="Green"/>
                <ListBoxItem Content="Gray"/>
                <ListBoxItem Content="Cyan"/>
                <ListBoxItem Content="GreenYellow"/>
                <ListBoxItem Content="Orange"/>
            </ListBox>
            <TextBlock Width="200" Height="30" TextWrapping="Wrap"  FontSize="20" Margin="3,1,2,1"   Background="Azure" Text="改變背景色:" />
            <!--綁定選擇值-->
            <TextBlock Width="200" Height="30" Text="{Binding ElementName=listColor, Path=SelectedItem.Content, Mode=OneWay}"  Background="{Binding ElementName=listColor, Path=SelectedItem.Content, Mode=OneWay}">
            </TextBlock>
            <TextBox Name="txtTwoWay" Text="{Binding ElementName=listColor,Path=SelectedItem.Content,Mode=TwoWay}"  Background="{Binding ElementName=listColor,  Path=SelectedItem.Content,Mode=TwoWay}" >
            </TextBox>
        </StackPanel>
    </Grid>

執行效果：

案例二：

Grid代碼：

<Grid>
        <StackPanel>
            <TextBlock Text="{Binding ElementName=slider,Path=Value}"/>
            <Slider x:Name="slider" Maximum="100" Minimum="1"/>
        </StackPanel>
 </Grid> 

執行效果：

三、總結

在上例子中綁定數據源時候用到了Mode屬性，通過查閱資料得知有以下區別:
oneTime：一次性綁定，將數據給控件，綁定就結束。
oneWay：數據源改變會影響綁定該數據源的控件。
twoWay：數據源改變會影響綁定該數據源的控件，並且控件中數據改變時也會影響到數據源。