Windows Phone開發（14）：資料範本

資料範本，如果你僅僅聽到這個名詞，你一定很迷惑，什麼來的？用來幹什麼的？不急，親，今天，我們一起來探索一下吧。
用白話文說，資料範本就是用來規範資料的顯示方式的，關於模板，估計各位不陌生的，大家應該玩過PPT吧，都做過簡報吧，對啊，PPT裡面有很多模板的，明白了吧？不明白？那你一定填過表吧，如果報考什麼考試的，你肯定會被要求填一些什麼報名表之類的，或者說，找過工用嗎？是啊，做簡曆也有簡曆模板。模板的用法就像做填空題，有了部分規範的內容，然後你按照這個規範，在特定的位置填上恰當的內容，你總不能說把你的姓名填到“性別”那裡去吧，這就不符合規範了。
好了，廢話講了不少，下面進入正題，你想想，哪些控制項最有可能用到資料範本？哈，其實很多，只要是ContentControl的子類基本上都可以，如Button等，當然，這些控制項一般沒那必要，按鈕嘛，多數情況下顯示一些文本提示使用者用來幹什麼的就可以了，頂多你放個表徵圖在按鈕上，估計也很少人把一段視頻放在按鈕上吧，呵呵，其實，在WP裡面，這是可以的，但沒有必要。
對的，一般列表形式的控制項就最有可能使用到資料範本了，比如ListBox控制項，如果你的清單控制項只是讓使用者看資訊的，而不需要額外操作，你完全可以考慮使用ListBox的“老爸”——ItemsControl。

好，下面我們用一個例子看看在不自訂資料範本的情況下，ItemsControl的清單項目是如何顯示的。
首先，當然是建立一個項目了，不用我介紹，相信各位都會。
你完全可以這樣，把頁面內的Grid根容器都刪除，直接扔一個ItemsControl上面，就像這樣。

 

<phone:PhoneApplicationPage<br /> x:Class="DataTemplateSample.pageA"<br /> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br /> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br /> xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"<br /> xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"<br /> xmlns:d="http://schemas.microsoft.com/expression/blend/2008"<br /> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"<br /> FontFamily="{StaticResource PhoneFontFamilyNormal}"<br /> .......<br /> ></p><p> <ItemsControl x:Name="myItemControl"/></p><p></phone:PhoneApplicationPage>

然後，切換到字碼頁，把myItemControl的資料來源設定為一個字串數組。

public pageA()<br /> {<br /> InitializeComponent();</p><p> this.myItemControl.ItemsSource = new string[] {<br /> "玉米炒蛋",<br /> "燒鴨飯",<br /> "青瓜炒肉",<br /> "水煮豆腐",<br /> "糯米雞"<br /> };<br /> }

好的，不要流口水啊，現在，你可以運行你的超級項目了。
你應該發現了，列表的每一項都是以文本的方式顯示，其實，它內部預設就是一個TextBlock，就是用來顯示文本的。
那麼，如果我設定的資料來源不是字元會怎麼樣呢？
好現在看第二個例子。
先做好布局，和剛才的例子一樣。

<phone:PhoneApplicationPage<br /> x:Class="DataTemplateSample.pageB"<br /> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br /> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br /> xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"<br /> xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"<br /> xmlns:d="http://schemas.microsoft.com/expression/blend/2008"<br /> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"<br /> .......<br /> ></p><p> <ItemsControl Name="myItemsControl" FontSize="52"/></p><p></phone:PhoneApplicationPage>

接著我們定義一個商品類，包含三個屬性：商品名稱，單價，條碼。
並把ItemsControl的資料來源設定為商品類的集合。

public partial class pageB : PhoneApplicationPage<br /> {<br /> public pageB()<br /> {<br /> InitializeComponent();</p><p> System.Collections.ObjectModel.ObservableCollection<Goods> goodsList = new System.Collections.ObjectModel.ObservableCollection<Goods><br /> {<br /> new Goods{GoodsName="紙飛機",Price=0.02f,BarCode ="21001475"},<br /> new Goods{GoodsName="雞蛋",Price=0.6f,BarCode="21002345"},<br /> new Goods{GoodsName="乾麵包",Price=2.5f,BarCode="21003087"},<br /> new Goods{GoodsName="地溝油",Price=33.4f,BarCode="21002020"},<br /> new Goods{GoodsName="茅台啤酒",Price=108f,BarCode="21009331"}<br /> };<br /> this.myItemsControl.ItemsSource = goodsList;<br /> }<br /> }</p><p> public class Goods<br /> {<br /> /// <summary><br /> /// 商品價格<br /> /// </summary><br /> public string GoodsName { get; set; }</p><p> /// <summary><br /> /// 商品單價<br /> /// </summary><br /> public float Price { get; set; }</p><p> /// <summary><br /> /// 商品條碼<br /> /// </summary><br /> public string BarCode { get; set; }<br /> }

 

運行一下，啊，你會大吃一驚，怎麼顯示這內容？
（圖1）

前文說了，資料範本預設是TextBlock控制項，只能顯示文本，那麼，當它遇到非文本資料時，就會嘗試調用資料來源中類型的ToString方法，所以剛才的樣本才會顯示出類名，這是從Object類繼承過來的ToString方法，現在我們把Goods類改一下，重寫它的ToString方法，看看結果是啥。

public override string ToString()<br /> {<br /> return this.GoodsName;<br /> }

 

這時候你再運行一下，看到商品名稱了吧？

然而，你會發現，好像還沒有滿足我們的需求，我們希望每一項中同時顯示商品名，單價，條碼值，那怎麼辦呢？是的，這時候，就真的要自訂資料範本了。

把上面的XAML改一下。

<ItemsControl Name="myItemsControl" FontSize="52"><br /> <ItemsControl.ItemTemplate><br /> <DataTemplate><br /> <Grid Margin="0,0,0,27"><br /> <Grid.ColumnDefinitions><br /> <ColumnDefinition Width="auto"/><br /> <ColumnDefinition Width="*"/><br /> </Grid.ColumnDefinitions><br /> <Grid.RowDefinitions><br /> <RowDefinition Height="auto"/><br /> <RowDefinition Height="auto"/><br /> <RowDefinition Height="auto"/><br /> </Grid.RowDefinitions><br /> <TextBlock Grid.Column="0" Grid.Row="0" Text="商品："/><br /> <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding GoodsName}"/><br /> <TextBlock Grid.Column="0" Grid.Row="1" Text="單價："/><br /> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Price}"/><br /> <TextBlock Grid.Column="0" Grid.Row="2" Text="條碼："/><br /> <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding BarCode}"/><br /> </Grid><br /> </DataTemplate><br /> </ItemsControl.ItemTemplate><br /> </ItemsControl>

好了，現在就基本達到我們的要求了。
（圖2）