Building a simple app

In this final recipe of this chapter, let's make use of all the knowledge we gained and apply it to one simple MyTasks App.

Getting ready

Right-click on the solution folder from the preceding recipe and navigate to Open | New Project. Select the Windows Phone 7 application project template. Name the project Recipe5_MyTasks.

How to do it...

Let's first build the UI for this app. This app will have two pages; the first page is the main.xaml file and the second one is the add task.xaml file.

1. Add an application bar at the bottom to provide navigation to the two pages that we are going to build in this app. The application bar is added, as shown in the following code snippet:

   <!--Sample code showing usage of ApplicationBar-->
   <phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar BackgroundColor="Orange" IsVisible="True" IsMenuEnabled="True">
       <shell:ApplicationBarIconButton IconUri="/Images/appbar.folder.rest.png" Click="ButtonFolder_Click" Text="Task Folder"/>
       <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Click="ButtonAdd_Click" Text="Add Task"/>
     </shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>

2. Right-click on the Recipe5_MyTasks project folder and add a new folder called Images.

3. Let's copy two images appbar.folder.rest.png and appbar.add.rest.png to this folder from \Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\light. For a non-64 bit machine, you may navigate to \Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\light.

4. Right-click on the image files you added and select the Build Action property to Content. This will copy the images to an XAP file.

5. Open the MainPage.xaml.cs file and add two button event methods. The first button event, ButtonFolder_Click, uses the NavigationService class to navigate to MainPage.xaml. The second button event, ButtonAdd_Click, navigates to AddTask.xaml file:

   private void ButtonFolder_Click(object sender, EventArgs e)
   {
     NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
   }
   
   private void ButtonAdd_Click(object sender, EventArgs e)
   {
     NavigationService.Navigate(new Uri("/AddTask.xaml", UriKind.Relative));
   }

6. Open the Main.xaml file and add the list box with its data template:

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Margin="12,0,12,-13" Grid.Row="1">
     <ListBox x:Name ="lstTasks" Grid.Row="3" Grid.Column ="1">
       <ListBox.ItemTemplate>
         <DataTemplate>
           <Grid>
             <Grid.RowDefinitions>
               <RowDefinition/>
               <RowDefinition />
               <RowDefinition Height="15" />
             </Grid.RowDefinitions>
   
             <Grid.ColumnDefinitions>
               <ColumnDefinition Width="150" />
               <ColumnDefinition Width="200" />
               <ColumnDefinition Width="100" />
             </Grid.ColumnDefinitions>
   
             <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" />
             <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding DateDue}" />
             <TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Priority}" Forground = "{StaticResource PhoneAccentBrush}" />
             <TextBlock Grid.Row="1" Grid.ColumnSpan="3" Text="{Binding Notes}" />
             <TextBlock Grid.Row="2" Grid.ColumnSpan="3" />
           </Grid> 
         </DataTemplate>
       </ListBox.ItemTemplate>
     </ListBox>
   </Grid>

   

7. Open the AddTask.xaml file and add four text blocks in the ContentPanel grid:

   <!--ContentPanel - place additional content here-->
   <TextBlock x:Name="tbName" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" />
   <TextBlock x:Name="tbDescription" HorizontalAlignment="Left" Margin="8,70,0,0" TextWrapping="Wrap" Text="Description" VerticalAlignment="Top" />
   <TextBlock x:Name="tbPriority" HorizontalAlignment="Left" Margin="8,150,0,0" TextWrapping="Wrap" Text="Priority" VerticalAlignment="Top" />
   <TextBlock x:Name="tbDueDate" HorizontalAlignment="Left" Margin="8,277,0,0" TextWrapping="Wrap" Text="Due Date" VerticalAlignment="Top"/>

8. Now add corresponding textbox controls for each one, as follows:

   <TextBox x:Name="txtName" Margin="119,0,70,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
   <TextBox x:Name="txtDescription" Margin="119,62,70,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
   <TextBox x:Name="txtDueDate" Margin="119,262,74,298" TextWrapping="Wrap"/>
   <Button x:Name="btnAdd" Content="Add"  Margin="131,0,205,225" VerticalAlignment="Bottom" RenderTransformOrigin="0.969,0.514" Click="btnAdd_Click" />
   <Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Right"  Margin="0,0,74,225" VerticalAlignment="Bottom" Click="btnCancel_Click" />
   <ListBox x:Name="lsyPriority" Margin="131,154,84,0" VerticalAlignment="Top">
     <ListBoxItem Content="Low"/>
     <ListBoxItem Content="Medium"/>
     <ListBoxItem Content="High"/>
   </ListBox>
   </Grid>

   

9. Right-click on the project folder and add a new class file. Name it DataClass.cs. Now, add the following DataClass with all its properties. If you compare this class with the preceding recipes, for simplicity we changed int Priority to string Priority and added one more DateTime property called DateDue.

   public class DataClass
   {
     public string Name { get; set; }
     public string Notes { get; set; }
     public string Priority { get; set; }
     public DateTime DateDue { get; set; }
     public DateTime DateCreated { get; set; }
   }

10. Open the MainPage.xaml.cs file and add the using statement for the reference System.Collections.ObjectModel.

    using System.Collections.ObjectModel;

11. ObeservableCollection is the collection class that we will use for building our task collection. Observable Collection provides the notifications whenever items get added or removed. Add the following line of code before the MainPage constructor method in the MainPage.xaml.cs file:

    private ObservableCollection<DataClass> myTasks;

12. Let's add a method to initialize myTasks:

    private void InitalizeTasks()
    {
      myTasks = new ObservableCollection<DataClass>();
      DataClass myTask1 = new DataClass()
      {
        Name = "Task Name 1",
        Notes = "Task Note 1",
        Priority = "Low",
        DateDue = new DateTime(2011, 9, 1),
        DateCreated = DateTime.Now
      };
      myTasks.Add(myTask1);
    
      DataClass myTask2 = new DataClass()
      {
        Name = "Task Name 2",
        Notes = "Task Note 2",
        Priority = "Medium",
        DateDue = new DateTime(2011, 10, 1),
        DateCreated = DateTime.Now
      };
      myTasks.Add(myTask2);
    
      DataClass myTask3 = new DataClass()
      {
        Name = "Task Name 3",
        Notes = "Task Note 3",
        Priority = "High",
        DateDue = new DateTime(2011, 11, 1),
        DateCreated = DateTime.Now
      };
      myTasks.Add(myTask3);
    }

13. Initialize this in the MainPage constructor and assign the myTasks collection to the listbox itemsource property:

    public MainPage()
    {
      InitializeComponent();
      InitalizeTasks();
      lstTasks.ItemsSource = myTasks;
    }

14. Press F5 and check out the results.

How it works...

In this recipe we created a display of the list of tasks in the ListBox and a form to add a new task to the list.

We initialized the tasks using the ObeservableCollection class and then added static data to this collection using the Add method.

Once the collection was built, we bound this list to ListBox for display. We added a navigation bar using the built-in ApplicationBar and then added two icons, one for adding a task to the list and another for navigating back to the main page.

There's more...

In the previous recipe, we mainly covered how to create the data binding for the main page list and then navigate to a new form to add the task. We can also add another important feature to select a list item and then update the existing data.

See also

Check the recipes in Chapter 2, Isolated Storage, to learn how to save the tasks to local storage. Also, check Chapter 3, XML as a Data Store, to learn how to save the tasks to XML files.