ylbtech-SilverLight-DataBinding-DataTemplates: 三、数据绑定 DataTemplates模板的使用
  • 1.A, Data Templates Intro(数据模板说明)
  • 1.B, Separating and Resuing Templates(分离和复用模板)
  • 1.C, More Advanced Templates(更先进的模板)
  • 1.D, Changing Items Layout(改变项目布局)

测试数据地址：http://www.cnblogs.com/ylbtech/p/3434972.html 的“1.A, Product.cs 产品类”

1.A, Data Templates Intro(数据模板说明)返回顶部
1,
最好的方式来了解数据模板的工作原理是首先基本列表,不使用一个模板。例如,考虑这个列表框,这是先前所显示的:
<ListBox Name="lstProducts" DisplayMemberPath="ModelName"></ListBox>

你可以得到同样的效果和这个列表框,使用一个数据模板:

<ListBox Name="lstProducts">

    <ListBox.ItemTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding ModelName}"></TextBlock>

        </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

4,

1.B, Separating and Reusing Templates(分离和重用模板)返回顶部
1,图片
1.1, 目标效果图
1.2, 实际效果图
2,
2.1/3,[无]
2.2/3,
<Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

<Grid x:Name="LayoutRoot" Background="White" Margin="3">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="200"></ColumnDefinition>

        <ColumnDefinition Width="*"></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <Grid Grid.Row="0" Margin="3">

        <Grid.RowDefinitions>

            <RowDefinition Height="30"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <Button Grid.Row="0" Name="btnSearch" Content="Get Prdouct" Margin="3"></Button>

        <ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch" SelectionChanged="lstProduct_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                        <Border>

                            <Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

                        <Grid Margin="3">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto"></RowDefinition>

                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <TextBlock Grid.Row="0" Text="{Binding ProductId}" FontWeight="Bold"></TextBlock>

                            <TextBlock Grid.Row="1" Text="{Binding ProductName}"></TextBlock>

                        </Grid>

                    </Border>

                        </Border>

                    </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

        </Grid>

    <Grid Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"  x:Name="gridDetailProduct" Margin="3" Background="LightGray">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="115"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Margin="7">Product Id:</TextBlock>

        <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding ProductId}"></TextBox>

        <TextBlock Grid.Row="1" Grid.Column="0" Margin="7">Product Name:</TextBlock>

        <TextBox Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding ProductName}"></TextBox>

        <TextBlock Grid.Row="2" Grid.Column="0" Margin="7">Quantity Per Unit:</TextBlock>

        <TextBox Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding QuantityPerUnit}"></TextBox>

        <TextBlock Grid.Row="3" Grid.Column="0" Margin="7">Unit Price:</TextBlock>

        <TextBox Grid.Row="3" Grid.Column="1" Margin="5" Text="{Binding UnitPrice}"></TextBox>

        <TextBlock Grid.Row="4" Grid.Column="0" Margin="7">Description:</TextBlock>

        <TextBox Grid.Row="4" Grid.Column="1" Grid.RowSpan="2" Margin="5"

            Text="{Binding Description}" TextWrapping="Wrap" ></TextBox>

    </Grid>

</Grid>

</Border>

2.3/3,

using System.Windows.Controls;

using SLYlbtechApp.Access;

namespace SLYlbtechApp.DataBinding.DataTemplates

{

    public partial class SeparatingAndResuingTemplates : UserControl

    {

        public SeparatingAndResuingTemplates()

        {

            InitializeComponent();

            this.lstProduct.ItemsSource = Product.GetAll();

        }

        private void lstProduct_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            this.gridDetailProduct.DataContext = this.lstProduct.SelectedItem;

        }

    }

}

3,代码摘要

<ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch" SelectionChanged="lstProduct_SelectionChanged">

    <ListBox.ItemTemplate>

        <DataTemplate>

                <Border>

                    <Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

                <Grid Margin="3">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding ProductId}" FontWeight="Bold"></TextBlock>

                    <TextBlock Grid.Row="1" Text="{Binding ProductName}"></TextBlock>

                </Grid>

            </Border>

                </Border>

            </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

