Phone_81_Development_for_Absolute_Beginners

Put your mouse cursor in the CommandBar element and in the Properties pane click the ellipsis button next to the PrimaryCommands property:

This will display an editor allowing you to add app bar buttons. Click the Add button to create your first app bar button:

Windows Phone 8.1 Development for Absolute Beginners – Page 280

The Properties pane on the right allows you to modify properties of the selected app bar button on the left. Here we’ll change the label to: Add Ritual …

Windows Phone 8.1 Development for Absolute Beginners – Page 281

… and the Icon to (1) an Icon (2) set to the + Add symbol:

Windows Phone 8.1 Development for Absolute Beginners – Page 282

To close the editor dialog, click the OK button at the bottom. This will have created an AppBarButton element. We’ll add a Name and Click attribute like so:

<AppBarButton Icon="Add" Label="Add Ritual" Name="AddRitual" Click="AddRitual_Click"/>

Put your mouse cursor in the AddRitual_Click event handler name and select the F12 keyboard key to create a method stub. When a user clicks the Add button in the command bar, we want to navigate to our new AddRitual.xaml page, so we’ll add the following code:

private void AddRitual_Click(object sender, RoutedEventArgs e)

{

Frame.Navigate(typeof(AddRitual));

}

Next, in the AddRitual.xaml page, I’ll paste in the following XAML inside of the Grid element:

<TextBlock HorizontalAlignment="Left"

Margin="34,161,0,0"

TextWrapping="Wrap"

Text="Goal Description:"

VerticalAlignment="Top"/>

<TextBox x:Name="goalDescriptionTextBox" HorizontalAlignment="Left" Margin="34,170,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="125"

Width="332"/>

<TextBox x:Name="goalNameTextBox" HorizontalAlignment="Left" Margin="34,98,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="332"/>

<TextBlock HorizontalAlignment="Left"

Margin="34,89,0,0"

TextWrapping="Wrap"

Text="Goal Name:"

Windows Phone 8.1 Development for Absolute Beginners – Page 283

VerticalAlignment="Top"/>

<Button x:Name="addButton" Content="Add" HorizontalAlignment="Left" Margin="34,322,0,0" VerticalAlignment="Top" Click="addButton_Click" />

Which creates the following preview:

Next, we’ll need to write code to handle the click event of the Add button. We’ll want to (a) add the new Ritual to the collection of rituals in memory, and save it to the Phone’s storage, then (b) navigate back to the MainPage.xaml. Put your mouse cursor on the addButton_Click event handler name and press the F12 key on your keyboard to create the method stub. I’ll add the following two lines of code to the method:

Windows Phone 8.1 Development for Absolute Beginners – Page 284

Now when I run the app, I can click the Add button in the command bar:

… I can enter a Goal Name and Goal Description, then click the Add button:

Windows Phone 8.1 Development for Absolute Beginners – Page 285

And when I return to the MainPage.xaml, I should be able to see the ritual I just added.

To ensure that we’re saving the data to the Phone’s local storage, I’ll go to Visual Studio while the app is running in the emulator and select the drop down list of Lifecycle Events and choose

“Suspend and shutdown”:

When I re-start the app, the new ritual should still be present.

Windows Phone 8.1 Development for Absolute Beginners – Page 286

Next, we’ll want to wire up the “I Did This Today” button so that, when a user clicks that button, it will record today’s date for the associated Ritual.

To begin, I’ll add a new Command folder:

Then I’ll add a new class. In the Add New Item dialog, (1) select Class, (2) rename to

CompletedButtonClick, then (3) select the Add button:

Windows Phone 8.1 Development for Absolute Beginners – Page 287

In the new CompletedButtonClick class, you’ll make it implement the ICommand interface like we learned in a previous lesson. To accomplish this, first you’ll need to add a using statement using the Control + [dot] technique, then selecting the first option from the Intellisense menu:

Windows Phone 8.1 Development for Absolute Beginners – Page 288

Then you’ll need to use the Control + [dot] technique a second time to display the Intellisense option to “Implement interface ‘ICommand’”.

Once you’ve selected this, the CanExecuteChanged event, as well as the CanExecute() and

Execute() methods will be stubbed out for you:

Windows Phone 8.1 Development for Absolute Beginners – Page 289