9.siverlight中将集合绑定到UI元素

适用于silverlight 3、4、5

当需要显示列表或者批量显示数据的时候，集合绑定的使用就显得特别方便。下面的例子，我们将把一个数据集合绑定到ListBox中。

1. 新建项目，为silverlight项目添加一个类：Class1.cs

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 SilverlightApplication3

{

public class Class1

{

public int ActivityId { get; set; }

public double Amount { get; set; }

public string Beneficiary { get; set; }

public DateTime ActivityDate { get; set; }

public string ActivityDescription { get; set; }

}

}

2. 在MainPage.xaml.cs中添加一个Class1的 ObservableCollection

private System.Collections.ObjectModel.ObservableCollection<Class1> Class1Collection;

 

3. 在Mainpage.xaml.cs中实例化Class1Collection集合

private void InitializeActivitiesCollection()

{

accountClass1Collection = new ObservableCollection<Class1>();//实例化动态数据集合

Class1 C1 = new Class1(); //实例化一个类

C1.ActivityId = 1;

C1.Amount = -33;

C1.Beneficiary = "Smith Woodworking Shop London";

C1.ActivityDescription = "Paid by credit card";

C1.ActivityDate = new DateTime(2009, 9, 1);

accountClass1Collection.Add(C1);//将该类的实例添加到集合当中

Class1 C2 = new Class1();

C2.ActivityId = 2;

C2.Amount = 1000;

C2.Beneficiary = "ABC Infrastructure";

C2.ActivityDescription = "Paycheck September2009";

C2.ActivityDate = new DateTime(2009, 9, 1);

accountClass1Collection.Add(C2);

}

 

4. 在MainPage的构造函数中添加对实例化方法的调用

public MainPage()

{

InitializeComponent();

InitializeClass1Collection();

}

 

5.在MainPage.Xaml文件中添加一个listBox控件

<UserControl x:Class="SilverlightApplication3.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"

mc:Ignorable="d"

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

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

<ListBox x:Name="AccountActivityListBox"

Width="600" HorizontalAlignment="Left" Margin="0,0,-200,0">

<ListBox.ItemTemplate>

<DataTemplate>

<Grid>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150" />

<ColumnDefinition Width="330" />

<ColumnDefinition Width="100" />

</Grid.ColumnDefinitions>

<TextBlock

Grid.Row="0"

Grid.Column="0"

Grid.RowSpan="2"

Text="{Binding ActivityDate}">

</TextBlock>

<TextBlock

Grid.Row="0"

Grid.Column="1"

Text="{Binding Beneficiary}"

FontWeight="Bold">

</TextBlock>

<TextBlock

Grid.Row="0"

Grid.Column="2"

HorizontalAlignment="Right"

Text="{Binding Amount}">

</TextBlock>

<TextBlock

Grid.Row="1"

Grid.Column="1"

Text="{Binding ActivityDescription}">

</TextBlock>

</Grid>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

 

5. 将集合绑定到ListBox

this.AccountActivityListBox.ItemsSource = accountClass1Collection;

 

运行效果如下：