在Silverlight中我们经常要用到数据绑定,例如在使用ListBox展现数据时,就需要绑定我们指定的数据源。而在对绑定的数据进行展现时,我们又经常需要对数据的表现形式进行各式各样的处理。
在Silverlight中我们可以使用IValueConverter 实现绑定数据的格式化。在本文我们将示例如何进行操作:
一、案例描述:
我们有一个数据源People,是一个Person类的列表,Person类有两个属性,一个是姓名,一个是年龄。我们需要把People在界面上展示出来。但是在展示时我们需要按不同的年龄段来提示不同的背景。
下面我们就来具体实现:
二、案例实现
打开VS2008,新建项目Silverlight应用程序,名为MyIValueConverter。确定后,系统为我们自动创建了两个项目,一个MyIValueConverter,一个MyIValueConverter.Web。
1、在MyIValueConverter项目中新建两个类Person和People.代码如下:
Person代码
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MyIValueConverter
{
public class Person
{
private string _name;
private int _age;
public string Name
{
get{return _name;}
set{_name=value;}
}
public int Age
{
get { return _age; }
set { _age = value; }
}
public Person()
{
}
public Person(string NameStr, int AgeInt)
{
Name = NameStr;
Age = AgeInt;
}
}
People代码
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MyIValueConverter
{
public class Person
{
private string _name;
private int _age;
public string Name
{
get{return _name;}
set{_name=value;}
}
public int Age
{
get { return _age; }
set { _age = value; }
}
public Person()
{
}
public Person(string NameStr, int AgeInt)
{
Name = NameStr;
Age = AgeInt;
}
}
2、在MyIValueConverter项目中进行Page.xaml界面设计,Page.xaml代码如下:
<UserControl x:Class="MyIValueConverter.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:customer="clr-namespace:MyIValueConverter"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="peopleList" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="peopleItem" Orientation="Horizontal">
<TextBlock x:Name="peopleName" Width="80" Height="30" Text="{Binding Name}"> </TextBlock>
<TextBlock x:Name="peopleAge" Width="80" Height="30" Text="{Binding Age}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
3、编辑Page.xaml的后台代码,Page.xaml.cs的代码为
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MyIValueConverter
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Person psz = new Person("张三",18);
Person psl =new Person("李四",28);
Person psw = new Person("王五", 38);
Person psq = new Person("钱六", 48);
List<Person> ppl = new List<Person> {psz,psl,psw };
People pl = new People(ppl);
this.peopleList.ItemsSource = pl.PersonList;
}
}
}
按下F5运行,我们可以看到People数据已经显示在我们的ListBox中,但此时它们并没有按年龄段分色显示。
4、在MyIValueConverter项目中添加新类AgeConverter,此类继承自IValueConverter,在此类我们需要对Age进行分段判断,
然后根据不同的年龄段返回不同的SolidColorBrush对象。AgeConverter类代码如下:
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data; //要使用IValueConverter就要引用此命名空间
using System.Globalization;
namespace MyIValueConverter
{
public class AgeConverter:IValueConverter
{
#region IValueConverter 成员
public object Convert(object value,
Type targetType,
object parameter,
CultureInfo culture)
{
DateTime date = (DateTime)value;
return date.ToShortDateString();
}
object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
int ageInt= (Int32)value;
SolidColorBrush scb=new SolidColorBrush(Colors.Orange); //默认的SolidColorBrush对象
//进行年龄段判断并返回不同的SolidColorBrush对象
if ((0 <= ageInt) && (ageInt <= 20)) { scb = new SolidColorBrush(Colors.Blue); }
if((20<ageInt)&&(ageInt<=30)){scb=new SolidColorBrush(Colors.Green);}
if ((30 < ageInt) && (ageInt <= 40)) { scb = new SolidColorBrush(Colors.Red); }
return scb;
}
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string strValue = value.ToString();
Int16 resultAge;
if (Int16.TryParse(strValue, out resultAge))
{
return resultAge;
}
return value;
}
#endregion
}
}
5、在MyIValueConverter中修改其Page.xaml代码,加入如下代码段
<UserControl.Resources>
<customer:AgeConverter x:Key="AgeConvertColor"/>
</UserControl.Resources>
修改StackPanel的属性
<StackPanel x:Name="peopleItem" Orientation="Horizontal" Background="{Binding Age, Converter={StaticResource AgeConvertColor}}">
把它的Background属性和我们的Person对象的Age值进行了关联,根据不同的年龄段来设置不同的背景色。
Page.xaml代码如下:
<UserControl x:Class="MyIValueConverter.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:customer="clr-namespace:MyIValueConverter"
Width="400" Height="300">
<UserControl.Resources>
<customer:AgeConverter x:Key="AgeConvertColor"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="peopleList" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="peopleItem" Orientation="Horizontal" Background="{Binding Age, Converter={StaticResource AgeConvertColor}}">
<TextBlock x:Name="peopleName" Width="80" Height="30" Text="{Binding Name}"> </TextBlock>
<TextBlock x:Name="peopleAge" Width="80" Height="30" Text="{Binding Age}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
按F5运行可看到不同年龄段的记录在ListBox中显示时具有不同的显示背景。