Silverlight DataBinding Converter:根据binding对象调整显示 分类: silverlight databind converter ivalueconverter slider image elementname path 2012-10-22 11:56 1243人阅读 评论(0) 收藏 举报 目录(?)[+] 首先定义显示界面 让Image
我希望写一系列关于Silverlight DataBinding的文章,分别讲解Silverlight Binding中不同的功能。本文将会讲的是DataBinding中使用COnverter。演示的demo是根据值显示一个小图标,当slider数值小于50的时候,显示绿色,当数值大于等于50时,显示红色。
本文中所有代码都可以在github中查看,git版本中采用了master-dev的方式。在master中可以查看每一个demo的最后完成,在dev中可以查看每一步的代码。
github地址:git@github.com: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"
-
- @H_375_154@minimum="0" @H_375_154@maximum="100" />
-
- <Image Height="30" Width="30" @H_375_154@margin="5,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"
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, 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,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;"> @H_375_154@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" @H_375_154@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:
@H_301_648@