Windows Phone開發(fā)(14):數(shù)據(jù)模板
數(shù)據(jù)模板,如果你僅僅聽(tīng)到這個(gè)名詞,你一定很迷惑,什么來(lái)的?用來(lái)干什么的?不急,親,今天,我們一起來(lái)探索一下吧。
用白話文說(shuō),數(shù)據(jù)模板就是用來(lái)規(guī)范數(shù)據(jù)的顯示方式的,關(guān)于模板,估計(jì)各位不陌生的,大家應(yīng)該玩過(guò)PPT吧,都做過(guò)演示文稿吧,對(duì)啊,PPT里面有很多模板 的,明白了吧?不明白?那你一定填過(guò)表吧,如果報(bào)考什么考試的,你肯定會(huì)被要求填一些什么報(bào)名表之類的,或者說(shuō),找過(guò)工用嗎?是啊,做簡(jiǎn)歷也有簡(jiǎn)歷模板。 模板的用法就像做填空題,有了部分規(guī)范的內(nèi)容,然后你按照這個(gè)規(guī)范,在特定的位置填上恰當(dāng)?shù)膬?nèi)容,你總不能說(shuō)把你的姓名填到“性別”那里去吧,這就不符合 規(guī)范了。
好了,廢話講了不少,下面進(jìn)入正題,你想想,哪些控件最有可能用到數(shù)據(jù)模板?哈,其實(shí)很多,只要是ContentControl的子類基本上都可以,如 Button等,當(dāng)然,這些控件一般沒(méi)那必要,按鈕嘛,多數(shù)情況下顯示一些文本提示用戶用來(lái)干什么的就可以了,頂多你放個(gè)圖標(biāo)在按鈕上,估計(jì)也很少人把一 段視頻放在按鈕上吧,呵呵,其實(shí),在WP里面,這是可以的,但沒(méi)有必要。
對(duì)的,一般列表形式的控件就最有可能使用到數(shù)據(jù)模板了,比如ListBox控件,如果你的列表控件只是讓用戶看信息的,而不需要額外操作,你完全可以考慮使用ListBox的“老爸”——ItemsControl。
好,下面我們用一個(gè)例子看看在不自定義數(shù)據(jù)模板的情況下,ItemsControl的列表項(xiàng)是如何顯示的。
首先,當(dāng)然是新建一個(gè)項(xiàng)目了,不用我介紹,相信各位都會(huì)。
- <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>
然后,切換到代碼頁(yè),把myItemControl的數(shù)據(jù)源設(shè)置為一個(gè)字符串?dāng)?shù)組。
- public pageA()
- {
- InitializeComponent();
- this.myItemControl.ItemsSource = new string[] {
- "玉米炒蛋",
- "燒鴨飯",
- "青瓜炒肉",
- "水煮豆腐",
- "糯米雞"
- };
- }
好的,不要流口水啊,現(xiàn)在,你可以運(yùn)行你的超級(jí)項(xiàng)目了。
你應(yīng)該發(fā)現(xiàn)了,列表的每一項(xiàng)都是以文本的方式顯示,其實(shí),它內(nèi)部默認(rèn)就是一個(gè)TextBlock,就是用來(lái)顯示文本的。
那么,如果我設(shè)置的數(shù)據(jù)源不是字符會(huì)怎么樣呢?
好現(xiàn)在看第二個(gè)例子。
先做好布局,和剛才的例子一樣。
- <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>
接著我們定義一個(gè)商品類,包含三個(gè)屬性:商品名稱,單價(jià),條碼。
并把ItemsControl的數(shù)據(jù)源設(shè)置為商品類的集合。
- public partial class pageB : PhoneApplicationPage
- {
- public pageB()
- {
- InitializeComponent();
- em.Collections.ObjectModel.ObservableCollection<Goods> goodsList = new System.Collections.ObjectModel.ObservableCollection<Goods>
- {
- new Goods{GoodsName="紙飛機(jī)",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="茅臺(tái)啤酒",Price=108f,BarCode="21009331"}
- };
- this.myItemsControl.ItemsSource = goodsList;
- }
- }
- public class Goods
- {
- /// <summary>
- /// 商品價(jià)格
- /// </summary>
- public string GoodsName { get; set; }
- /// <summary>
- /// 商品單價(jià)
- /// </summary>
- public float Price { get; set; }
- /// <summary>
- /// 商品條形碼
- /// </summary>
- public string BarCode { get; set; }
- }
運(yùn)行一下,啊,你會(huì)大吃一驚,怎么顯示這內(nèi)容?
(圖1)
前文說(shuō)了,數(shù)據(jù)模板默認(rèn)是TextBlock控件,只能顯示文本,那么,當(dāng)它遇到非文本數(shù)據(jù)時(shí),就會(huì)嘗試調(diào)用數(shù)據(jù)源中類型的ToString方法,所以剛 才的示例才會(huì)顯示出類名,這是從Object類繼承過(guò)來(lái)的ToString方法,現(xiàn)在我們把Goods類改一下,重寫它的ToString方法,看看結(jié)果是什么。
- public override string ToString()
- {
- return this.GoodsName;
- }
這時(shí)候你再運(yùn)行一下,看到商品名稱了吧?
然而,你會(huì)發(fā)現(xiàn),好像還沒(méi)有滿足我們的需求,我們希望每一項(xiàng)中同時(shí)顯示商品名,單價(jià),條碼值,那怎么辦呢?是的,這時(shí)候,就真的要自定義數(shù)據(jù)模板了。
把上面的XAML改一下。
- <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="單價(jià):"/>
- <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>
好了,現(xiàn)在就基本達(dá)到我們的要求了。
(圖2)