Windows Phone 7 Development : Building a Phone Client to Access a Cloud Service (part 2) - Coding MainPage

3. Coding MainPage

In Solution Explorer, open MainPage.xaml.cs and replace the code there with the following C# code blocks that will implement the UI interacting with the user to add, delete, view, and edit notes, and also to register the user for the first time.

3.1. Specifying the Namespaces

Begin by listing the namespaces the application will use.

using System.Windows;
using Microsoft.Phone.Controls;

3.2. Code Constructor

In the constructor of MainPage, you will be setting DataContext of the user controls to the NotepadViewModel instance. When DataContext of ucNoteList and ucUserRegistraton is set to NotepadViewModel, the controls within the user controls' values will be controlled by the properties of NotepadViewModel.

public MainPage()
        {
            InitializeComponent();

            this.DataContext = NotepadViewModel.Instance;
            ucNoteList.DataContext = NotepadViewModel.Instance;
            ucUserRegistration.DataContext = NotepadViewModel.Instance;
        }

3.3. Coding the Save Button Event

When the user clicks the Add button, the SaveNote method from the NotepadViewModel instance will be called. Any direct calls to NotepadService will be handled from NotepadViewModel, leaving the handling of the web service call complexity centralized to NotepadViewModel. This is a great abstraction technique, allowing you to easily maintain the application.

private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            if (!string.IsNullOrEmpty(txtNote.Text))
            {
                NotepadViewModel.Instance.SaveNote(txtNoteName.Text, txtNote.Text);
            }
        }

					  

3.4. Coding the ViewEdit Button Event

When the ViewEdit button is clicked, the ShowNoteList property in NotepadViewModel will be set to true, which will trigger NoteListUserControl to appear. ShowNoteList will be set to true only if there are Notes to be selected.

private void btnViewEdit_Click(object sender, RoutedEventArgs e)
        {
            if (!string.IsNullOrEmpty(txtNote.Text))
            {
                NotepadViewModel.Instance.SaveNote(txtNoteName.Text, txtNote.Text);
            }
        }

					  

3.5. Coding the AddNew Button Event

When the AddNew button is clicked, SelectedNode in NotepadViewModel will be set to null, triggering the txtNote and txtNoteName contents to be set to empty because they are bound to SelectedNote. Although you can directly set the Text fields of txtNote and txtNoteName to an empty string, we are abstracting this particular task to NotepadViewModel because when the user selects the specific user note from NoteListUserControl, the txtNote and txtNoteName content will be automatically changed because they are bound to SelectedNote.

private void btnAddNew_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            NotepadViewModel.Instance.SelectedNote = null;
        }

					  

3.6. Coding the Delete Button Event

When the Delete button is clicked, the DeleteNote method from the NotepadViewModel instance will be invoked, SelectedNode will be set to null, and txtNote and txtNoteName will be set to an empty string automatically because they are bound to SelectedNode.

private void btnDelete_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            NotepadViewModel.Instance.DeleteNote();
        }