Windows Phone中使用Local DataBase與ISolateStorage—在MVVM模式下(—)

      像我們知道的一樣，Windows Phone支援ISolateStorage，Mango中還新增了使用Linq的SQL CE作為本機資料庫。下面我們就用MVVMLight來類比個訊息發送和查看訊息記錄的IM簡易聊天視窗，來看看WP7是怎麼使用ISolateStorage和Local DataBase的：

一.建立MVVMLight的Windows Phone Project

      MVVMLight的教程可以在園子裡搜一下，或者去MVVMLight作者的官方網站。建完Project後，MVVMLight的Windows Phone 模板已經自動產生了MainPage.xaml，以及一個MainViewModel。我們在Project中添加View檔案夾，建立兩個View，即兩個PhoneApplicationPage，作為發送Message視窗和查看Message History記錄。還有建立一個ViewModel（MessageViewModel），Model中新增一個HaisaDataBase，用來管理我們的LocalDataBase。本來想定義一個ISolateStorageManager的Helper類，但是微軟已經把ISolateStorage封裝的夠簡單了，所以此處就省略了。

      添加後如示：

可以看到圖中工程中有個icons的檔案夾，是用來儲存PhoneApplicationPage.ApplicationBar的表徵圖檔案。

二.在Model中建立SQL CE資料庫

      我們建立個UserInfoTable，使其繼承INotifyPropertyChanged，INotifyPropertyChanging介面，並對其聲明[Table] Attribute。在UserInfoTable表中聲明幾個屬性作為Table的Column，在屬性前面加上[Column] Attribute。包括

UserId、UserNameAndTime、UserPwd、UserMessage。代碼類似：

   1: [Table]

   2: ublic class UserInfoTable:INotifyPropertyChanged,INotifyPropertyChanging

   3:  

   4:    #region UserId Column        

   5:    private int _userId;

   6:    [Column(IsPrimaryKey=true,IsDbGenerated=true,DbType="INT Not null identity",CanBeNull=false,AutoSync=AutoSync.OnInsert)]

   7:    public int UserId

   8:    {

   9:        get{return _userId; }

  10:        set{

  11:            if(value==null) return;

  12:            

  13:            NotifyPropertyChanging("UserId");

  14:            _userId=value;

  15:            NotifyPropertyChanged("UserId");

  16:  

  17:        }

  18:        #endregion       

  19:     .........

  20:  

  21: }

      在Windows Phone中，即可用UserInfoTable Class來產生資料庫中的UserInfoTable表，當然要記得引用下面幾個命名空間

using System.Data.Linq; using System.Data.Linq.Mapping; using Microsoft.Phone.Data.Linq; using Microsoft.Phone.Data.Linq.Mapping;

      我們再建立一個HaisaDataContext類繼承DataContext，建構函式繼承DataContext的建構函式，在其中添加我們的ConnectionString，還有聲明我們的Table，如下面代碼：

   1: public class HaisaDataContext:DataContext

   2:     {

   3:         public static string DBConnectionString = "Data Source=isostore:/Haisa_DataBase.sdf";

   4:         public HaisaDataContext(string connectionString):base(connectionString){}

   5:         public Table<UserInfoTable> HaisaTable;

   6:  

   7:     }

到這裡我們的LocalDataBase就建立完了，關於Local DataBase的更多資訊請查看MSDN。

三.建立MessageView.xaml介面以及綁定MessageViewModel

      我們在MainPage.xaml中添加一個HyperlinkButton,設定NavigateUri="/View/MessageView.xaml" 。

然後我們開始設計MessageView.xaml，用VS或者Blend在MessageView.xaml中設計類似聊天工具的介面時，我們先加入一個Listbox來顯示當前發送的Message列表，然後添加一個訊息輸入框和Send Message按鈕。示：

 

      第二個圖中可以看到一個ApplicationBar，這個ApplicationBar用來查看訊息記錄，導航至新的Message History Page。

ApplicationBar的添加類似下面：

   1: <phone:PhoneApplicationPage.ApplicationBar>

   2:         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

   3:            <shell:ApplicationBar.MenuItems>

   4:                 <shell:ApplicationBarMenuItem x:Name="menuItem_History" Text="History"/>

   5:             </shell:ApplicationBar.MenuItems>

   6:             <shell:ApplicationBarIconButton x:Name="appbar_HistoryButton" 

   7:                                             IconUri="/icons/appbar.folder.rest.png" 

   8:                                             Text="Message History"

   9:                                             Click="appbar_HistoryButton_Click"/>

  10:         </shell:ApplicationBar>

  11:     </phone:PhoneApplicationPage.ApplicationBar>

      其中ApplicationBarIconButton的appbar_HistoryButton_Click中調用NavigationService的Navigate方法進行導航。

後台代碼如下：

   1: private void appbar_HistoryButton_Click(object sender, System.EventArgs e)

   2: {

   3:     this.NavigationService.Navigate(new Uri("/View/MessageHistoryView.xaml",UriKind.RelativeOrAbsolute));                                

   4: }

      第一步中我們已經建立了一個新的MessageViewModel，作為MessageView和MessageHistoryView公用的ViewModel，當然，實際建項目時這兩個最好分開，因為功能不一致，但是我們這裡只共用一個ViewModel以簡化代碼。

我們在ViewModelLocator中註冊MessageViewModel：

   1: public MessageViewModel MsgViewModel

   2:  {

   3:      get

   4:      {

   5:          return new MessageViewModel();

   6:      }

   7:  

   8:  }

      這樣子我們就可以在MessageView和MessageHistoryView的xaml檔案中通過這樣的方式在View中綁定ViewModel

DataContext="{Binding MsgViewModel,Source={StaticResource Locator}}"

      到這一步，基本架構的東西都已經搭好了，下一步就是開始添加SendMessage和ShowMessageHistory的功能，我們將在下一篇中繼續，

Coming Soon…….