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的值)。我們想實現的功能是當集合中的內容發(fā)生改變時也能及時的更新到ListBox中。即數據綁定引擎接收到集合內容發(fā)生改變時，需要觸發(fā)CollectionChanged事件。

C#中已經定義了如下事件：

event NotifyCollectionChangedEventHandler CollectionChanged;

這個集合的實現應該是集合的每一個改變（添加/編輯/移除集合的成員，程序順序，等）都會觸發(fā)事件。這個事件被定義到INotifyCollectionChanged?接口中。為使數據綁定能自動更新到集合，因此需要創(chuàng)建自己的集合并實現這個接口。在Silverlight類庫中提供的集合，已經實現了這個街口。Silverlight提供了兩個類/集合，并實現了接口：ObservableCollection<T>和ReadOnlyObservableCollection<T>。

ObservableCollection?-代表了一個動態(tài)數據集。它會為集合中的項發(fā)生添加，移除或者整個列表被刷新等情況時提供通知。

ReadOnlyObservableCollection?-代表了一個只讀的ObservableCollection類。

兩個類中的數據綁定機制會對更新已經綁定到集合的對象時所觸發(fā)的事件做出響應。

下面我們添加一個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類的屬性發(fā)生改變時都會觸發(fā)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類型的屬性發(fā)生改變時及時的通知數據綁定引擎，從而使得ListBox中的圖像信息得到及時的更新。為了向集合中添加圖像資源我們聲明了一個叫做Utils的類，該類的作用就是從項目的資源文件中讀取圖像類型的數據（實際上是我們指定了圖像所在的路徑，使用該類的GetImage方法返回指定路徑的圖像數據。）。以上便是整個數據綁定的過程，為自己的個人理解，不正確的地方請指正。

效果圖：

轉載于:https://blog.51cto.com/potential/1402579

總結

以上是生活随笔為你收集整理的Windows Phone 7实现图片数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。