学步园

Windows Phone 7实现图片数据绑定

      首先我们使用ListBox来显示多张图片，然后在建立一个单独的页面来显示单独的一张图片。

1.我们建立一个Picture.xaml的页面，并使用ListBox控件来显示多张图片的信息。，示例代码如下：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!--先添加一个StackPanel 用来存放listbox控件和其他元素-->
<StackPanel Orientation="Vertical">
<!--添加一个listbox控件,并添加两个元素，一个是Image控件，另一个是TextBlock控件-->
<ListBox Height="520" Name="lstPicture" Width="450"SelectionChanged="lstPicture_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"  <StackPanel Orientation="Horizontal">
<!--这里的StackPanel 可以看做是用来提供数据模板,即每一个ListboxItem的内容显示方式-->
<Image Source="{Binding Image}" Width="100" Stretch="Uniform"HorizontalAlignment="Center" />
<TextBlock Text="{Binding Filename}"TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>

       上面的代码中，我们在DataTemplate标记中定义了两个控件分别为Image控件，TextBlock控件，那么每一个Listbox的元素即ListBoxItem都包含两个内容，一个是图片(Image)，一个是文本(TextBlock).

       同时我们将Image 空间的Source绑定到了Image属性，将TextBlock的Text绑定到Filename属性。接着便是将ListBox控件绑定到一个集合，该集合包含两个元素，一个是Image(即图片)，另一个是string即(TextBlock的值)。我们想实现的功能是当集合中的内容发生改变时也能及时的更新到ListBox中。即数据绑定引擎接收到集合内容发生改变时，需要触发CollectionChanged事件。

C#中已经定义了如下事件：

event NotifyCollectionChangedEventHandler CollectionChanged;

这个集合的实现应该是集合的每一个改变（添加/编辑/移除集合的成员，程序顺序，等）都会触发事件。这个事件被定义到INotifyCollectionChanged 接口中。为使数据绑定能自动更新到集合，因此需要创建自己的集合并实现这个接口。在Silverlight类库中提供的集合，已经实现了这个街口。Silverlight提供了两个类/集合，并实现了接口：ObservableCollection<T>和ReadOnlyObservableCollection<T>。

ObservableCollection -代表了一个动态数据集。它会为集合中的项发生添加，移除或者整个列表被刷新等情况时提供通知。

ReadOnlyObservableCollection -代表了一个只读的ObservableCollection类。

两个类中的数据绑定机制会对更新已经绑定到集合的对象时所触发的事件做出响应。

下面我们添加一个Photo类，该类继承自接口INotifyCollectionChanged。

usingSystem.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.ComponentModel;
namespace WindowsPhoneNavigation.Misc
{
    public class Photo : INotifyPropertyChanged
    {
        private string _Filename;
        public string Filename 
        {
            get { return _Filename; }
            set
            {
                _Filename = value;
                NotifyPropertyChanged("Filename");
            }
        }
        private BitmapImage _Image;
        public BitmapImage Image 
        {
            get { return _Image; }
            set
            {
                _Image = value;
                NotifyPropertyChanged("Image");
            }
        }
        private void NotifyPropertyChanged(string propertyName)
        {
            if (null != PropertyChanged)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
} 

Photo有两个属性，一个是Image,一个是Filename.该类的作用是存储每一个图片的信息，即Image图像和名称。同时当Photo类的属性发生改变时都会触发PropertyChanged事件。

接着我们需要添加一个类，该类用来获取项目的Image图片资源。我们把这个类叫做：Utils,代码如下：

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;
using System.Windows.Media.Imaging;
using System.Windows.Resources;
namespace WindowsPhoneNavigation.Misc
{
    public static class Utils
    {
        public static BitmapImage GetImage(string filename)
        {
            string imgLocation = Application.Current.Resources["ImagesLocation"].ToString();//ImagesLocation为在App.xaml中定义的资源，表示路径代码如下：
 // <system:String x:Key="ImagesLocation">Resouces/Pictures/</system:String>
            StreamResourceInfo imageResource = Application.GetResourceStream(new Uri(imgLocation + filename, UriKind.Relative));//获取图像信息数据
            BitmapImage image = new BitmapImage();//定义一个图像类型的变量
            image.SetSource(imageResource.Stream);
            return image;
          //将获取的图像数据赋给该图像变量，并返回该图像
                   }
    }
}

之后我们在Picture.xaml.cs中声明一个名字叫做photos的 ObservableCollection类的集合,代码如下：

ObservableCollection <Photo> photos = new ObservableCollection<Photo>();

该集合的元素类型是Photo类型。

剩下的工作便是为这个集合添加内容，我们声明一个InitializePhotos的方法，添加以下的图片：

private void InitializePhotos()
{
photos.Add(new Photo() { Filename = "Desert.jpg", Image = Utils.GetImage("Desert.jpg") });
            photos.Add(new Photo() { Filename = "Field.jpg", Image = Utils.GetImage("Field.jpg") });//获取相对路径下的图像资源添加到集合中。
            photos.Add(new Photo() { Filename = "Flower.jpg", Image = Utils.GetImage("Flower.jpg") });
            photos.Add(new Photo() { Filename = "Hydrangeas.jpg", Image = Utils.GetImage("Hydrangeas.jpg") });
            photos.Add(new Photo() { Filename = "Jellyfish.jpg", Image = Utils.GetImage("Jellyfish.jpg") });
            photos.Add(new Photo() { Filename = "Koala.jpg", Image = Utils.GetImage("Koala.jpg") });
            photos.Add(new Photo() { Filename = "Leaves.jpg", Image = Utils.GetImage("Leaves.jpg") });
            photos.Add(new Photo() { Filename = "Lighthouse.jpg", Image = Utils.GetImage("Lighthouse.jpg") });
            photos.Add(new Photo() { Filename = "Penguins.jpg", Image = Utils.GetImage("Penguins.jpg") });
            photos.Add(new Photo() { Filename = "Rocks.jpg", Image = Utils.GetImage("Rocks.jpg") });
}

添加完成后需要将ListBox的ItemSource绑定到该集合

lstPicture.ItemsSource = photos;

以上过程可在Picture.xaml初始化的时候完成，即：

public Picture()
{
InitializeComponent();
InitializePhotos();
lstPicture.ItemsSource = photos;
 }

以上的工作完成以后便可以在ListBox中显示我们所添加进去的图像了。

总结：

以上部分只说明如何绑定图像资源到ListBox控件之中，我们使用的方法是首先声明一个集合，该集合为我们自己定义的Photo类型，它包含两个属性，一个是Image,指定为图像资源，另一个为String类型的Filename,用来显示图像的名称，注意之前我们已经将ListBix控件中DataTemplate类的两个控件分别绑定到了Image,和Filename属性，因此Photo类的另一个作用就是当Photo类型的属性发生改变时及时的通知数据绑定引擎，从而使得ListBox中的图像信息得到及时的更新。为了向集合中添加图像资源我们声明了一个叫做Utils的类，该类的作用就是从项目的资源文件中读取图像类型的数据（实际上是我们指定了图像所在的路径，使用该类的GetImage方法返回指定路径的图像数据。）。以上便是整个数据绑定的过程，为自己的个人理解，不正确的地方请指正。

效果图：