WP7 使用数据模板DataTemplate进行数据绑定

转载 2012年03月24日 20:41:28

一、DataTemplate

DataTemplate 类  描述数据对象的可视结构。
命名空间:  System.Windows

 XAML
 <DataTemplate ...>
  templateContent
</DataTemplate>

XAML 值
templateContent 
定义此 DataTemplate 的对象树。该树必须有一个根元素,而该根元素可以有零个或更多的子元素。

通常使用 DataTemplate 指定数据的直观表示。将 ItemsControl(如 ListBox)绑定到整个集合时,DataTemplate 对象尤其有用。可以使用 DataTemplate 定义数据对象的外观。DataTemplate 的内容变成数据对象的可视结构。

可以在 DataTemplate 中使用数据绑定。例如,假定 ListBox 绑定到 Customer 对象的集合,并且将 ItemTemplate 属性设置为 DataTemplate。创建 ListBox 时,将为集合中的每个 Customer 创建一个 ListBoxItem,并将 ListBoxItem 的 DataContext 设置为相应的客户。也就是说,第一个 ListBoxItem 的 DataContext 设置为第一个客户,第二个 ListBoxItem 的 DataContext 设置为第二个客户,依此类推。可以将 DataTemplate 中的元素绑定到 Customer 对象的属性。

定义用于创建数据模板的内容的 XAML 用法不作为可设置的属性公开。这是内置于 DataTemplate 对象元素的 XAML 处理的特殊行为。

示例
--------------------------------------------------------------------------------

下面的示例使用 DataTemplate 显示 ListBox 的项。在此示例中,ListBox 绑定到 Customer 对象的集合。DataTemplate 包含 TextBlock 控件,这些控件绑定到 FirstName、LastName 和 Address 属性。

 XAML  
<Grid>
    <Grid.Resources>
        <src:Customers x:Key="customers"/>
    </Grid.Resources>

    <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Padding="5,0,5,0"
          Text="{Binding FirstName}" />
                    <TextBlock Text="{Binding LastName}" />
                    <TextBlock Text=", " />
                    <TextBlock Text="{Binding Address}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>


下面的示例演示 Customer 类和 ListBox 绑定到的集合。
public class Customer
{
    public String FirstName { get; set; }
    public String LastName { get; set; }
    public String Address { get; set; }

    public Customer(String firstName, String lastName, String address)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Address = address;
    }

}

public class Customers : ObservableCollection<Customer>
{
    public Customers()
    {
        Add(new Customer("Michael", "Anderberg",
                "12 North Third Street, Apartment 45"));
        Add(new Customer("Chris", "Ashton",
                "34 West Fifth Street, Apartment 67"));
        Add(new Customer("Cassie", "Hicks",
                "56 East Seventh Street, Apartment 89"));
        Add(new Customer("Guido", "Pica",
                "78 South Ninth Street, Apartment 10"));
    }

}

二、DataTemplateSelector

DataTemplateSelector 类
提供一种方式来根据数据对象和数据绑定元素选择 DataTemplate。 
命名空间:  System.Windows.Controls

通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelector。

若要创建模板选择器,请创建继承自 DataTemplateSelector 的类并重写 SelectTemplate 方法。 在定义您的类后,就可以将类的实例分配到您的元素的模板选择器属性。

示例
--------------------------------------------------------------------------------

在此示例中,绑定源是 Task 对象的列表。 Task 对象的属性之一为 Priority。 有两个已定义的数据模板:myTaskTemplate 和 importantTaskTemplate。

若要提供逻辑以根据数据对象的 Priority 值选择要使用的 DataTemplate,请创建 DataTemplateSelector 的子类并重写 SelectTemplate 方法。 在下面的示例中,SelectTemplate 方法提供逻辑以根据 Priority 属性的值返回适当的模板。 可以在封装 Window 元素的资源中找到要返回的模板。

using System.Windows;
using System.Windows.Controls;