4,

1.C, More Advanced Templates(更先进的模板) 返回顶部
1, 图片
1.1, 目标效果图
1.2, 实际效果图
2,
2.1/3,[无]
2.2/3,
<UserControl.Resources>

    <!--数据模板 begin-->

    <DataTemplate x:Key="ProductDataTemplate">

        <Border>

            <Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

                <Grid Margin="3">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding ProductId}" FontWeight="Bold"></TextBlock>

                    <TextBlock Grid.Row="1" Text="{Binding ProductName}"></TextBlock>

                    <Image  Grid.Row="2" Source="{Binding ProductImagePath}"></Image>

                </Grid>

            </Border>

        </Border>

    </DataTemplate>

    <!--数据模板 end-->

</UserControl.Resources>

<Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

    <Grid x:Name="LayoutRoot" Background="White" Margin="3">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="200"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Margin="3">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Button Grid.Row="0" Name="btnSearch" Content="Get Prdouct" Margin="3"></Button>

            <!--ListBox 使用数据模板-->

            <ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch"

                        SelectionChanged="lstProduct_SelectionChanged" ItemTemplate="{StaticResource ProductDataTemplate}">

            </ListBox>

        </Grid>

        <Grid Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"  x:Name="gridDetailProduct" Margin="3" Background="LightGray">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="115"></ColumnDefinition>

                <ColumnDefinition Width="*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Margin="7">Product Id:</TextBlock>

            <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding ProductId}"></TextBox>

            <TextBlock Grid.Row="1" Grid.Column="0" Margin="7">Product Name:</TextBlock>

            <TextBox Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding ProductName}"></TextBox>

            <TextBlock Grid.Row="2" Grid.Column="0" Margin="7">Quantity Per Unit:</TextBlock>

            <TextBox Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding QuantityPerUnit}"></TextBox>

            <TextBlock Grid.Row="3" Grid.Column="0" Margin="7">Unit Price:</TextBlock>

            <TextBox Grid.Row="3" Grid.Column="1" Margin="5" Text="{Binding UnitPrice}"></TextBox>

            <TextBlock Grid.Row="4" Grid.Column="0" Margin="7">Description:</TextBlock>

            <TextBox Grid.Row="4" Grid.Column="1" Grid.RowSpan="2" Margin="5"

            Text="{Binding Description}" TextWrapping="Wrap" ></TextBox>

        </Grid>

    </Grid>

</Border>

2.3/3, 代码同上 1.B.2.3/3

3,代码摘要
3.1/2, 做这个工作,你所需要做的是定义你的数据模板在一个资源收集和给它一个键名。这里的一个例子,提取模板所示前面的示例:
<UserControl.Resources>

    <!--数据模板 begin-->

    <DataTemplate x:Key="ProductDataTemplate">

        <Border>

            <Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

                <Grid Margin="3">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding ProductId}" FontWeight="Bold"></TextBlock>

                    <TextBlock Grid.Row="1" Text="{Binding ProductName}"></TextBlock>

                    <Image  Grid.Row="2" Source="{Binding ProductImagePath}"></Image>

                </Grid>

            </Border>

        </Border>

    </DataTemplate>

    <!--数据模板 end-->

</UserControl.Resources>

3.2/2,现在你可以使用你的数据模板使用StaticResource参考:

<!--ListBox 使用数据模板-->

<ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch"

            SelectionChanged="lstProduct_SelectionChanged" ItemTemplate="{StaticResource ProductDataTemplate}">

</ListBox>

4,

1.D, Changing Items Layout(改变项目布局)返回顶部
1, 图片
1.1, 目标效果图
1.2, 实际效果图
2,
2.1/3,
xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

2.2/3,

