一个简单的Silverlight的DataBinding和DateTemplate的Demo

DataBinding和DateTemplate 都是Silverlight Wpf常用的UI技术。仿做一个简单的日程表Demo总结下。

该Demo主要通过DataBinding将TaskCollection相关Task显示在UI上，而显示的方式则通过DataTemplate来定制。



实现接口INotifyPropertyChanged

该接口负责当我们的数据，或者UI被修改后，负责发出Event消息来响应。

ViewModelBase.cs:

usingSystem.ComponentModel;

namespaceDataTemplateAndBinding

{

public classViewModelBase:INotifyPropertyChanged

{

public voidOnPropertyChanged(string propertyName)

{

if(PropertyChanged !=
null)

{

PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));

}

}

public eventPropertyChangedEventHandler PropertyChanged;

}

}

建立一个我们要使用的类Task:

namespaceDataTemplateAndBinding

{

public classTask:ViewModelBase

{

public Task()

{

TaskName = "";

Priority = 0;

Description = "";

}

public Task(stringname,string desc,intprio)

{

TaskName = name;

Description = desc;

Priority = prio;

}

private stringtaskname;

public stringTaskName

{

get

{

returntaskname;

}

set

{

if(taskname !=
value)

{

taskname = value;

OnPropertyChanged("TaskName");

}

}

}

private stringdescription;

public stringDescription

{

get

{

returndescription;

}

set

{

if(description !=
value)

{

description = value;

OnPropertyChanged("Description");

}

}

}

private intpriority;

public intPriority

{

get{ return priority; }

set

{

priority = value;

OnPropertyChanged("Priority");

}

}

}

}

将上面的Task类封装成TaskCollection，即我们要显示在界面的类

usingSystem.Collections.ObjectModel;

namespaceDataTemplateAndBinding

{

public classTaskCollection

{

public ObservableCollection<Task> Tasks {
get;set; }

public TaskCollection()

: base()

{

Tasks = newObservableCollection<Task>();

Tasks.Add(newTask("Groceries","Pick up Groceries and Detergent",2));

Tasks.Add(newTask("Laundry","Do my Laundry", 2));

Tasks.Add(newTask("Email","Email clients", 1));

Tasks.Add(newTask("Clean","Clean my office", 3));

Tasks.Add(newTask("Dinner","Get ready for family reunion",1));

Tasks. Add(newTask("Proposals","Review new budget proposals",2));

}

}

}

最后是UI的代码：

在MainPage的XAML代码：

<UserControl x:Class="DataTemplateAndBinding.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:data="clr-namespace:DataTemplateAndBinding"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="700">

<UserControl.Resources>

<data:TaskCollection x:Key="myTodoLists"/>

//下面通过DataTemplate来定制我们显示我们自己数据的方式

<DataTemplate x:Key="MyTaskTemplate">

<Border Name="border" BorderBrush="Aqua"BorderThickness="1" Padding="5"
Margin="5" Width="700">

<Grid>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0"
Text="TaskName: "/>

<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding
Path=TaskName}"/>

<TextBlock Grid.Row="1" Grid.Column="0"
Text="Description: "/>

<TextBlock Grid.Row="1" Grid.Column="1"
Text="{Binding Path=Description}"/>

<TextBlock Grid.Row="2" Grid.Column="0"
Text="Priority: "/>

<TextBlock Grid.Row="2" Grid.Column="1"
Text="{Binding Path=Priority}"/>

</Grid>

</Border>

</DataTemplate>

</UserControl.Resources>

//将数据和DataTemplate等绑定到我们UI的ListBox上显示。

<StackPanelDataContext="{StaticResource
myTodoLists }" >

<TextBlock Name="todoLists" FontSize="20"
Text="MyTodo Lists"/>

<ListBox ItemsSource="{Binding
Path=Tasks}" ItemTemplate="{StaticResource MyTaskTemplate }"
/>

</StackPanel>

</UserControl>