Silverlight實用竅門系列：56.Silverlight中的Binding使用（一）【附帶執行個體源碼】

      本文将詳細講述Silverlight中Binding，包括Binding的屬性和用法，Binding的資料流向。

        Binding:一個完整的Binding過程是讓源對象中的某個屬性值通過一定流向規則進行轉換和驗證之後綁定到目标對象的某個屬性上面。這個源對象由ElementName指定，源對象的屬性由Path指定，流向規則由Mode指定，轉換由Converter指定，驗證由ValidatesOnDataErrors等指定。

        首先我們來看Binding的屬性如下：

　　　　ElementName:指定源對象的名稱

　　　　Path:指定需要綁定的源對象的屬性名稱

　　　　Mode:指定Binding的資料流向規則

　　　　Converter:指定源對象的屬性需要經過使用者自定義的轉換

        其次我們來看看Binding的資料流向Mode分為以下幾種：

　　　　OneTime:源對象的屬性隻有在第一次的時候綁定到目标對象，以後源對象屬性值變化時，目标對象值不變

　　　　OneWay:源對象的屬性值變化的時候，目标對象值也跟着相應變化，而目标對象值變化時，源對象屬性值不變

　　　　TwoWay:源對象的屬性值變化的時候，目标對象值也跟着相應變化，目标對象值變化時，源對象屬性值也跟着變

         下面我們通過以下執行個體源碼來看看Binding的簡單應用和轉換，注意Mode為TwoWay的時候目标對象更新時需要轉移焦點(LostFocus)才觸發更新源對象。例如本文執行個體中需要點選到另外的TextBox才更新源。

Xaml：

<UserControl x:Class="SLBinding.MainPage" 

    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:SLBinding" 

    mc:Ignorable="d" 

    d:DesignHeight="600" d:DesignWidth="800"  

             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"> 

    <UserControl.Resources> 

        <local:ImageConverter x:Key="ImageCoverter"/> 

    </UserControl.Resources> 

    <Grid x:Name="LayoutRoot" Background="White"> 

        <!--One Time--> 

        <StackPanel Orientation="Horizontal"> 

            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,56,0,0" 

                       Name="label1" VerticalAlignment="Top" Width="120" Content="One Time:" /> 

            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,56,0,0" 

                     Name="tbOneTimeSource" VerticalAlignment="Top" Width="120" Text="初次綁定" /> 

                     Name="tbOneTimeTarget" VerticalAlignment="Top" Width="120" 

                     Text="{Binding ElementName=tbOneTimeSource, Path=Text, Mode=OneTime}"/> 

        </StackPanel> 

        <!--One Way--> 

            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,100,0,0" 

                       Name="label2" VerticalAlignment="Top" Width="120" Content="One Way:" /> 

            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,100,0,0" 

                     Name="tbOneWaySource" VerticalAlignment="Top" Width="120" Text="單向綁定" /> 

                     Name="tbOneWayTarget" VerticalAlignment="Top" Width="120" 

                     Text="{Binding ElementName=tbOneWaySource, Path=Text, Mode=OneWay}"/> 

        <!--Two Way--> 

            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,150,0,0" 

                       Name="label3" VerticalAlignment="Top" Width="120" Content="One Time:" /> 

            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,150,0,0" 

                     Name="tbTwoWaySource" VerticalAlignment="Top" Width="120" Text="雙向綁定" /> 

                     Name="tbTwoWayTarget" VerticalAlignment="Top" Width="120" 

                     Text="{Binding ElementName=tbTwoWaySource, Path=Text, Mode=TwoWay}"/> 

        <!--Converter--> 

            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,220,0,0" 

                       Name="label5" VerticalAlignment="Top"  

                       Content="下面将網絡圖檔位址使用Converter自動綁定轉換為圖檔顯示出來 " /> 

            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,250,0,0" 

                       Name="label4" VerticalAlignment="Top" Width="120" Content="Converter:" /> 

            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,250,0,0" 

                     Name="tbConverter" VerticalAlignment="Top"  

                     Text="http://sc.admin5.com/uploads/allimg/100211/105R33342-7.png" /> 

            <Image Name="imgCity" Width="60" Height="60"  

                   Source="{Binding ElementName=tbConverter,Path=Text,  

                Mode=TwoWay, Converter={StaticResource ImageCoverter}}"></Image> 

    </Grid> 

</UserControl> 

ImageConverter.cs

public class ImageConverter : IValueConverter 

 { 

     //在載入資料的時候将資料轉換為圖檔類型 

     public object Convert(object value, Type targetType, object parameter, 

         System.Globalization.CultureInfo culture) 

     { 

         try 

         { 

             Uri uri = new Uri((string)value, UriKind.RelativeOrAbsolute); 

             BitmapImage img = new BitmapImage(uri); 

             return img; 

         } 

         catch 

             return new BitmapImage(); 

     } 

     //在頁面上操作的時候，将圖檔類型轉換為資料，這裡隻有再TwoWay的時候才有用 

     public object ConvertBack(object value, Type targetType, object parameter, 

         BitmapImage img = value as BitmapImage; 

         return img.UriSource.AbsoluteUri; 

 } 

<a target="_blank" href="http://blog.51cto.com/attachment/201204/181412609.png"></a>

本文轉自程興亮 51CTO部落格，原文連結:http://blog.51cto.com/chengxingliang/827105