<UserControl.Resources>

    <!--数据模板 begin-->

    <DataTemplate x:Key="ProductDataTemplate">

        <Border>

            <Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

                <Grid Margin="3">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding ProductId}" FontWeight="Bold"></TextBlock>

                    <TextBlock Grid.Row="1" Text="{Binding ProductName}"></TextBlock>

                    <Image  Grid.Row="2" Source="{Binding ProductImagePath}"></Image>

                </Grid>

            </Border>

        </Border>

    </DataTemplate>

    <!--数据模板 end-->

</UserControl.Resources>

<Border Margin="5" BorderBrush="SteelBlue" BorderThickness="1" CornerRadius="4">

    <Grid x:Name="LayoutRoot" Background="White" Margin="3">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="200"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Margin="3">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Button Grid.Row="0" Name="btnSearch" Content="Get Prdouct" Margin="3"></Button>

            <!--ListBox 使用数据模板-->

            <ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch"

                        SelectionChanged="lstProduct_SelectionChanged" ItemTemplate="{StaticResource ProductDataTemplate}">

                <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <controlsToolkit:WrapPanel></controlsToolkit:WrapPanel>

                    </ItemsPanelTemplate>

                </ListBox.ItemsPanel>

            </ListBox>

        </Grid>

        <Grid Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"  x:Name="gridDetailProduct" Margin="3" Background="LightGray">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="Auto"></RowDefinition>

                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="115"></ColumnDefinition>

                <ColumnDefinition Width="*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Margin="7">Product Id:</TextBlock>

            <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding ProductId}"></TextBox>

            <TextBlock Grid.Row="1" Grid.Column="0" Margin="7">Product Name:</TextBlock>

            <TextBox Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding ProductName}"></TextBox>

            <TextBlock Grid.Row="2" Grid.Column="0" Margin="7">Quantity Per Unit:</TextBlock>

            <TextBox Grid.Row="2" Grid.Column="1" Margin="5" Text="{Binding QuantityPerUnit}"></TextBox>

            <TextBlock Grid.Row="3" Grid.Column="0" Margin="7">Unit Price:</TextBlock>

            <TextBox Grid.Row="3" Grid.Column="1" Margin="5" Text="{Binding UnitPrice}"></TextBox>

            <TextBlock Grid.Row="4" Grid.Column="0" Margin="7">Description:</TextBlock>

            <TextBox Grid.Row="4" Grid.Column="1" Grid.RowSpan="2" Margin="5"

            Text="{Binding Description}" TextWrapping="Wrap" ></TextBox>

        </Grid>

    </Grid>

</Border>

2.3/3, 代码同上 1.B.2.3/3

