Windows Phone 7实现图片数据绑定
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 读书笔记之何时重构(下)
- 下一篇: 经验:Windows To Go准备工作