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

This is part 2 in a 3 part tutorial for creating a notes application using Silverlight and Windows Phone 7. The other 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 3

In part one of the tutorial we created the project, added a new Note class to serve as our model, and added a StorageHelper class to help us manage IsolatedStorage. The next step is to add support for adding a note to the app. We’ll keep it simple and just use a button on the main page’s application bar to add a note. When a user clicks the add note button on the main page, a new Windows Phone 7 page will load, which will enable the user to enter a note title and note text. They’ll also be able to save the note, or cancel the save, which will return them to the main page.

1. Add default icons to the project in order to support adding a note, saving a note and canceling the action. When you install the Windows Phone 7 SDK it also installs a number of default icons in C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons. For our purposes we’re going to use the icons in the dark folder, specifically add the following to the Images folder:
   • appbar.add.rest.png
   • appbar.save.rest.png
   • appbar.cancel.rest.png

   After adding these icons, modify their properties so that their Resource type is Content and Copy to output directory is ‘Copy if newer’. This allows us to configure the IconUri property on the ApplicationBarIconButton to a path like the following: IconUri=”/Images/appbar.add.rest.png”.

2. Modify MainPage.xaml and MainPage.xaml.cs to do the following:
   • Display the notes properly
   • Add a new application bar button
   • An event handler for the button’s click
   • Refresh the list of displayed notes whenever the page is navigated to. This will allow the user to see the new notes that they’ve added.

   In MainPage.xaml change the StackPanel in MainListBox to the following:

   <StackPanel>
      <TextBlock x:Name="ItemText" Text="{Binding Title}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
      <TextBlock x:Name="DetailsText" Text="{Binding CreateDate}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
   </StackPanel>
   

   This allows the notes to be displayed on the main page, displaying the note’s title and createdate. Now add the following application bar before the closing phone:PhoneApplicationPage tag

   <phone:PhoneApplicationPage.ApplicationBar>
      <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar.add.rest.png" Text="Add" Click="appbar_button1_Click"></shell:ApplicationBarIconButton>
      </shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>
   

   This will add our appbar button and use the add icon we added earlier as it’s image. Next we change MainPage.xaml.cs to handle the app bar button’s click event. First add an event handler:

           private void appbar_button1_Click(object sender, EventArgs e)
           {
               // Navigate to the new page
               NavigationService.Navigate(new Uri("/AddPage.xaml", UriKind.Relative));
   
               // Reset selected index to -1 (no selection)
               MainListBox.SelectedIndex = -1;
           }
   	

   This simply uses the base navigation framework in the windows phone 7 version of silverlight to navigate the user to the AddPage page, which we’ll add in a bit. Now modify the OnNavigatedTo method to refresh the data list whenever the page gets focus

           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
               base.OnNavigatedTo(e);
   
               if (DataContext == null)
                   DataContext = App.ViewModel;
   
               App.ViewModel.Refresh();
               MainListBox.ItemsSource = App.ViewModel.Items;
           }
   	

3. Modify MainViewModel.cs to add a Refresh method that will set the ViewModel’s current Items property to the latest data in isolated storage. All we really need to do is call the Load method in our StorageHelper class

   public void Refresh()
   {
       Items = StorageHelper.Load<ObservableCollection<Note>>(App.NotesFileName);
   }
   

   Also, remove the code in the MainViewModel.cs constructor that initializes the ObservableCollection of ItemViewModels. The Refresh method will be called by the MainPage’s OnNavigateTo method (which is also called when the page is first displayed)

4. Finally, add a new Silverlight xaml page, AddPage.xaml and configure it with Silverlight controls (textblocks and textboxes) for title and note. Additionally, add the application bar items to the AddPage.xaml file for saving and canceling, and modify AddPage.xaml.cs to handle the click events

   

   The xaml for AddPage.xaml should look like the following. Note that we’re using the save and cancel icons we added earlier, for the application bar

   <phone:PhoneApplicationPage
       x:Class="MyNotes.AddPage"
       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"
       FontFamily="{StaticResource PhoneFontFamilyNormal}"
       FontSize="{StaticResource PhoneFontSizeNormal}"
       Foreground="{StaticResource PhoneForegroundBrush}"
       SupportedOrientations="Portrait" Orientation="Portrait"
       mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
       shell:SystemTray.IsVisible="True">
   
       <!--LayoutRoot contains the root grid where all other page content is placed-->
       <Grid x:Name="LayoutRoot" Background="Transparent">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="*"/>
           </Grid.RowDefinitions>
   
           <!--TitlePanel contains the name of the application and page title-->
           <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
               <TextBlock x:Name="ApplicationTitle" Text="My Notes" Style="{StaticResource PhoneTextNormalStyle}"/>
               <TextBlock x:Name="PageTitle" Text="Add Note" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
           </StackPanel>
   
           <!--ContentPanel - place additional content here-->
           <Grid x:Name="ContentGrid" Grid.Row="1">
               <TextBox Height="72" HorizontalAlignment="Left" Margin="14,68,0,0" Name="textTitle" Text="" VerticalAlignment="Top" Width="460" />
               <TextBox Height="295" HorizontalAlignment="Left" Margin="14,192,0,0" Name="textNote" Text="" VerticalAlignment="Top" Width="460" />
               <TextBlock Height="30" HorizontalAlignment="Left" Margin="24,32,0,0" Text="Title" VerticalAlignment="Top" />
               <TextBlock Height="30" HorizontalAlignment="Left" Margin="24,156,0,0" Text="Note" VerticalAlignment="Top" />
           </Grid>
       </Grid>
   
       <phone:PhoneApplicationPage.ApplicationBar>
           <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
               <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar.save.rest.png" Text="Save Note" Click="button1_Click"></shell:ApplicationBarIconButton>
               <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar.cancel.rest.png" Text="Cancel" Click="button2_Click"></shell:ApplicationBarIconButton>
           </shell:ApplicationBar>
       </phone:PhoneApplicationPage.ApplicationBar>    
   
   </phone:PhoneApplicationPage>
   

   The code behind for this page really only needs two events added to it, to save the note and navigate back to the main page, and to navigate back to the main page when the user clicks ‘cancel’

   private void button1_Click(object sender, EventArgs e)
   {
   	Note newNote = new Note { Title = textTitle.Text, NoteText = textNote.Text, CreateDate = DateTime.Now };
   	newNote.Save();
   
   	NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
   }
   
   private void button2_Click(object sender, EventArgs e)
   {
   	NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
   }
   

And thats it! We should now be able to add a note to our notes.dat file, and view the new note in a list of notes on our main page. As you can see adding controls and event handlers in silverlight and windows phone 7 is quick and easy. Next up, deleting a note…..

Comments

• Categories

  • .NET
  • ASP.NET
  • ASP.NET MVC
  • Azure
  • Facebook
  • Silverlight
  • Windows Phone 7
  • XNA

• Archives

  • August 2010
  • July 2010
  • June 2010
  • April 2009
  • March 2009

• Reading now

• Recent Posts

  • Facebook, C# and ASP.NET MVC – Code samples for friends list, activities list and wall posts
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 3
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 2
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 1
  • Windows Phone 7 – List of Tutorials and Resources