Silverlight 5 beta新特性探索系列:5.Silverlight 5中设置隐式数据重用模板【附带源码实例】
在Silverlight 5中增加了隐式数据重用模板的特性，此特性是根据模板设置DataType类型自动绑定该显示样式，而且隐式模板可重用性高节约了代码量。
隐式数据重用模板的运行原理是这样的：ListBox的ItemsSource属性设置包含Model类型集合M(包括很多个类型AAAA和类型BBBB)，当检测到ListBox第一行的数据源是类型AAAA，则按照<DataTemplate DataType="model:AAAA">的隐式数据模板显示AAAA类型的数据。当检测到ListBox第二行的数据源是类型BBBB，则按照<DataTemplate DataType="model:BBBB">的隐式数据模板显示BBBB类型的数据。当然model是由 xmlns:model="clr-namespace:SL5ImplicitTemplate.Models"设置的。
现在我们通过一个具体的实例来看如何设置隐式数据重用模板,我们先看Models类代码如下：
//抽象类车
public abstract class Cars
{
//车名
public string Name{get;set;}
//汽车公司
public string Company { get; set; }
//车图片地址
public Uri CarImg { get; set; }
}
//小轿车类
public class Car : Cars
{
//生产日期
public DateTime ProductTime { get; set; }
//价格
public string Price { get; set; }
}
//公共汽车
public class Bus : Cars
{
//准载人数
public int Quasi_sit { get; set; }
//车牌
public string Number { get; set; }
}
第一步：获取汽车列表数据集合
public class GetCarViewModel
{
private ObservableCollection<Cars> _CarsItem = new ObservableCollection<Cars>();
public ObservableCollection<Cars> CarsItem
{
get { return _CarsItem; }
}
/// <summary>
/// 第一步：获取汽车列表数据集合
/// </summary>
public void GetCars()
{
CarsItem.Add(
new Car()
{
CarImg = new Uri("http://t3.baidu.com/it/u=3799732270,1362066665&fm=3&gp=0.jpg",
UriKind.RelativeOrAbsolute),
Company = "梅赛德斯-奔驰",
Name = "奔驰",
Price = "120.5万",
ProductTime = new DateTime(2009, 2, 15, 12, 00, 00)
});
CarsItem.Add(new Car()
{
CarImg = new Uri("http://t1.baidu.com/it/u=2242327586,1857251137&fm=0&gp=0.jpg",
UriKind.RelativeOrAbsolute),
Company = "BMW-中国",
Name = "宝马",
Price = "54.8万",
ProductTime = new DateTime(2010, 12, 5, 12, 00, 00)
});
CarsItem.Add(new Bus()
{
CarImg = new Uri("http://t1.baidu.com/it/u=3176537478,1248543199&fm=0&gp=0.jpg",
UriKind.RelativeOrAbsolute),
Company = "厦门金龙旅行车公司",
Name = "金龙大巴",
Number = "川A23222",
Quasi_sit = 40
});
CarsItem.Add(new Car()
{
CarImg = new Uri("http://t1.baidu.com/it/u=2524512987,2145975739&fm=0&gp=0.jpg",
UriKind.RelativeOrAbsolute),
Company = "法拉利-中国",
Name = "法拉利",
Price = "210.8万",
ProductTime = new DateTime(2011, 2, 5, 12, 00, 00)
});
CarsItem.Add(new Bus()
{
CarImg = new Uri("http://t1.baidu.com/it/u=4209268573,708190938&fm=0&gp=0.jpg",
UriKind.RelativeOrAbsolute),
Company = "宇通金龙公司",
Name = "宇通大巴",
Number = "川B52243",
Quasi_sit = 50
});
}
}
第二步：设置DataContext，并且获取数据源汽车集合
public partial class ViewPage: UserControl
{
//第二步：设置DataContext，并且获取数据源汽车集合
private GetCarViewModel _vm = new GetCarViewModel();
public ViewPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(ViewPage_Loaded);
}
void ViewPage_Loaded(object sender, RoutedEventArgs e)
{
//载入页面马上设置DataContext，并且获取数据源汽车集合
DataContext = _vm;
_vm.GetCars();
}
}
第三步：获取到数据源为GetCarViewModel的CarsItem汽车集合绑定到ItemsSource属性
<Grid x:Name="LayoutRoot" Background="White">
<ListBox Height="330" HorizontalAlignment="Left" Margin="21,12,0,0" Name="listBox1"
VerticalAlignment="Top" Width="391" ItemsSource="{Binding CarsItem}" />
<!--第三步：获取到数据源为GetCarViewModel的CarsItem汽车集合绑定到ItemsSource属性-->
</Grid>
第四步：根据GetCarViewModel的CarsItem汽车集合中的Car或者Bus类型决定这个类型的数据显示样式
<UserControl.Resources>
<Style x:Key="NameStyle" TargetType="TextBlock">
<Setter Property="FontSize"
Value="11" />
<Setter Property="Foreground"
Value="DarkRed" />
<Setter Property="FontWeight"
Value="Bold" />
</Style>
<!--第四步：根据GetCarViewModel的CarsItem汽车集合中的Car类型决定这个类型的数据显示样式如下-->
<DataTemplate DataType="model:Car">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding CarImg}" Width="50" Height="40" ></Image>
<TextBlock Text="{Binding Name}" Style="{StaticResource NameStyle}"
Margin="10"></TextBlock>
<TextBlock Text="{Binding Company}" Margin="10" ></TextBlock>
<TextBlock Text="{Binding Price}" Margin="10"></TextBlock>
<TextBlock Text="{Binding ProductTime,StringFormat='yyyy-MM-dd'}"
Margin="10"></TextBlock>
</StackPanel>
</DataTemplate>
<!--第四步：根据GetCarViewModel的CarsItem汽车集合中的Bus类型决定这个类型的数据显示样式如下-->
<DataTemplate DataType="model:Bus">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="10"></TextBlock>
<TextBlock Text="{Binding Company}" Style="{StaticResource NameStyle}"
Margin="10" ></TextBlock>
<TextBlock Text="{Binding Number}" Margin="10"></TextBlock>
<TextBlock Text="{Binding Quasi_sit}" Margin="10"></TextBlock>
<Image Source="{Binding CarImg}" Width="50" Height="40" ></Image>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
最后我们来看看这个项目的目录以及运行效果如下：
本实例采用VS2010+Silverlight 5 beta编写，如需源码点击 SL5ImplicitTemplate.zip 下载。
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架