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。

 1 usingSystem.Windows.Media.Animation;   2 using System.Windows.Shapes;   3 using System.Windows.Media.Imaging;   4 using System.ComponentModel;   5 namespace WindowsPhoneNavigation.Misc   6 {   7     public class Photo : INotifyPropertyChanged   8     {   9         private string _Filename;  10         public string Filename   11         {  12             get { return _Filename; }  13             set  14             {  15                 _Filename = value;  16                 NotifyPropertyChanged("Filename");  17             }  18         }  19         private BitmapImage _Image;  20         public BitmapImage Image   21         {  22             get { return _Image; }  23             set  24             {  25                 _Image = value;  26                 NotifyPropertyChanged("Image");  27             }  28         }  29         private void NotifyPropertyChanged(string propertyName)  30         {  31             if (null != PropertyChanged)  32                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));  33         }  34         public event PropertyChangedEventHandler PropertyChanged;  35     }  36 }

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

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

 1 using System;   2 using System.Net;   3 using System.Windows;   4 using System.Windows.Controls;   5 using System.Windows.Documents;   6 using System.Windows.Ink;   7 using System.Windows.Input;   8 using System.Windows.Media;   9 using System.Windows.Media.Animation;  10 using System.Windows.Shapes;  11 using System.Windows.Media.Imaging;  12 using System.Windows.Resources;  13 namespace WindowsPhoneNavigation.Misc  14 {  15     public static class Utils  16     {  17         public static BitmapImage GetImage(string filename)  18         {  19             string imgLocation = Application.Current.Resources["ImagesLocation"].ToString();//ImagesLocation为在App.xaml中定义的资源，表示路径代码如下：  20  // <system:String x:Key="ImagesLocation">Resouces/Pictures/</system:String>  21             StreamResourceInfo imageResource = Application.GetResourceStream(new Uri(imgLocation + filename, UriKind.Relative));//获取图像信息数据  22             BitmapImage image = new BitmapImage();//定义一个图像类型的变量  23             image.SetSource(imageResource.Stream);  24             return image;  25           //将获取的图像数据赋给该图像变量，并返回该图像  26                    }  27     }  28 }

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

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

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

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

 1 private void InitializePhotos()   2 {   3 photos.Add(new Photo() { Filename = "Desert.jpg", Image = Utils.GetImage("Desert.jpg") });   4             photos.Add(new Photo() { Filename = "Field.jpg", Image = Utils.GetImage("Field.jpg") });//获取相对路径下的图像资源添加到集合中。   5             photos.Add(new Photo() { Filename = "Flower.jpg", Image = Utils.GetImage("Flower.jpg") });   6             photos.Add(new Photo() { Filename = "Hydrangeas.jpg", Image = Utils.GetImage("Hydrangeas.jpg") });   7             photos.Add(new Photo() { Filename = "Jellyfish.jpg", Image = Utils.GetImage("Jellyfish.jpg") });   8             photos.Add(new Photo() { Filename = "Koala.jpg", Image = Utils.GetImage("Koala.jpg") });   9             photos.Add(new Photo() { Filename = "Leaves.jpg", Image = Utils.GetImage("Leaves.jpg") });  10             photos.Add(new Photo() { Filename = "Lighthouse.jpg", Image = Utils.GetImage("Lighthouse.jpg") });  11             photos.Add(new Photo() { Filename = "Penguins.jpg", Image = Utils.GetImage("Penguins.jpg") });  12             photos.Add(new Photo() { Filename = "Rocks.jpg", Image = Utils.GetImage("Rocks.jpg") });  13 }

添加完成后需要将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方法返回指定路径的图像数据。）。以上便是整个数据绑定的过程，为自己的个人理解，不正确的地方请指正。

效果图：

转载于:https://blog.51cto.com/potential/1402579

Windows Phone 7实现图片数据绑定相关推荐

Windows 10 UWP/Windows 10 Mobile GIF图片显示
Windows 10 UWP/Windows 10 Mobile GIF图片显示最近做西邮图书馆安卓版时候,有一个学长建议加载动画用gif图片,那样可能性能会好点.但是之前Windows 10 ...
Windows锁屏界面图片不更新
Windows11锁屏图片不变,一直都是蓝色一张图. 解决方法: 1.设置->个性化->锁屏界面->个性化锁屏界面.切换为图片. 2.打开文件资源管理器,导航栏中点击查看-> ...
Win7中用Windows Photo Viewer打印图片
上次去用户那边做安装Windows7后的使用体验调查的时候,有好几个用户反映这个问题,即用Win7的图片浏览器Windows Photo Viewer打印图片的时候,一次只能选择打印一张图片,而当想同 ...
Windows Phone7天初学(4):数据绑定
数据绑定提供了一种数据呈现与交互的简捷方式,使得数据与UI分离,并能自动更新.同步. 绑定有绑定目标.绑定源.绑定模式.转换器等要素.. 绑定目标为Silverlight控件,可以是Framework ...
Windows+Nginx+IIS做图片分布式存储详细步骤
最近几天,一直在学习nginx在windows平台下的使用,为了寻找几种大量图片分布式存储而且有相对简单的存储方案 nginx是一种,还找到一种MongoDB GridFS 这两种方案我还是比较中意的 ...
Windows界面编程-背景图片、透明特效使用
Windows界面编程第一篇位图背景与位图画刷可以通过WM_CTLCOLORDLG消息来设置对话框的背景,MSDN上对这个消息的说明如下: The WM_CTLCOLORDLG message i ...
Windows Phone 7 MVVM模式数据绑定和传递参数
数据绑定使用了ObservableCollection<T> 类来实现,ViewModel通过继承GalaSoft.MvvmLight.ViewModelBase类来实现,Command ...
烂泥：【解决】word复制windows live writer没有图片
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 在使用windows live writer发表博客,博客先是在是word2013中进行编辑,编辑完毕后我会复制到windows live writer ...
Spread for Windows Forms高级主题(6)---数据绑定管理
自定义列和区域的数据绑定当表单被绑定到一个数据集时,表单中的列就会相继的被分配到数据集的区域上.例如,第一个数据域分配给列A,第二个数据区域分配给列B,等等.你也可以改变分配顺序,将任意域分配给任意 ...

Windows Phone 7实现图片数据绑定

Windows Phone 7实现图片数据绑定

Windows Phone 7实现图片数据绑定相关推荐

最新文章

热门文章