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



本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2012/05/07/2482892.html,如需转载请自行联系原作者


相关文章
|
数据安全/隐私保护
Solid Converter PDF v10 安装及使用教程
Solid Converter PDF v10 安装及使用教程
1120 0
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
《揭开DeepSeek神秘面纱:复杂逻辑推理背后的技术机制》
DeepSeek是一款基于Transformer架构的大语言模型,以其在复杂逻辑推理任务上的卓越表现成为行业焦点。它通过自注意力机制高效捕捉长距离依赖关系,结合强化学习优化推理策略,利用思维链技术拆解复杂问题,并经过多阶段训练与精调提升推理能力。此外,DeepSeek融合知识图谱和外部知识,拓宽推理边界,使其在处理专业领域问题时更加准确和全面。这些先进技术使DeepSeek能够像人类一样思考和推理,为解决复杂问题提供强大支持。
810 11
|
存储 缓存 NoSQL
常见的 NoSQL 数据库有哪些?
常见的 NoSQL 数据库有哪些?
806 59
|
机器学习/深度学习 人工智能 城市大脑
阿里云 ET
阿里云 ET自制脑图, 由阿里云科学家团队研发的超级人工智能ET,是杭州城市大脑背后的人工智能中枢,也是阿里巴巴集团董事局主席马云眼中的下一代 CEO。阿里云 ET 拥有全球领先的人工智能技术。
1095 0
阿里云 ET
|
安全 网络协议 Linux
Linux操作系统的内核升级与优化策略####
【10月更文挑战第29天】 本文深入探讨了Linux操作系统内核升级的重要性,并详细阐述了一系列优化策略,旨在帮助系统管理员和高级用户提升系统的稳定性、安全性和性能。通过实际案例分析,我们展示了如何安全有效地进行内核升级,以及如何利用调优技术充分发挥Linux系统的潜力。 ####
357 1
|
人工智能 安全 测试技术
从数字化转型到AI驱动的商业模式变革 领导者如何把握好未来的竞争力
从数字化转型到AI驱动的商业模式变革 领导者如何把握好未来的竞争力
|
机器学习/深度学习 人工智能 自然语言处理
AIGC多模态学习
7月更文挑战第11天
|
存储 Java 中间件
详尽分享缓冲区(Buffer)
详尽分享缓冲区(Buffer)
510 0
|
Linux 开发工具 C++
Visual Studio 和 VSCode 哪个更好
Visual Studio(VS)与Visual Studio Code(VSCode)作为微软旗下的两款开发工具,各自在软件开发领域占据重要位置。VS作为功能全面的集成开发环境,适合企业级大型项目开发;而VSCode则以其轻量级、灵活性和强大的扩展性,赢得了广大开发者的青睐。
1277 0
|
存储 Web App开发 编译器
C语言程序设计——int,double,char的用法
C语言程序设计——int,double,char的用法