Silverlight DataBinding Converter:根據binding對象調整顯示
我希望寫一系列關於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: