Windows Phone 7實(shí)現(xiàn)圖片數(shù)據(jù)綁定

????? 首先我們使用ListBox來顯示多張圖片，然后在建立一個(gè)單獨(dú)的頁面來顯示單獨(dú)的一張圖片。

1.我們建立一個(gè)Picture.xaml的頁面，并使用ListBox控件來顯示多張圖片的信息。，示例代碼如下：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <!--先添加一個(gè)StackPanel 用來存放listbox控件和其他元素--> <StackPanel Orientation="Vertical"> <!--添加一個(gè)listbox控件,并添加兩個(gè)元素，一個(gè)是Image控件，另一個(gè)是TextBlock控件--> <ListBox Height="520" Name="lstPicture" Width="450"SelectionChanged="lstPicture_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" <StackPanel Orientation="Horizontal"> <!--這里的StackPanel 可以看做是用來提供數(shù)據(jù)模板,即每一個(gè)ListboxItem的內(nèi)容顯示方式--> <Image Source="{Binding Image}" Width="100" Stretch="Uniform"HorizontalAlignment="Center" /> <TextBlock Text="{Binding Filename}"TextWrapping="Wrap" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </StackPanel> </Grid>

?????? 上面的代碼中，我們?cè)贒ataTemplate標(biāo)記中定義了兩個(gè)控件分別為Image控件，TextBlock控件，那么每一個(gè)Listbox的元素即ListBoxItem都包含兩個(gè)內(nèi)容，一個(gè)是圖片(Image)，一個(gè)是文本(TextBlock).

?????? 同時(shí)我們將Image?空間的Source綁定到了Image屬性，將TextBlock的Text綁定到Filename屬性。接著便是將ListBox控件綁定到一個(gè)集合，該集合包含兩個(gè)元素，一個(gè)是Image(即圖片)，另一個(gè)是string即(TextBlock的值)。我們想實(shí)現(xiàn)的功能是當(dāng)集合中的內(nèi)容發(fā)生改變時(shí)也能及時(shí)的更新到ListBox中。即數(shù)據(jù)綁定引擎接收到集合內(nèi)容發(fā)生改變時(shí)，需要觸發(fā)CollectionChanged事件。

C#中已經(jīng)定義了如下事件：

event NotifyCollectionChangedEventHandler CollectionChanged;

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

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

ReadOnlyObservableCollection?-代表了一個(gè)只讀的ObservableCollection類。

兩個(gè)類中的數(shù)據(jù)綁定機(jī)制會(huì)對(duì)更新已經(jīng)綁定到集合的對(duì)象時(shí)所觸發(fā)的事件做出響應(yīng)。

下面我們添加一個(gè)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有兩個(gè)屬性，一個(gè)是Image,一個(gè)是Filename.該類的作用是存儲(chǔ)每一個(gè)圖片的信息，即Image圖像和名稱。同時(shí)當(dāng)Photo類的屬性發(fā)生改變時(shí)都會(huì)觸發(fā)PropertyChanged事件。

接著我們需要添加一個(gè)類，該類用來獲取項(xiàng)目的Image圖片資源。我們把這個(gè)類叫做：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));//獲取圖像信息數(shù)據(jù) 22 BitmapImage image = new BitmapImage();//定義一個(gè)圖像類型的變量 23 image.SetSource(imageResource.Stream); 24 return image; 25 //將獲取的圖像數(shù)據(jù)賦給該圖像變量，并返回該圖像 26 } 27 } 28 }

之后我們?cè)赑icture.xaml.cs中聲明一個(gè)名字叫做photos的 ObservableCollection類的集合,代碼如下：

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

該集合的元素類型是Photo類型。

剩下的工作便是為這個(gè)集合添加內(nèi)容，我們聲明一個(gè)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") });//獲取相對(duì)路徑下的圖像資源添加到集合中。 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初始化的時(shí)候完成，即：

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

以上的工作完成以后便可以在ListBox中顯示我們所添加進(jìn)去的圖像了。

總結(jié)：

以上部分只說明如何綁定圖像資源到ListBox控件之中，我們使用的方法是首先聲明一個(gè)集合，該集合為我們自己定義的Photo類型，它包含兩個(gè)屬性，一個(gè)是Image,指定為圖像資源，另一個(gè)為String類型的Filename,用來顯示圖像的名稱，注意之前我們已經(jīng)將ListBix控件中DataTemplate類的兩個(gè)控件分別綁定到了Image,和Filename屬性，因此Photo類的另一個(gè)作用就是當(dāng)Photo類型的屬性發(fā)生改變時(shí)及時(shí)的通知數(shù)據(jù)綁定引擎，從而使得ListBox中的圖像信息得到及時(shí)的更新。為了向集合中添加圖像資源我們聲明了一個(gè)叫做Utils的類，該類的作用就是從項(xiàng)目的資源文件中讀取圖像類型的數(shù)據(jù)（實(shí)際上是我們指定了圖像所在的路徑，使用該類的GetImage方法返回指定路徑的圖像數(shù)據(jù)。）。以上便是整個(gè)數(shù)據(jù)綁定的過程，為自己的個(gè)人理解，不正確的地方請(qǐng)指正。

效果圖：

轉(zhuǎn)載于:https://blog.51cto.com/potential/1402579

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。