Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 3

This is part 3 in a 3 part tutorial for creating a notes application using Silverlight and Windows Phone 7. The previous articles can be read here
Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 1
Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 2

Download the code here

Currently our application can display a list of notes, and create and save a new note. The last piece of the puzzle is to allow the user to delete an existing note. To accomplish this all we really need to do is add an application bar button to the details page, remove it from the working items list, and save it to isolated storage.

1. Add the appbar.save.rest.png image in C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons to the Images folder in the project, and set it’s ‘Build Action’ to Content’, and it’s ‘Copy to Output Directory’ proerpty to ‘Copy if newer’.
2. Change DetailsPage.xaml to include an application bar, with the following code:

   <phone:PhoneApplicationPage.ApplicationBar>
   	<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
   		<shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar.back.rest.png" Text="Back" Click="appbar_button2_Click"></shell:ApplicationBarIconButton>
   		<shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar.delete.rest.png" Text="Delete Note" Click="appbar_button1_Click"></shell:ApplicationBarIconButton>
   	</shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>
   

   The two ApplicationBarIconButton added here will allow the user to return to the main list of notes, or delete the current note being viewed.

   

3. Modify the DetailsPage class (DetaislPage.xaml.cs) to do the following
   • Create a private instance variable to represent the current index of current note
   • Change the ‘OnNavigatedTo’ method to set this index when the page gets focus
   • Add event handlers for the delete and back buttons

   The DetailsPage class uses an index scoped to the OnNavigatedTo method, and sets the pages DataContext using it. All we really need to do is change it to an instance member and set it in OnNavigated To like so:

   private int index;
   
   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
   	base.OnNavigatedTo(e);
   
   	string selectedIndex = "";
   	if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
   	{
   		index = int.Parse(selectedIndex);
   		DataContext = App.ViewModel.Items[index];
   	}
   }
   

   The event handlers are fairly straightforward. For the delete button, it should remove the note from the working list, save the current list to isolated storage, and finally navigate to the MainPage. The back button should simply navigate the user back to the MainPage.

   private void appbar_button1_Click(object sender, EventArgs e)
   {
   	if (index < App.ViewModel.Items.Count)
   	{
   		App.ViewModel.Items.RemoveAt(index);
   		StorageHelper.Save<ObservableCollection<Note>>(App.NotesFileName, App.ViewModel.Items);
   	}
   	NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
   }
   
   private void appbar_button2_Click(object sender, EventArgs e)
   {
   	NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
   }
   

   After all of these changes your class should look like this

   using System;
   using System.Collections.ObjectModel;
   using System.Windows.Navigation;
   using Microsoft.Phone.Controls;
   
   namespace MyNotes
   {
       public partial class DetailsPage : PhoneApplicationPage
       {
           // Constructor
           public DetailsPage()
           {
               InitializeComponent();
           }
   
           private int index;
   
           // When page is navigated to, set data context to selected item in list
           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
               base.OnNavigatedTo(e);
   
               string selectedIndex = "";
               if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
               {
                   index = int.Parse(selectedIndex);
                   DataContext = App.ViewModel.Items[index];
               }
           }
   
           private void appbar_button1_Click(object sender, EventArgs e)
           {
               if (index < App.ViewModel.Items.Count)
               {
                   App.ViewModel.Items.RemoveAt(index);
                   StorageHelper.Save<ObservableCollection<Note>>(App.NotesFileName, App.ViewModel.Items);
               }
               NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
           }
   
           private void appbar_button2_Click(object sender, EventArgs e)
           {
               NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
           }
       }
   }
   

And thats it. We can now add a new note, view a list of current notes and delete an existing note. This note app for Windows Phone 7 is fairly simple in functionality, so naturally there’s many more features you can add. For example, we could allow the editing of notes, or the addition of different types of notes, such as sketches. I’ve added the completed project below.

Download the code here