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="初次绑定" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,56,0,0"
                     Name="tbOneTimeTarget" VerticalAlignment="Top" Width="120"
                     Text="{Binding ElementName=tbOneTimeSource, Path=Text, Mode=OneTime}"/>
        </StackPanel>
        <!--One Way-->
        <StackPanel Orientation="Horizontal">
            <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="单向绑定" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,100,0,0"
                     Name="tbOneWayTarget" VerticalAlignment="Top" Width="120"
                     Text="{Binding ElementName=tbOneWaySource, Path=Text, Mode=OneWay}"/>
        </StackPanel>
        <!--Two Way-->
        <StackPanel Orientation="Horizontal">
            <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="双向绑定" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="20,150,0,0"
                     Name="tbTwoWayTarget" VerticalAlignment="Top" Width="120"
                     Text="{Binding ElementName=tbTwoWaySource, Path=Text, Mode=TwoWay}"/>
        </StackPanel>

        <!--Converter-->
        <StackPanel Orientation="Horizontal">
            <sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,220,0,0"
                       Name="label5" VerticalAlignment="Top" 
                       Content="下面将网络图片地址使用Converter自动绑定转换为图片显示出来 " />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <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>
        </StackPanel>
    </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,
            System.Globalization.CultureInfo culture)
        {
            BitmapImage img = value as BitmapImage;
            return img.UriSource.AbsoluteUri;
        }
    }

        下面我们来看看本实例运行效果如下图，如需源码请点击 SLBinding.zip 下载