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

概述      Silverlight DataBinding Converter：根据binding对象调整显示 分类： silverlight databind converter ivalueconverter slider image elementname path 2012-10-22 11:56 1243人阅读 评论(0) 收藏 举报 目录(?)[+] 首先定义显示界面 让Image       Silverlight DataBinding Converter：根据binding对象调整显示 分类： silverlight databind converter ivalueconverter slider image elementname path 2012-10-22 11:56 1243人阅读 评论(0) 收藏 举报

目录(?)[+]

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

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

@H_502_91@ 

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

@H_502_91@ 

1.首先定义显示界面 [HTML]@H_502_91@ view plain copy print ? <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 > <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}"@H_502_91@

 

3.slIDer value转化到imagesource string

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

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

[csharp]@H_502_91@ view plain copy print ? 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 >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]@H_502_91@ view plain copy print ? <span style="Font-family: Simsun;"> mlns:local="clr-namespace:databinding_converter_demo"                <UserControl.Resources>             <local:colortopicture x:Key="colortopicture" />         </UserControl.Resources>   </span>  

<span ><span > 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]@H_502_91@ view plain copy print ? <Image Height="30" WIDth="30" margin="5,0" Source="{BindingElementname=slIDer, Path=Value, Converter={StaticResource colortopicture}}" />  

<span ><Image Height="30" WIDth="30" margin="5,0" Source="{BindingElementname=slIDer,Path=Value,Converter={StaticResource colortopicture}}" /></span>

 

显示结果：@H_502_91@

slIDer小于50：

slIDer大于50：

总结

以上是内存溢出为你收集整理的Silverlight DataBinding Converter：根据binding对象调整显示全部内容，希望文章能够帮你解决Silverlight DataBinding Converter：根据binding对象调整显示所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。