Silverlight實用竅門系列：65.Silverlight的數據模板DataTemplate(一)使用數據模板

　　在Silverlight中，我們的數據列表顯示控件有ListBox、DataGrid等。對於顯示出來的數據條目樣式外觀的管理是通過DataTemplate（數據模板）來完成的。本節將從DataTemplate基礎說起如何使用DataTemplate。

　　首先我們準備數據源如下:

    /// <summary>
    /// 文章Model
    /// </summary>
    public class ArticleModel
    {
        public string ArtName { get; set; }

        public string ArtContent { get; set; }

        public string ArtAuthor { get; set; }

        public string ArtUpdateTime { get; set; }
    }

    /// <summary>
    /// 文章列表
    /// </summary>
    public class ArtList
    {
        public ArtList()
        {
            ArticleList = new List<ArticleModel>();
            ArticleList.Add(new ArticleModel() { ArtName = "成都", ArtContent = "天府之國", 
                ArtAuthor = "leung", ArtUpdateTime = "2012-04-05 11:12:36" });
            ArticleList.Add(new ArticleModel() { ArtName = "上海", ArtContent = "翡翠明珠", 
                ArtAuthor = "aiLen", ArtUpdateTime = "2012-05-16 21:32:10" });
            ArticleList.Add(new ArticleModel() { ArtName = "廣州", ArtContent = "沿海城市",
                ArtAuthor = "minghe", ArtUpdateTime = "2012-01-17 05:01:45" });
            ArticleList.Add(new ArticleModel() { ArtName = "西藏", ArtContent = "高原城市", 
                ArtAuthor = "weifeng", ArtUpdateTime = "2012-03-22 09:30:14" });
        }

        /// <summary>
        /// 文章列表屬性
        /// </summary>
        public List<ArticleModel> ArticleList { get; set; }
    }

　　如何在前臺控件中綁定數據源呢？如同上一節所述，設置一個靜態資源

    //引用域名空間 

   xmlns:local="clr-namespace:SLDataTemplate"
　　//初始化爲靜態資源

      <UserControl.Resources>
        <local:ArtList x:Key="SourceList"></local:ArtList>
      </UserControl.Resources>
   //設置爲數據上下文

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource SourceList}">
　 　　//設置數據源綁定

        <ListBox  x:Name="lbArt" ItemsSource="{Binding ArticleList}" />
    </Grid>

 

　　其次以ListBox爲例，在本文中有三種方式：

　　　　一、在ListBox.ItemTemplate中直接添加DataTemplate。

        <ListBox  x:Name="lbArt" ItemsSource="{Binding ArticleList}"  Width="350"
                  Height="300" HorizontalAlignment="Left" VerticalAlignment="Top" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding ArtName}"></TextBlock>
                        <TextBox Text="{Binding ArtContent}"></TextBox>
                        <TextBox Text="{Binding ArtAuthor}"></TextBox>
                        <TextBlock Text="{Binding ArtUpdateTime}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

　　　　二、將DataTemplate作爲Resources，ListBox中屬性 ItemTemplate="{StaticResource lbTmp}"引用。

    <UserControl.Resources>
        <DataTemplate x:Key="lbTmp">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ArtName}"></TextBlock>
                <TextBox Text="{Binding ArtContent}"></TextBox>
                <TextBox Text="{Binding ArtAuthor}"></TextBox>
                <TextBlock Text="{Binding ArtUpdateTime}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

        <ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}" 
                 ItemTemplate="{StaticResource lbTmp}" Margin="370 0 0 0 "
                 HorizontalAlignment="Left" VerticalAlignment="Top"
                 Width="350" Height="300" >
        </ListBox>

　　　　三、將DataTemplate在後臺代碼編寫，然後在後臺代碼中指定。

 　　　 //前臺代碼

       <ListBox x:Name="lbCsRet" Margin="0 370 0 0 " HorizontalAlignment="Left"
                 VerticalAlignment="Top" Width="350" Height="300" >
        </ListBox>

 

　　　　 //後臺代碼


        public MainPage()
        {
            InitializeComponent();
            DataTemplate dtemp = GetTemplate();
            this.lbCsRet.ItemTemplate = dtemp;
            this.lbCsRet.ItemsSource = new ArtList().ArticleList;
        }
        private DataTemplate GetTemplate()
        {
            string xamlString = @"<DataTemplate       
            xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""   
            xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
                <StackPanel Orientation=""Horizontal"">
                    <TextBlock Text=""{Binding ArtName}""></TextBlock>
                    <TextBox Text=""{Binding ArtContent}""></TextBox>
                    <TextBox Text=""{Binding ArtAuthor}""></TextBox>
                    <TextBlock Text=""{Binding ArtUpdateTime}""></TextBlock>
                </StackPanel>   
            </DataTemplate>";
            return (DataTemplate)XamlReader.Load(xamlString);
        }

　　　　最後我們可以看看同樣在DataGrid中使用DataTemplate。

        <sdk:DataGrid ItemsSource="{Binding ArticleList}" Margin="370 370 0 0 "
                      HorizontalAlignment="Left" VerticalAlignment="Top" 
                      Width="350" Height="300" AutoGenerateColumns="False" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn Header="列表" CellTemplate="{StaticResource lbTmp}">
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

　　下面我們來看看運行效果，如需源碼請點擊 SLDataTemplate.zip 下載。