转：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;
        }

    }

 并且我们还需要一个类来做为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;
        }
 


    }

 实体类和数据源代码编写完成后，接下来打开mainPage.xaml，添加一个命名空间：

  xmlns:data= " clr-namespace:ListBoxDatBind "

Tip:这里指定的是你的数据源所在的命名空间。

之后，添加一个页面的资源KEY

<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>

运行的效果如上图。

源码下载：数据绑定