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

  

posted @ 2012-05-07 11:25  程兴亮  阅读(4646)  评论(3编辑  收藏