namespace SDKSample
{
    public class TaskListDataTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate
            SelectTemplate(object item, DependencyObject container)
        {
            if (item != null && item is Task)
            {
                Task taskitem = item as Task;
                Window window = Application.Current.MainWindow;

                if (taskitem.Priority == 1)
                    return
                        window.FindResource("importantTaskTemplate") as DataTemplate;
                else
                    return
                        window.FindResource("myTaskTemplate") as DataTemplate;
            }

            return null;
        }
    }
}


然后,我们可以将 TaskListDataTemplateSelector 声明为资源:

 XAML  复制 
<Window.Resources>


...


<local:TaskListDataTemplateSelector x:Key="myDataTemplateSelector"/>


...


</Window.Resources>


若要使用模板选择器资源,请将其分配到 ListBox 的 ItemTemplateSelector 属性。 ListBox 为基础集合中的每一项调用 TaskListDataTemplateSelector 的 SelectTemplate 方法。 该调用会将数据对象作为项参数来传递。 然后,将该方法返回的 DataTemplate 应用于该数据对象。

 XAML  
<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}"
         ItemTemplateSelector="{StaticResource myDataTemplateSelector}"
         HorizontalContentAlignment="Stretch"/>

三、ContentControl

ContentControl 可以包含任何类型的公共语言运行库对象(如字符串或 DateTime 对象)或 UIElement 对象(如 Rectangle 或 Panel)。 这使您能够向控件(如 Button 和 CheckBox)中添加丰富的内容。

ContentControl 具有有限的默认样式。 如果要增强该控件的外观,可以创建新的 DataTemplate

四、实例

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ListBox x:Name="listBox" HorizontalContentAlignment="Stretch"> <ListBox.ItemTemplate> <DataTemplate> <local:FoodTemplateSelector Content="{Binding}"> <local:FoodTemplateSelector.Healthy> <DataTemplate> <StackPanel Orientation="Horizontal" Background="YellowGreen" Width="400" Margin="10"> <Image Source="{Binding IconUri}" Stretch="None"/> <TextBlock Text="{Binding Name}" FontSize="40" Foreground="Black" Width="280"/> <TextBlock Text="healty" /> </StackPanel> </DataTemplate> </local:FoodTemplateSelector.Healthy> <local:FoodTemplateSelector.UnHealthy> <DataTemplate> <Border BorderBrush="Red" BorderThickness="2" Width="400" Margin="10"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding IconUri}" Stretch="None"/> <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/> <Image Source="Images/attention.png" Stretch="None" Margin="10,0,0,0"/> </StackPanel> </Border> </DataTemplate> </local:FoodTemplateSelector.UnHealthy> <local:FoodTemplateSelector.NotDetermined> <DataTemplate> <StackPanel Orientation="Horizontal" Background="Gray" Width="400" Margin="10"> <Image Source="{Binding IconUri}" Stretch="None"/> <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/> <Image Source="Images/question.png" Stretch="None" Margin="10,0,0,0"/> </StackPanel> </DataTemplate> </local:FoodTemplateSelector.NotDetermined> </local:FoodTemplateSelector> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Grid>
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace WP7SampleProject10 { public class FoodTemplateSelector : DataTemplateSelector { public DataTemplate Healthy { get; set; } public DataTemplate UnHealthy { get; set; } public DataTemplate NotDetermined { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { Data foodItem = item as Data; if (foodItem != null) { if (foodItem.Type == "Healthy") { return Healthy; } else if (foodItem.Type == "NotDetermined") { return NotDetermined; } else { return UnHealthy; } } return base.SelectTemplate(item, container); } } public class Data { public string Name { get; set; } public string Description { get; set; } public string IconUri { get; set; } public string Type { get; set; } } public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); List<Data> list = new List<Data>(); Data item0 = new Data() { Name = "Tomato", IconUri = "Images/Tomato.png", Type = "Healthy" }; Data item1 = new Data() { Name = "Beer", IconUri = "Images/Beer.png", Type = "NotDetermined" }; Data item2 = new Data() { Name = "Fries", IconUri = "Images/fries.png", Type = "Unhealthy" }; Data item3 = new Data() { Name = "Sandwich", IconUri = "Images/Hamburger.png", Type = "Unhealthy" }; Data item4 = new Data() { Name = "Ice-cream", IconUri = "Images/icecream.png", Type = "Healthy" }; Data item5 = new Data() { Name = "Pizza", IconUri = "Images/Pizza.png", Type = "Unhealthy" }; Data item6 = new Data() { Name = "Pepper", IconUri = "Images/Pepper.png", Type = "Healthy" }; list.Add(item0); list.Add(item1); list.Add(item2); list.Add(item3); list.Add(item4); list.Add(item5); list.Add(item6); this.listBox.ItemsSource = list; } } }
using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace WP7SampleProject10 { public abstract class DataTemplateSelector : ContentControl { public virtual DataTemplate SelectTemplate(object item, DependencyObject container) { return null; } protected override void OnContentChanged(object oldContent, object newContent) { base.OnContentChanged(oldContent, newContent); ContentTemplate = SelectTemplate(newContent, this); } } }

