SilverLight-DataBinding-DataTemplates: 三、数据绑定 DataTemplates模板的使用（求助，没有到达实例效果，求高人指点迷津）
| 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模板的使用（求助，没有到达实例效果，求高人指点迷津）的更多相关文章
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- ArcGIS网络分析之Silverlight客户端路径分析(三)
原文:ArcGIS网络分析之Silverlight客户端路径分析(三) 首先贴上最终的效果图: a.路径查询 2.最近设施点查询 3.服务区分析 说明: 1.以上的示例使用的数据是随意在ArcMap中 ...
- C# 处理Word自动生成报告 三、设计模板
C# 处理Word自动生成报告 一.概述 C# 处理Word自动生成报告 二.数据源例子 C# 处理Word自动生成报告 三.设计模板 C# 处理Word自动生成报告 四.程序处理 既然是模板就少不了 ...
- Silverlight DataBinding Converter：根据binding对象调整显示
Silverlight DataBinding Converter:根据binding对象调整显示 我希望写一系列关于Silverlight DataBinding的文章,分别讲解Silverligh ...
- asp.net mvc 之旅—— 第三站 路由模板中强大的自定义IRouteConstraint约束
我们在写mvc的时候,经常会配置各种url模板,比如controller,action,id 组合模式,其实呢,我们还可以对这三个参数进行单独的配置,采用的方式自然 就是MapRoute中的const ...
- Silverlight 中 TreeView 的数据绑定
方法一:Silverlight使用XAML标记语言来编写,如果不使用XAML强大的绑定功能,实在是罪过.通过使用绑定,可以将UI与视图模型层分离,有利于系统的维护.作为Silverlight中比较有代 ...
- DTCMS插件的制作实例电子资源管理（三）前台模板页编写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
- 最短路问题的三种算法&模板
最短路算法&模板 最短路问题是图论的基础问题.本篇随笔就图论中最短路问题进行剖析,讲解常用的三种最短路算法:Floyd算法.Dijkstra算法及SPFA算法,并给出三种算法的模板.流畅阅读本 ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
随机推荐
- 再写一篇tps限流
再写一篇tps限流 各种限流算法的称呼 网上有很多文章介绍限流算法,但是对于这些算法的称呼与描述也是有点难以理解.不管那么多了.我先按我理解的维度梳理一下. 主要维度是:是正向计数还是反向计数.是定点 ...
- Python实现对百度云的文件上传
环境准备 python3.6 PyCharm 2017.1.3 Windows环境 框架搭建 selenium3.6 安装方法: pip install selenium 实现步骤: 一.步骤分析 1 ...
- 树中两个结点的最低公共祖先--java
题目:对于任意一个树,不仅仅限于二叉树,求树中两个结点的最低公共祖先结点. 解析:对于任意一棵树,显然并不局限于二叉树,也就是说树的非叶子结点可能存在多个子节点.所以,我们可以定义两个链表结构,存储这 ...
- get_class 方法
get_class 返回对象的类名 get_class (PHP 4, PHP 5) get_class — 返回对象的类名 说明 string get_class ([ object $obj ] ...
- 【bzoj4896】[Thu Summer Camp2016]补退选 Trie树+STL-vector
题目描述 X是T大的一名老师,每年他都要教授许多学生基础的C++知识.在T大,每个学生在每学期的开学前都需要选课,每次选课一共分为三个阶段:预选,正选,补退选:其中"补退选"阶段最 ...
- BZOJ 3674 可持久化并查集加强版（主席树变形）
3673: 可持久化并查集 by zky Time Limit: 5 Sec Memory Limit: 128 MB Submit: 2515 Solved: 1107 [Submit][Sta ...
- canvas图片跨域问题
canvas的drawImage使用跨域图片时候,会报错,解决方法如下: 1. 使用base64替换跨域图片 如果图片不大,且只有几张,可以使用base64,来代替跨域引用图片. 2. 设置image ...
- tomcat 启动慢解决(/dev/random)
JRE默认使用 /dev/random作为随机数来源,当熵池大小不够的时候,random会很慢,造成随机数生成调用阻塞. 解决方案: 改用 /dev/urandom (1) tomcat的启动选项增加 ...
- js scrollTop, 滚动条操作
设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){ var h = $(document).height()-$(window).height() ...
- error: expected class-name before '{' token（转）
错误原因 1. 头文件引用的类中,结尾可能少了; ,, 例如:class Cwj{} 忘记了以;结尾哦. 2. 引用的头文件的顺序先后相互冲突:例如:Msg类中包含了#includ ...