Windows Phone开发(14):数据模板
2012-11-17 11:40
369 查看
数据模板,如果你仅仅听到这个名词,你一定很迷惑,什么来的?用来干什么的?不急,亲,今天,我们一起来探索一下吧。
用白话文说,数据模板就是用来规范数据的显示方式的,关于模板,估计各位不陌生的,大家应该玩过PPT吧,都做过演示文稿吧,对啊,PPT里面有很多模板的,明白了吧?不明白?那你一定填过表吧,如果报考什么考试的,你肯定会被要求填一些什么报名表之类的,或者说,找过工用吗?是啊,做简历也有简历模板。模板的用法就像做填空题,有了部分规范的内容,然后你按照这个规范,在特定的位置填上恰当的内容,你总不能说把你的姓名填到“性别”那里去吧,这就不符合规范了。
好了,废话讲了不少,下面进入正题,你想想,哪些控件最有可能用到数据模板?哈,其实很多,只要是ContentControl的子类基本上都可以,如Button等,当然,这些控件一般没那必要,按钮嘛,多数情况下显示一些文本提示用户用来干什么的就可以了,顶多你放个图标在按钮上,估计也很少人把一段视频放在按钮上吧,呵呵,其实,在WP里面,这是可以的,但没有必要。
对的,一般列表形式的控件就最有可能使用到数据模板了,比如ListBox控件,如果你的列表控件只是让用户看信息的,而不需要额外操作,你完全可以考虑使用ListBox的“老爸”——ItemsControl。
好,下面我们用一个例子看看在不自定义数据模板的情况下,ItemsControl的列表项是如何显示的。
首先,当然是新建一个项目了,不用我介绍,相信各位都会。
你完全可以这样,把页面内的Grid根容器都删除,直接扔一个ItemsControl上面,就像这样。
[html]
view plaincopyprint?
<phone:PhoneApplicationPage
x:Class="DataTemplateSample.pageA"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
.......
>
<ItemsControl x:Name="myItemControl"/>
</phone:PhoneApplicationPage>
然后,切换到代码页,把myItemControl的数据源设置为一个字符串数组。
[csharp]
view plaincopyprint?
public pageA()
{
InitializeComponent();
this.myItemControl.ItemsSource = new string[] {
"玉米炒蛋",
"烧鸭饭",
"青瓜炒肉",
"水煮豆腐",
"糯米鸡"
};
}
好的,不要流口水啊,现在,你可以运行你的超级项目了。
你应该发现了,列表的每一项都是以文本的方式显示,其实,它内部默认就是一个TextBlock,就是用来显示文本的。
那么,如果我设置的数据源不是字符会怎么样呢?
好现在看第二个例子。
先做好布局,和刚才的例子一样。
[html]
view plaincopyprint?
<phone:PhoneApplicationPage
x:Class="DataTemplateSample.pageB"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
.......
>
<ItemsControl Name="myItemsControl" FontSize="52"/>
</phone:PhoneApplicationPage>
接着我们定义一个商品类,包含三个属性:商品名称,单价,条码。
并把ItemsControl的数据源设置为商品类的集合。
[csharp]
view plaincopyprint?
public partial class pageB : PhoneApplicationPage
{
public pageB()
{
InitializeComponent();
System.Collections.ObjectModel.ObservableCollection<Goods> goodsList = new System.Collections.ObjectModel.ObservableCollection<Goods>
{
new Goods{GoodsName="纸飞机",Price=0.02f,BarCode ="21001475"},
new Goods{GoodsName="鸡蛋",Price=0.6f,BarCode="21002345"},
new Goods{GoodsName="干面包",Price=2.5f,BarCode="21003087"},
new Goods{GoodsName="地沟油",Price=33.4f,BarCode="21002020"},
new Goods{GoodsName="茅台啤酒",Price=108f,BarCode="21009331"}
};
this.myItemsControl.ItemsSource = goodsList;
}
}
public class Goods
{
/// <summary>
/// 商品价格
/// </summary>
public string GoodsName { get; set; }
/// <summary>
/// 商品单价
/// </summary>
public float Price { get; set; }
/// <summary>
/// 商品条形码
/// </summary>
public string BarCode { get; set; }
}
运行一下,啊,你会大吃一惊,怎么显示这内容?
(图1)
前文说了,数据模板默认是TextBlock控件,只能显示文本,那么,当它遇到非文本数据时,就会尝试调用数据源中类型的ToString方法,所以刚才的示例才会显示出类名,这是从Object类继承过来的ToString方法,现在我们把Goods类改一下,重写它的ToString方法,看看结果是啥。
[csharp]
view plaincopyprint?
public override string ToString()
{
return this.GoodsName;
}
这时候你再运行一下,看到商品名称了吧?
然而,你会发现,好像还没有满足我们的需求,我们希望每一项中同时显示商品名,单价,条码值,那怎么办呢?是的,这时候,就真的要自定义数据模板了。
把上面的XAML改一下。
[html]
view plaincopyprint?
<ItemsControl Name="myItemsControl" FontSize="52">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,27">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="商品:"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding GoodsName}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="单价:"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Price}"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="条码:"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding BarCode}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
好了,现在就基本达到我们的要求了。
(图2)
用白话文说,数据模板就是用来规范数据的显示方式的,关于模板,估计各位不陌生的,大家应该玩过PPT吧,都做过演示文稿吧,对啊,PPT里面有很多模板的,明白了吧?不明白?那你一定填过表吧,如果报考什么考试的,你肯定会被要求填一些什么报名表之类的,或者说,找过工用吗?是啊,做简历也有简历模板。模板的用法就像做填空题,有了部分规范的内容,然后你按照这个规范,在特定的位置填上恰当的内容,你总不能说把你的姓名填到“性别”那里去吧,这就不符合规范了。
好了,废话讲了不少,下面进入正题,你想想,哪些控件最有可能用到数据模板?哈,其实很多,只要是ContentControl的子类基本上都可以,如Button等,当然,这些控件一般没那必要,按钮嘛,多数情况下显示一些文本提示用户用来干什么的就可以了,顶多你放个图标在按钮上,估计也很少人把一段视频放在按钮上吧,呵呵,其实,在WP里面,这是可以的,但没有必要。
对的,一般列表形式的控件就最有可能使用到数据模板了,比如ListBox控件,如果你的列表控件只是让用户看信息的,而不需要额外操作,你完全可以考虑使用ListBox的“老爸”——ItemsControl。
好,下面我们用一个例子看看在不自定义数据模板的情况下,ItemsControl的列表项是如何显示的。
首先,当然是新建一个项目了,不用我介绍,相信各位都会。
你完全可以这样,把页面内的Grid根容器都删除,直接扔一个ItemsControl上面,就像这样。
[html]
view plaincopyprint?
<phone:PhoneApplicationPage
x:Class="DataTemplateSample.pageA"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
.......
>
<ItemsControl x:Name="myItemControl"/>
</phone:PhoneApplicationPage>
然后,切换到代码页,把myItemControl的数据源设置为一个字符串数组。
[csharp]
view plaincopyprint?
public pageA()
{
InitializeComponent();
this.myItemControl.ItemsSource = new string[] {
"玉米炒蛋",
"烧鸭饭",
"青瓜炒肉",
"水煮豆腐",
"糯米鸡"
};
}
好的,不要流口水啊,现在,你可以运行你的超级项目了。
你应该发现了,列表的每一项都是以文本的方式显示,其实,它内部默认就是一个TextBlock,就是用来显示文本的。
那么,如果我设置的数据源不是字符会怎么样呢?
好现在看第二个例子。
先做好布局,和刚才的例子一样。
[html]
view plaincopyprint?
<phone:PhoneApplicationPage
x:Class="DataTemplateSample.pageB"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
.......
>
<ItemsControl Name="myItemsControl" FontSize="52"/>
</phone:PhoneApplicationPage>
接着我们定义一个商品类,包含三个属性:商品名称,单价,条码。
并把ItemsControl的数据源设置为商品类的集合。
[csharp]
view plaincopyprint?
public partial class pageB : PhoneApplicationPage
{
public pageB()
{
InitializeComponent();
System.Collections.ObjectModel.ObservableCollection<Goods> goodsList = new System.Collections.ObjectModel.ObservableCollection<Goods>
{
new Goods{GoodsName="纸飞机",Price=0.02f,BarCode ="21001475"},
new Goods{GoodsName="鸡蛋",Price=0.6f,BarCode="21002345"},
new Goods{GoodsName="干面包",Price=2.5f,BarCode="21003087"},
new Goods{GoodsName="地沟油",Price=33.4f,BarCode="21002020"},
new Goods{GoodsName="茅台啤酒",Price=108f,BarCode="21009331"}
};
this.myItemsControl.ItemsSource = goodsList;
}
}
public class Goods
{
/// <summary>
/// 商品价格
/// </summary>
public string GoodsName { get; set; }
/// <summary>
/// 商品单价
/// </summary>
public float Price { get; set; }
/// <summary>
/// 商品条形码
/// </summary>
public string BarCode { get; set; }
}
运行一下,啊,你会大吃一惊,怎么显示这内容?
(图1)
前文说了,数据模板默认是TextBlock控件,只能显示文本,那么,当它遇到非文本数据时,就会尝试调用数据源中类型的ToString方法,所以刚才的示例才会显示出类名,这是从Object类继承过来的ToString方法,现在我们把Goods类改一下,重写它的ToString方法,看看结果是啥。
[csharp]
view plaincopyprint?
public override string ToString()
{
return this.GoodsName;
}
这时候你再运行一下,看到商品名称了吧?
然而,你会发现,好像还没有满足我们的需求,我们希望每一项中同时显示商品名,单价,条码值,那怎么办呢?是的,这时候,就真的要自定义数据模板了。
把上面的XAML改一下。
[html]
view plaincopyprint?
<ItemsControl Name="myItemsControl" FontSize="52">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,27">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="商品:"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding GoodsName}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="单价:"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Price}"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="条码:"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding BarCode}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
好了,现在就基本达到我们的要求了。
(图2)
相关文章推荐
- Windows Phone开发(14):数据模板
- Windows Phone开发(14):数据模板
- Windows Phone开发(14):数据模板
- Windows Phone开发(14):数据模板
- Windows Phone开发(14):数据模板 转:http://blog.csdn.net/tcjiaan/article/details/7350849
- Windows Phone 8初学者开发—第10部分:数据绑定应用程序和透视应用程序项目模板简介
- Windows Phone 8初学者开发—第10部分:数据绑定应用程序和透视应用程序项目模板简介
- Windows Phone开发(16):样式和控件模板
- Windows phone 应用开发[14]-调用WebBrowser
- Windows phone 应用开发[2]-数据缓存[转载]
- Windows Phone开发(16):样式和控件模板
- win8开发之数据绑定控件Gridview以分组及不同项模板的形式呈现数据
- swift开发笔记14 - 解析json数据文件
- 基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用!
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
- django 简易博客开发 2( 模板和数据查询)
- Windows Phone开发(16):样式和控件模板
- 一款靓丽的html5后台管理模板代码下载,适合开发者进行后台数据开发
- Windows Phone开发(16):样式和控件模板
- Windows Phone开发之路(14) 加载位图