Silverlight DataBinding Converter：根據binding對象調整顯示



    

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.首先定義顯示界面

<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 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屬性。

首先，添加一個類，用於作轉換：

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

<span style="font-family: SimSun;"> mlns:local="clr-namespace:databinding_converter_demo"



   <UserControl.Resources>

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

   </UserControl.Resources>
</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：

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