Windows Phone開發（14）：數據模板

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

好，下面我們用一個例子看看在不自定義數據模板的情況下，ItemsControl的列表項是如何顯示的。
首先，當然是新建一個項目了，不用我介紹，相信各位都會。
你完全可以這樣，把頁面內的Grid根容器都刪除，直接扔一個ItemsControl上面，就像這樣。

 

<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的數據源設置爲一個字符串數組。

public pageA()
{
    InitializeComponent();

    this.myItemControl.ItemsSource = new string[] {
                "玉米炒蛋",
                "燒鴨飯",
                "青瓜炒肉",
                "水煮豆腐",
                "糯米雞"
    };
}

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

<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的數據源設置爲商品類的集合。

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方法，看看結果是啥。

public override string ToString()
{
    return this.GoodsName;
}

 

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

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

把上面的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="單價："/>
                <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）