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.
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
.
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.
<!--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>
Recipe5_MyTasks
project folder and add a new folder called Images
. appbar.folder.rest.png
and appbar.add.rest.png
to this folder from Program Files (x86)Microsoft SDKsWindows Phonev7.1Iconslight
. For a non-64 bit machine, you may navigate to Program FilesMicrosoft SDKsWindows Phonev7.1Iconslight
. XAP
file. 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)); }
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>
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"/>
<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>
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; } }
MainPage.xaml.cs
file and add the using
statement for the reference System.Collections.ObjectModel
.using System.Collections.ObjectModel;
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;
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); }
MainPage
constructor and assign the myTasks
collection to the listbox itemsource
property:public MainPage() { InitializeComponent(); InitalizeTasks(); lstTasks.ItemsSource = myTasks; }
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.
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.