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 下载。