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.           <Slider Height="23" HorizontalAlignment="Left" Width="120" Name="slider" VerticalAlignment="Center"  
3.                    Minimum="0" Maximum="100" />  
4.           <Image Height="30" Width="30" Margin="5,0,0,0"  
5.                  Source="Images/green.png" />  
6. </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,0,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.         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
11.         {  
12.             throw new NotImplementedException();  
13.         }  
14.     }  
15. }  

<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, Type targetType, object parameter, 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.    <UserControl.Resources>  
3.        <local:ColorToPicture x:Key="ColorToPicture" />  
4.    </UserControl.Resources>  
5. </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,0,0" Source="{BindingElementName=slider, Path=Value, Converter={StaticResource ColorToPicture}}" />  

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

顯示結果：

slider小于50：

slider大于50：