实现这个功能我们需要编写一个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>
运行的效果如上图。
源码下载:数据绑定