你的分享就是我们的动力 ---﹥

WP7 ListBox 数据绑定教程

时间:2013-05-24 16:14来源:www.chengxuyuans.com 点击:
本篇为您介绍WP7 ListBox数据绑定方法,很简单的一个方法,并以一个WP7天气预报列表为示例,来演示如何在WP7中实现这个绑定功能,下面上级图看下效果:

 

实现这个功能我们需要编写一个Model 己记录这些实体信息,Model代码如下:

 

public class weather
    {
        public string Conditions { getset; }
        public string ImageUrl { getset; }
        public string Low { getset; }
        public string High { getset; }
        public string Location { getset; }

        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 { getset; }

        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>

运行的效果如上图。

转载注明地址:http://www.chengxuyuans.com/Windows Phone/62175.html