Use local database and isolatestorage in Windows Phone-In mvvm mode (-)

As we know, Windows Phone supports isolatestorage, and mango also adds SQL ce using LINQ as the local database. Next we will use mvvmlight to simulate a simple IM chat window for sending and viewing message history, to see how WP7 uses isolatestorage and local database:

1. Create a Windows Phone project for mvvmlight

You can search for mvvmlight tutorials in the garden or go to the official website of mvvmlight author. After the project is created, the mvvmlight Windows Phone template automatically generates mainpage. XAML and a mainviewmodel. Add the view folder to the project and create two views, namely two phoneapplicationpages, as the sending message window and viewing message history records. Create a new viewmodel (messageviewmodel), and add a new haisadatabase in the model to manage our localdatabase. I wanted to define an isolatestoragemanager helper class, but Microsoft has already encapsulated isolatestorage, so this is omitted.

As shown in:

The figure shows that there is an icons folder in the project, which is an icon file used to save phoneapplicationpage. ApplicationBar.

2. Create an SQL ce database in the Model

Create a userinfotable to inherit the inotifypropertychanged and inotifypropertychanging interfaces and declare the [Table] attribute to it. Declare several attributes in the userinfotable table as the column of the table, and add [column] Attribute before the attribute. Including

Userid, usernameandtime, userpwd, and usermessage. The code is similar:

   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: }

In Windows Phone, you can use userinfotable class to generate the userinfotable table in the database. Remember to reference the following namespaces.

Using system. Data. LINQ; using system. Data. LINQ. Mapping; using Microsoft. Phone. Data. LINQ; using Microsoft. Phone. Data. LINQ. Mapping;

Create a new haisadatacontext class that inherits datacontext. The constructor inherits the constructor of datacontext, adds our connectionstring, and declares our table, as shown in the following code:

   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:     }

At this point, our localdatabase has been created. For more information about the local database, see msdn.

3. Create the messageview. XAML interface and bind the messageviewmodel

Add a hyperlinkbutton in mainpage. XAML to set navigateuri = "/View/messageview. XAML ".

Then we start designing messageview. XAML, with vs or blend in messageview. when designing a chat tool-like interface in XAML, we first add a ListBox to display the list of currently sent messages, and then add a message input box and send message button. Description:

 

The second figure shows an ApplicationBar, which is used to view the message history and navigate to the new message history page.

The following example shows how to add an 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>

The navigationservice navigate method is called in appbar_historybutton_click of applicationbariconbutton for navigation.

The background code is as follows:

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

   2: {

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

   4: }

In the first step, we have created a new messageviewmodel, which is used as the viewmodel shared by messageview and messagehistoryview. Of course, it is best to separate the two models when creating a project because they have different functions, however, we only share one viewmodel here to simplify the code.

We registered messageviewmodel in viewmodellocator:

   1: public MessageViewModel MsgViewModel

   2:  {

   3:      get

   4:      {

   5:          return new MessageViewModel();

   6:      }

   7:  

   8:  }

In this way, you can bind the viewmodel to the view in the XAML file of messageview and messagehistoryview.

Datacontext = "{binding msgviewmodel, source = {staticresource locator }}"

In this step, everything in the basic framework has been set up. The next step is to add the sendmessage and showmessagehistory functions. We will continue in the next article,

Coming soon .......