3,代码摘要
数据模板给你非凡的控制各方面的项目演示。然而,他们不允许你改变项目组织与尊重对方。没有不管你使用的模板和样式,列表框将每个项目到一个单独的水平行和栈的每一行创建列表。你可以改变这个布局取代容器列表使用奠定了的派生。这样做,你们设置ItemsPanel财产与一块XAML,定义了面板你想使用。这个小组可以是任何类,来源于系统windows控制面板,包括一个自定义布局容器实现你自己的专业布局逻辑。
以下使用WrapPanel从Silverlight Toolkit(http://www.codeplex.com/Silverlight),这是在第三章描述。它安排项目从左到右的多个行:
<!--ListBox 使用数据模板-->

<ListBox Grid.Row="1" Name="lstProduct" Margin="3" HorizontalContentAlignment="Stretch"

            SelectionChanged="lstProduct_SelectionChanged" ItemTemplate="{StaticResource ProductDataTemplate}">

    <ListBox.ItemsPanel>

        <ItemsPanelTemplate>

            <controlsToolkit:WrapPanel></controlsToolkit:WrapPanel>

        </ItemsPanelTemplate>

    </ListBox.ItemsPanel>

</ListBox>

4,

1.E, 参考资料返回顶部
 
[Silverlight.3.高级编程(C#篇)].Apress.Pro.Silverlight.3.in.C.Sharp.Oct.2009
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

SilverLight-DataBinding-DataTemplates: 三、数据绑定 DataTemplates模板的使用（求助，没有到达实例效果，求高人指点迷津）的更多相关文章

  1. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. ArcGIS网络分析之Silverlight客户端路径分析(三)

    原文:ArcGIS网络分析之Silverlight客户端路径分析(三) 首先贴上最终的效果图: a.路径查询 2.最近设施点查询 3.服务区分析 说明: 1.以上的示例使用的数据是随意在ArcMap中 ...

  3. C# 处理Word自动生成报告 三、设计模板

    C# 处理Word自动生成报告 一.概述 C# 处理Word自动生成报告 二.数据源例子 C# 处理Word自动生成报告 三.设计模板 C# 处理Word自动生成报告 四.程序处理 既然是模板就少不了 ...

  4. Silverlight DataBinding Converter：根据binding对象调整显示

    Silverlight DataBinding Converter:根据binding对象调整显示 我希望写一系列关于Silverlight DataBinding的文章,分别讲解Silverligh ...

  5. asp.net mvc 之旅—— 第三站 路由模板中强大的自定义IRouteConstraint约束

    我们在写mvc的时候,经常会配置各种url模板,比如controller,action,id 组合模式,其实呢,我们还可以对这三个参数进行单独的配置,采用的方式自然 就是MapRoute中的const ...

  6. Silverlight 中 TreeView 的数据绑定

    方法一:Silverlight使用XAML标记语言来编写,如果不使用XAML强大的绑定功能,实在是罪过.通过使用绑定,可以将UI与视图模型层分离,有利于系统的维护.作为Silverlight中比较有代 ...

  7. DTCMS插件的制作实例电子资源管理（三）前台模板页编写

    总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...

  8. 最短路问题的三种算法&模板

    最短路算法&模板 最短路问题是图论的基础问题.本篇随笔就图论中最短路问题进行剖析,讲解常用的三种最短路算法:Floyd算法.Dijkstra算法及SPFA算法,并给出三种算法的模板.流畅阅读本 ...

  9. Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解

    Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...

随机推荐

  1. LeetCode668马在棋盘上的概率

    已知一个 NxN 的国际象棋棋盘,棋盘的行号和列号都是从 0 开始.即最左上角的格子记为 (0, 0),最右下角的记为 (N-1, N-1). 现有一个 “马”(也译作 “骑士”)位于 (r, c)  ...

  2. mouseClicked、mousePressed、mouseReleased 的区别

    2014年03月16日 21:12:10 xiaobineric 阅读数 9681 标签: 鼠标 事件   关于这3个事件,一直搞不清楚甚至混淆,也已经有一些人说过,但觉得不够明白,最近看了一段教材的 ...

  3. Spread.js 上下级关系

  4. 【bzoj4012】[HNOI2015]开店 动态点分治+STL-vector

    题目描述 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的想法当然非常好啦,但是她们也发现她们面临着一个问题 ...

  5. git版本控制的常用指令

    使用git版本控制之前,首先安装好git,安装方式比如可以通过下载客户等方式来安装:这里提供网址:http://windows.github.com/ 1.登入远程仓库,创建仓库2.复制仓库地址3.在 ...

  6. [luogu2044][NOI2012] 随机数生成器 [矩阵快速幂]

    题面: 传送门 思路: 看一眼这个公式: $x\left[n+1\right]=\left(a\ast x\left[n\right]+c\right) mod m$ 递推,数据范围$n\leq 10 ...

  7. BZOJ4737 组合数问题 【Lucas定理 + 数位dp】

    题目 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3)三个物品中选择两个物品可以有( 1,2),(1,3),(2,3)这三种选择方法.根据组合数的定义,我们可以给 ...

  8. Codeforces Round #321 (Div. 2) B 二分+预处理

    B. Kefa and Company time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. Struts框架详解

    1.Struts应用框架介绍 (1)框架 框架最简单的形式是指已开发过并已测试过的软件的程序块,这些程序块可以在多个软件开发工程中重用.框架提供了一个概括的体系结构模版,可以用这个模板来构建特定领域中 ...

  10. 洛谷 P1342 请柬

    题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片.他们已经打印请帖和所有必要的信息和计划.许多学生被雇来分发这些请 ...