還是以上篇導航為基礎，完善導航的頁面并為導航的頁面綁定數據和顯示數據。
這篇學習筆記主要記錄兩個點，分別為如下：
- 基于Silverlight 的Windows Phone 數據綁定
- 為應用程序添加程序欄，額外記錄顯示和隱藏系統托盤（System.Tray）的代碼
1.數據綁定
數據綁定為基于Silverlight 的應用程序提供了一個簡單的方式來實現顯示和數據之間交互。數據顯示從數據管理中分離出來。用戶界面與數據模型之間的連接或者綁定，允許數據在兩者之間流動。不一個綁定被建立，數據發生改變，被綁定到數據的UI（用戶界面 ）元素能自動發生改變。這本篇 學習筆記將針對Silverlight 提供的控件DataList 為原型講述如何綁定數據和刪除數據。下面的圖顯示了綁定的概念：
上圖可以分為綁定目標和綁定源。
- 綁定目標代表綁定的對象是UI控件，所以必須控件是FrameworkElement的任何一個DependencyProperty（提供快速的方法計算值，可與其他動態數據交互）。
- 綁定來源包含了來源和目標之間的數據流的數據。來源可以是任何運行于CLR的對象，包括目標元素本身或者其他UI元素。
- 數據流的方向。Binding 對象的Mode屬性設置了數據流的方向。分為三種方向：OneTime---目標控件屬性只是更新一次，以后的更新會被忽略。oneWay--數據對象的值會同步到目標控件的屬性，但是目標控件的屬性的改變不會同步到數據對象中。TwoWay--目標控件的屬性和數據對象的值相互同步。
- 可選的值轉換器，它被應用于經過值轉換器傳遞的數據。值轉器是一個類，它實現了IValueConverter。
原理大致如上，下面看一下要實現的效果圖：
如圖，點擊圖中畫紅圈的連接，將會導航到一個放置DataList的數據列表，DataList放置了一列帶圖片和文字的數據，選中某項則讓刪除按鈕可用，可以指定刪除某項數據，并實時更新到列表中，界面效果如下：
綁定數據原理：
為了保證引用的集合發生改變時數據綁定機制也能使集合接收通知，Silverlight 使用了事件機制。數據綁定引擎期望當一個集合的值改變時，所發生的事件是CollectionChanged ，該事件被定義為如下：
這個集合的實現應該是集合的每一個改變（添加/編輯/移除集合的成員，程序順序，等）都會被觸發到事件。引用事件響應變化。這個事件被定義到INotifyCollectionChanged 接口中。 為使數據綁定能自動更新到集合，應該創建自己的集合并實現這個接口。在Silverlight 類庫中提供了兩個集合，這兩個集合實現了這個接口，我們可以很放心的拿來使用，分別為：ObservableCollection<T>和ReadOnlyObservableCollection<T> 。
- ObservableCollection -代表了一個動態數據集。它會為集合中的項發生添加，移除或者整個列表被刷新等情況實時提供通知。
- ReadOnlyObservableCollection -代表了一個可讀的ObservableCollection。
Tip：兩個類的數據綁定機制會對更新己經綁定到集合的對象時觸發的事件做出響應。
實現這個集合之前，我們有必要先完成一個Phots 的屬性集，代碼如下：
{
private string _Filename;
public string Filename
{
get { return _Filename;}
set
{
_Filename = value;
NotifyPropertyChanged( " FileName " );
}
}
private BitmapImage_Image;
public BitmapImageImage
{
get { return _Image;}
set
{
_Image = value;
NotifyPropertyChanged( " Image " );
}
}
private void NotifyPropertyChanged( string propertyName)
{
if ( null != PropertyChanged)
PropertyChanged( this , new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandlerPropertyChanged;
}
TIP: INotifyPropertyChanged ，是一個接口實現它是為了在數據改變的時候能夠廣播出去，通過屬性名稱通知哪個屬性名稱發生了變化。
另外我們還需要一個工具來，用來通過資源的URI將文件轉為可讓圖片接收的BitmapImage類型，代碼如下：
{
public static BitmapImageGetImage( string filename)
{
string imgLocation = Application.Current.Resources[ " ImagesLocation " ].ToString();
StreamResourceInfoimageResource = Application.GetResourceStream( new Uri(imgLocation + filename,UriKind.Relative));
BitmapImageimage = new BitmapImage();
image.SetSource(imageResource.Stream);
return image;
}
完成了上述兩個類，打開圖片對應的Xaml，我這里的名稱路徑在：/Views/PicturesView/Default.xaml。在該頁面的ContentPanel中加入一個DataList 控件，并為其數據模板添加內容顯示窗器，比如本例以橫向顯示的StackPanel中放置了一個圖片控件和一個文本控件用來顯示圖片和圖片名稱，XML代碼如下：
< StackPanel Orientation ="Vertical" >
< StackPanel Orientation ="Horizontal" >
< Button x:Name ="btnRemoveSelection" Content ="RemoveImage" Click ="btnRemoveSelection_Click" IsEnabled ="False" />
</ StackPanel >
< ListBox x:Name ="lstPictures" Width ="450" Height ="520" Margin ="10" SelectionChanged ="lstPictures_SelectionChanged" >
< ListBox.ItemTemplate >
< DataTemplate >
< StackPanel Orientation ="Horizontal" >
< Image Source =" {BindingImage} " Width ="100" Stretch ="Uniform" HorizontalAlignment ="Center" />
< TextBlock Text =" {BindingFilename} " TextWrapping ="Wrap" />
</ StackPanel >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ StackPanel >
</ Grid >
做Asp.net 的朋友趕快過來圍觀，這個DataList 數據綁定的方法不是就是ASP.NET常用的寫法嗎？只是來源做了處理使用Silverlight 的寫法，不過看樣子和格式都與Asp.Net 的DataList 數據綁定很相似。好了，之后進入CS文件，引用這一命名空間：
聲明上述提到的ObservableCollection對象，將Photo對象放進去，我在做Android 的時候喜歡寫數據源的時候這樣寫：List<HashMap<String,Object>> list=new ArrayList<HashMap<String,Object>>(); 然后去自定義一個數據源，感覺靈活性比較強，WP7還沒試過，就先暫時使用這種數據對象來實現數據的更新顯示吧。
定義好后，為集合中的PHOTO對象存值和設置DataList的事件并與刪除按鈕交互，所有代碼如下：
/// 此事件定義了當數據改變時通知集合觸發事件
/// </summary>
// publiceventNotifyCollectionChangedEventHandlerCollectionChanged;
ObservableCollection < Photo > photos = new ObservableCollection < Photo > ();
private void initializePhotos()
{
photos.Add( new Photo(){
Filename = " Butterfly.jpg " ,
Image = Utils.GetImage( " Butterfly.jpg " )
});
photos.Add( new Photo()
{
Filename = " Chrysanthemum.jpg " ,
Image = Utils.GetImage( " Chrysanthemum.jpg " )
});
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 = " Tulips.jpg " ,
Image = Utils.GetImage( " Tulips.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 = " Butterfly.jpg " ,
Image = Utils.GetImage( " Butterfly.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 " )
});
photos.Add( new Photo()
{
Filename = " Tulip.jpg " ,
Image = Utils.GetImage( " Tulip.jpg " )
});
photos.Add( new Photo()
{
Filename = " Window.jpg " ,
Image = Utils.GetImage( " Window.jpg " )
});
}
public Default()
{
InitializeComponent();
initializePhotos();
lstPictures.ItemsSource = photos;
}
private void btnRemoveSelection_Click( object sender,RoutedEventArgse)
{
if ( null != lstPictures.SelectedItem)
{
photos.Remove(lstPictures.SelectedItem as Photo);
}
}
private void lstPictures_SelectionChanged( object sender,SelectionChangedEventArgse)
{
if ( null != lstPictures.SelectedItem)
{
btnRemoveSelection.IsEnabled = true ;
}
if (photos.Count == 0 )
{
btnRemoveSelection.IsEnabled = false ;
}
}
2.應用程序欄
在很多情況下我們會需要提供跨應用程序的通用功能。一些情況下，我們可能想要為頁面提供一些符合某些條件時才出現的特殊功能。另外一些情況下，您只希望獲得更多的屏幕空間，這些情況下，Windows Phone 提供了應用程序欄。
要為應用程序添加應用程序欄，需要在App.xaml 注冊。本篇學習的內容注冊一個菜單和兩個 按鈕，一個菜單導航到About 頁面，另外一個按鈕跳轉到Image列表。打開App.xaml，在Application.Resouces節點內，輸如下代碼并為其添加事件響應：
< shell:ApplicationBar x:Key ="MainAppBar" IsVisible ="True" >
<!-- 菜單項Abou -->
< shell:ApplicationBar.MenuItems >
< shell:ApplicationBarMenuItem Text ="About" Click ="ApplicationBarMenuItem_Click" />
</ shell:ApplicationBar.MenuItems >
<!-- 應用程序條按鈕 -->
< shell:ApplicationBar.Buttons >
< shell:ApplicationBarIconButton Text ="Web" IconUri ="ie_icon.png" Click ="ApplicationBarIconButton_Click" />
< shell:ApplicationBarIconButton Text ="Images" IconUri ="pictures_Icon.png" Click ="ImageEvent_Click" />
</ shell:ApplicationBar.Buttons >
</ shell:ApplicationBar >
進入APP.xaml.cs在自動生成的事件句柄內，鍵入如下代碼實現跳轉：
{
PhoneApplicationFrameroot = Application.Current.RootVisual as PhoneApplicationFrame;
root.Navigate( new Uri( " /About " ,UriKind.Relative));
}
private void ApplicationBarIconButton_Click( object sender,EventArgse)
{
}
private void ImageEvent_Click( object sender,EventArgse)
{
PhoneApplicationFrameroot = Application.Current.RootVisual as PhoneApplicationFrame;
root.Navigate( new Uri( " /Pictures " ,UriKind.Relative));
}
在你需要顯示應用程序欄的頁面的phone:PhoneApplicationPage節點指定ApplicationBar來源，比如本文的指定方式：
x:Class ="DataBind.MainPage"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable ="d" d:DesignWidth ="480" d:DesignHeight ="768"
FontFamily =" {StaticResourcePhoneFontFamilyNormal} "
FontSize =" {StaticResourcePhoneFontSizeNormal} "
Foreground =" {StaticResourcePhoneForegroundBrush} "
SupportedOrientations ="Portrait" Orientation ="Portrait"
shell:SystemTray.IsVisible ="True"
ApplicationBar =" {StaticResourceMainAppBar} "
>
看看截圖效果吧：
源碼比較大，有需要的EMAIL我： terryyhl@gmail.com
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