DataTemplate-根据条件选择不同模板

为了不同的条件选择模板,可以实现一个DataTemplateSelector。 模板选择器是继承自DataTemplateSelector派生并重写了SelectTemplate方法并返回了你需要的模...
  • LH806732
  • LH806732
  • 2014年09月30日 16:47
  • 1088

WPF中的数据模板(DataTemplate)

在WPF中我们可以为自己的数据定制显示方式,也就是说虽然某数据数据是一定的,但我们可以做到让它的表现方式多种多样,比如一个时间,在以前我们一般使用一个字符串(比如“12:03”)来显示,但我们为什么就...
  • u014200184
  • u014200184
  • 2014年03月26日 13:33
  • 3385

WPF DataTemplate绑定的简单学习

对于普通的实体类的绑定,如果只是简单的添加删除的话不需要用到INotifyPropertyChanged接口,这样的话比较简单,只需要在datatemplate中绑定后台的属性即可。然后直接往里面加入...
  • ccx_john
  • ccx_john
  • 2013年12月03日 13:53
  • 1259

WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探

WPF的Window_Loaded事件中控件加载机制初探
  • honantic
  • honantic
  • 2015年03月12日 10:57
  • 3153

Windows Phone 7 使用数据模板DataTemplate进行数据绑定

转自:Windows Phone 7 使用数据模板DataTemplate进行数据绑定 一、DataTemplate DataTemplate 类  描述数据对象的可视结构。 命名空间:  ...
  • f10_s
  • f10_s
  • 2014年01月03日 16:40
  • 895

<WP7>(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定

这一节,我们要做的是把设置界面写好。不好以为那么容易,因为涉及到ListPicker的数据绑定,而且数据是从数据库里面查询获取的,所以并不是拖连个控件就可以完成的事,不过,拖控件不是件好事,要尽量避免...
  • fengyun1989
  • fengyun1989
  • 2012年03月12日 19:54
  • 3190

WP7的XML操作详解:读取,过滤以及数据绑定

在这个小教程,我将演示在Windows Phone 7如何让ListBox的数据绑定XML数据。我将使用LINQ to XML,以便加载和读取数据,而且我将展示如何实现一个基本的过滤。 首先让我...
  • l87928916
  • l87928916
  • 2012年03月07日 18:00
  • 168

wp7数据绑定

数据绑定提供了一种数据呈现与交互的简捷方式,使得数据与UI分离,并能自动更新、同步。 绑定有绑定目标、绑定源、绑定模式、转换器等要素。。 绑定目标为Silverlight控件,可以是Framewo...
  • moxiaomomo
  • moxiaomomo
  • 2012年04月08日 21:14
  • 1024

WP7 XML操作详解:读取,过滤以及数据绑定

在这个小教程,我将演示在Windows Phone 7如何让ListBox的数据绑定XML数据。我将使用LINQ to XML,以便加载和读取数据,而且我将展示如何实现一个基本的过滤。首先让我们先创建...
  • gongmingqm10
  • gongmingqm10
  • 2012年03月06日 23:50
  • 495

jQuery实现的纯HTML模板进行ajax数据绑定

  • 2007年06月29日 11:49
  • 368KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WP7 使用数据模板DataTemplate进行数据绑定
举报原因:
原因补充:

(最多只允许输入30个字)