WPF入門教程系列四

WPF之Binding的使用（二）

一、  前言

初學WPF經常被Binding搞得苦不堪言，Binding的重用性就不做介紹了，在WPF應用程序開發中Binding是一個非常重要的部分。WPF也是近期才接觸，學習WPF也是在網上查資料與微軟的MSDN進行學習，寫本博客的目為了溫故而知新把學習過程記錄下來，以備后查。

二、  WPF之Binding

接下還是用做幾個示例來做演示如果通過綁定把ListBox中選中的值顯示到TextBlock中

1.）首先，給ListBox添加ListBoxItem，做為ListBox的選項 。

2.）其次，把TextBlock 的 Text通過 Binding 與 ListBox 選擇項進行綁定。Binding 語法中的 ElementName 屬性指示 TextBlock 的 Text 屬性要與其綁定的控件的名稱。Path 屬性指示我們將綁定到Text屬性上ListBox元素的屬性。如下代碼所示

<Window x:Class="Student.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:Student"
        mc:Ignorable="d"
        Title="MainWindow" Height="650" Width="800">
    <Grid>

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

        <StackPanel Grid.Row="0">
            <TextBlock Width="250" Height="26" Text="湖南旅游景點:" TextWrapping="Wrap" Background="Azure" FontSize="20"/>
            <ListBox x:Name="listStockName" Width="248" Height="90" Background="Azure" FontSize="20">
                <ListBoxItem Content="武陵源"/>
                <ListBoxItem Content="南岳衡山 "/>
                <ListBoxItem Content="岳陽樓"/>
                <ListBoxItem Content="岳麓書院 "/>
                <ListBoxItem Content="君山島 "/>
                <ListBoxItem Content="張家界"/>
                <ListBoxItem Content="花明樓 "/>
                <ListBoxItem Content="崀山風景名勝區"/>
                <ListBoxItem Content="鳳凰古城"/>
            </ListBox>
            <TextBlock Width="250" Height="24" Text="你所選中的景點:" Background="Aqua" FontSize="20" />
            <TextBlock Width="250" Height="30" Text="{Binding ElementName=listStockName, Path=SelectedItem.Content}" Background="Azure" FontSize="26"/>
        </StackPanel>

    </Grid>

</Window>

效果圖如下：

三、  WPF之綁定模式

首先，我們來做一個簡單示例，這個示例是根據ListBox中的選中項，去改變TextBlock的背景色。將 TextBlock 的背景色綁定到在 ListBox 中選擇的顏色。在下面的代碼中針對TextBlock的 Background 屬性使用綁定語法綁定從 ListBox 中選擇的值。代碼如下。

<StackPanel Grid.Row="1">

            <TextBlock Width="300" Height="30" Text="顏色:" FontFamily="幼圓" TextWrapping="Wrap"/>

            <ListBox x:Name="listColor" Width="300" Height="68" FontFamily="幼圓">
                <ListBoxItem Content="Blue"/>
                <ListBoxItem Content="Red"/>
                <ListBoxItem Content="Green"/>
                <ListBoxItem Content="Gray"/>
                <ListBoxItem Content="Cyan"/>
                <ListBoxItem Content="GreenYellow"/>
                <ListBoxItem Content="Orange"/>
            </ListBox>

            <TextBlock Width="300" Height="30" FontFamily="幼圓" Margin="3,1,2,1"  Text="改變背景色:" />
            <TextBlock Width="300" Height="30" Background="{Binding ElementName=listColor, Path=SelectedItem.Content, Mode=OneWay}">
            </TextBlock>

        </StackPanel>

效果圖如下所示：

接下來我們對上面的示例進行一些修改：

1)同一個數據源綁定到兩個或多個控件上。如我們的示例中把ListBox的選中項綁定到TextBox與TextBlock。

2)在綁定語法中增加一個 Mode 屬性，即綁定模式。對於我們的示例，我們把TextBlock的綁定語法中的Mode屬性設為 OneWay 。把TextBox的綁定語法中的Mode屬性設為TwoWay。

 

對於示例中的Mode進行一下簡單說明（具體可以參見前一篇）：

1）使用 OneWay 綁定時，每當數據源(ListBox)發生變化時，數據就會從數據源流向目標(TextBlock)。

2）OneTime 綁定也會將數據從源發送到目標；但是，僅當啟動了應用程序或 DataContext 發生更改時才會如此操作，因此，它不會偵聽源中的更改通知。

3）OneWayToSource 綁定會將數據從目標發送到源。

4）TwoWay 綁定會將源數據發送到目標，但如果目標屬性的值發生變化，則會將它們發回給源。

 

下面就是修改后的示例代碼，功能是將 TextBlock (OneWay) 和 TextBox (TwoWay) 綁定到 ListBox 的代碼：

<StackPanel Grid.Row="1">

            <TextBlock Width="300" Height="30" Text="顏色:" FontFamily="幼圓" TextWrapping="Wrap"/>

            <ListBox x:Name="listColor" Width="300" Height="68" FontFamily="幼圓">
                <ListBoxItem Content="Blue"/>
                <ListBoxItem Content="Red"/>
                <ListBoxItem Content="Green"/>
                <ListBoxItem Content="Gray"/>
                <ListBoxItem Content="Cyan"/>
                <ListBoxItem Content="GreenYellow"/>
                <ListBoxItem Content="Orange"/>
            </ListBox>

            <TextBlock Width="300" Height="30" FontFamily="幼圓" Margin="3,1,2,1"  Text="改變背景色:" />
            <TextBlock Width="300" 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>

綁定模式如何應用呢？下面是個人的一點見解：

1）當只想讓用戶看到數據，而不希望用戶去修改數據時，可以采用 OneWay 模式，類似winform中的只讀屬性。

2）當希望用戶可以對控件中的數據進行修改，同時讓用戶修改的數據更新到數據源（DataSet、對象、XML 或其他綁定控件）中時，可以使用 TwoWay 綁定。

3）如果想讓用戶修改數據源中的數據，而又不想使用TowWay模式，就可以使用 OneWayToSource 綁定。OneWayToSource模式允許通過在原來被看作是綁定源的對象中放置綁定表達式，從而翻轉源和目標。

 

4）當你的界面中的一系列只讀控件均被綁定了數據，並且當用戶刷新了數據源時，希望綁定控件中的值仍保持不變，可以使用 OneTime 綁定。此外，當源沒有實現 INotifyPropertyChanged 時，OneTime 綁定模式也是一個不錯的選擇。

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}}}

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=.}”。

 

   小結

WPF的核心理念是變傳統的UI驅動數據變成數據驅動UI，支撐這個理念的基礎就是本章講的Data Binding和與之相關的數據校驗和數據轉換。在使用Binding的時候，最重要的就是設置它的源和路徑。

 Data Binding到此講解完畢。本人接觸WPF不到一年，寫的不好勿噴，有不足之處還望大家多多指正。

如有不了解可以參考官方文檔說明