Silverlight DataBinding Converter：根据binding对象调整显示

分类： silverlight databind converter ivalueconverter slider image elementname path 2012-10-22 11:56 1243人阅读 评论(0) 收藏 举报

目录(?)[+]

1. 首先定义显示界面
2. 让Image binding到slider value
3. slider value转化到imagesource string
4. 在xaml中引入converter

我希望写一系列关于Silverlight DataBinding的文章，分别讲解Silverlight Binding中不同的功能。本文将会讲的是DataBinding中使用Converter。演示的demo是根据值显示一个小图标，当slider数值小于50的时候，显示绿色，当数值大于等于50时，显示红色。

 

本文中所有代码都可以在github中查看，git版本中采用了master-dev的方式。在master中可以查看每一个demo的最后完成，在dev中可以查看每一步的代码。
github地址：[email protected]:kiwiwin/silverlight-demo.git。文件夹名称databinding-converter-demo

 

1.首先定义显示界面

[html] view plain copy print ?

1. <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">  
2.   
3.           <Slider Height="23" HorizontalAlignment="Left" Width="120" Name="slider" VerticalAlignment="Center"  
4.   
5.                    Minimum="0" Maximum="100" />  
6.   
7.           <Image Height="30" Width="30" Margin="5,0"  
8.   
9.                  Source="Images/green.png" />  
10.   
11. </StackPanel>  

<span style="font-size:14px;"> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">

           <Slider Height="23" HorizontalAlignment="Left" Width="120" Name="slider" VerticalAlignment="Center"

                    Minimum="0" Maximum="100" />

           <Image Height="30" Width="30" Margin="5,0"

                  Source="Images/green.png" />

 </StackPanel>
</span>

注意Image中的Source值为Images/green.png，只是因为我在Images下面放置了两个图片green.png和red.png作为演示用

 

2.让Image binding到slider value

 这里需要首先让Image的Sourcebinding到Slider的Value上，ElementName赋值为slider，就让slider成为Image source的binding source，然后将Path赋值为Value，即binding到slider的Value属性上。

Source="{Binding ElementName=slider,Path=Value}"

 

3.slider value转化到imagesource string

Source需要的是一个字符串指向图片的来源，而slider.Value只是一个double型的属性，这就需要进行转换，就用到了databinding中的converter属性。

首先，添加一个类，用于作转换：

[csharp] view plain copy print ?

1. namespace databinding_converter_demo  
2. {  
3.     public class ColorToPicture : IValueConverter   
4.     {  
5.         public object Convert(object value, Type targettype, object parameter, CultureInfo culture)  
6.         {  
7.             double num = (double)value;  
8.             return num < 50 ? "Images/green.png" : "Images/red.png";  
9.         }  
10.   
11.         public object ConvertBack(object value, CultureInfo culture)  
12.         {  
13.             throw new NotImplementedException();  
14.         }  
15.     }  
16. }  

<span style="font-size:14px;">namespace databinding_converter_demo
{
    public class ColorToPicture : IValueConverter 
    {
        public object Convert(object value,Type targettype,object parameter,CultureInfo culture)
        {
            double num = (double)value;
            return num < 50 ? "Images/green.png" : "Images/red.png";
        }

        public object ConvertBack(object value,CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}</span>

实现binding转换需要实现一个类，实现IValueConverter接口，而IValueConverter定义了两个接口，Convert和ConvertBack，Convert用于讲source转换成target的binding转换，而ConvertBack反之。因为这里我们不需要ConvertBack，所以不实现它。

 

4.在xaml中引入converter

在xaml中添加一个local的namespace。并且定义UserControl.Resources指明ColorToPicture

[html] view plain copy print ?

1. <span style="font-family: Simsun;"> mlns:local="clr-namespace:databinding_converter_demo"  
2.   
3.    
4.   
5.    <UserControl.Resources>  
6.   
7.        <local:ColorToPicture x:Key="ColorToPicture" />  
8.   
9.    </UserControl.Resources>  
10. </span>  

<span style="font-family: Simsun;"><span style="font-size:14px;"> mlns:local="clr-namespace:databinding_converter_demo"

 

   <UserControl.Resources>

       <local:ColorToPicture x:Key="ColorToPicture" />

   </UserControl.Resources>
</span></span>

 

注意local:ColorToPicture的key是ColorToPicture

再修改Image Source：

[html] view plain copy print ?

1. <Image Height="30" Width="30" Margin="5,0" Source="{BindingElementName=slider, Path=Value, Converter={StaticResource ColorToPicture}}" />  

<span style="font-size:14px;"><Image Height="30" Width="30" Margin="5,0" Source="{BindingElementName=slider,Path=Value,Converter={StaticResource ColorToPicture}}" />
</span>

 

显示结果：

slider小于50：

slider大于50：