WP7 ListBox 数据绑定教程
本篇为您介绍WP7 ListBox数据绑定方法，很简单的一个方法，并以一个WP7天气预报列表为示例，来演示如何在WP7中实现这个绑定功能，下面上级图看下效果：
实现这个功能我们需要编写一个Model 己记录这些实体信息，Model代码如下：
public class weather
{
public string Conditions { get; set; }
public string ImageUrl { get; set; }
public string Low { get; set; }
public string High { get; set; }
public string Location { get; set; }
public weather(string conditins, string imageurl, string low, string high, string location)
{
this.Conditions = conditins;
this.ImageUrl = imageurl;
this.Low = low;
this.High = high;
this.Location = location;
}
}
{
public string Conditions { get; set; }
public string ImageUrl { get; set; }
public string Low { get; set; }
public string High { get; set; }
public string Location { get; set; }
public weather(string conditins, string imageurl, string low, string high, string location)
{
this.Conditions = conditins;
this.ImageUrl = imageurl;
this.Low = low;
this.High = high;
this.Location = location;
}
}
并且我们还需要一个类来做为ListBox 的数据源，前篇有讲过数据绑定的一篇文章提到过ObservableCollection 不知道大家还有没有印象，本篇就是使用这个数据集合来做ListBox 数据源，该类代码如下：
public class weathers:List<weather>
{
private const string imageUrl = "../images/";
public weathers()
{
BuildCollection();
}
public ObservableCollection<weather> DataCollection { get; set; }
public ObservableCollection<weather> BuildCollection()
{
DataCollection = new ObservableCollection<weather>();
DataCollection.Add(new weather("阴天", imageUrl + "19n.png", "10度", "20度", "广州"));
DataCollection.Add(new weather("凉爽", imageUrl + "23d.png", "20度", "25度", "海南"));
DataCollection.Add(new weather("多云", imageUrl + "26n.png", "10度", "18度", "深圳"));
DataCollection.Add(new weather("晴转多云", imageUrl + "27d.png", "20度", "23度", "三亚"));
DataCollection.Add(new weather("阴转多云", imageUrl + "27n.png", "22度", "23度", "揭阳"));
DataCollection.Add(new weather("晴天", imageUrl + "31d.png", "22度", "25度", "汕头"));
return DataCollection;
}
}
{
private const string imageUrl = "../images/";
public weathers()
{
BuildCollection();
}
public ObservableCollection<weather> DataCollection { get; set; }
public ObservableCollection<weather> BuildCollection()
{
DataCollection = new ObservableCollection<weather>();
DataCollection.Add(new weather("阴天", imageUrl + "19n.png", "10度", "20度", "广州"));
DataCollection.Add(new weather("凉爽", imageUrl + "23d.png", "20度", "25度", "海南"));
DataCollection.Add(new weather("多云", imageUrl + "26n.png", "10度", "18度", "深圳"));
DataCollection.Add(new weather("晴转多云", imageUrl + "27d.png", "20度", "23度", "三亚"));
DataCollection.Add(new weather("阴转多云", imageUrl + "27n.png", "22度", "23度", "揭阳"));
DataCollection.Add(new weather("晴天", imageUrl + "31d.png", "22度", "25度", "汕头"));
return DataCollection;
}
}
实体类和数据源代码编写完成后，接下来打开mainPage.xaml，添加一个命名空间：
xmlns:data="clr-namespace:ListBoxDatBind"
Tip:这里指定的是你的数据源所在的命名空间。
之后，添加一个页面的资源KEY
<phone:PhoneApplicationPage.Resources>
<data:weathers x:Key="weatherCollection"/>
</phone:PhoneApplicationPage.Resources>
<data:weathers x:Key="weatherCollection"/>
</phone:PhoneApplicationPage.Resources>
准备工作准备完成，为ListBox 绑定数据：
<ListBox Name="listBox1"
ItemsSource="{Binding Source={StaticResource weatherCollection},Path=DataCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=ImageUrl}"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Conditions}"/>
<TextBlock Text="{Binding Low}"/>
<TextBlock Text="{Binding High}"/>
<TextBlock Text="{Binding Location}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ItemsSource="{Binding Source={StaticResource weatherCollection},Path=DataCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=ImageUrl}"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Conditions}"/>
<TextBlock Text="{Binding Low}"/>
<TextBlock Text="{Binding High}"/>
<TextBlock Text="{Binding Location}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
运行的效果如上图。
源码下载：数据绑定
本文：Windows Phone 7 ListBox 数据绑定教程就介绍到这里，欢迎查看其它文章。
"2011/9/9 18:16:19 | WP7教程 | |
- #1游客[注册][221.234.210.*]2012/6/15 13:43:05
- 关于wp开发这一块，大家可以去卤面网（hugwp.com），里面可以找到你要的wp7开发资源的！