Part 16: Working with the Application Bar

Play Part 16: Working with the Application Bar
Sign in to queue


Source Code:
PDF Version:

Our app works great as a simple SoundBoard, but we want to push the envelop and enable custom sounds—sounds that the user can record and re-use. This will require a few changes to our app ... in this lesson, we'll add an Application Bar with a Record button. When the user clicks it, we'll navigate the user to a new XAML page where they can record new custom sounds.

You've probably seen an application bar before, even if you didn't realize what it's name was. Application bars appear at the bottom of the viewable area for your app and can contain a number of icons as well as an ellipsis which, when tapped, reveals text below the icon, and possibly a menu of additional options. We'll see it at work before the end of this lesson.

Here's our game plan for this lesson:

  1. The project template already creates some boiler plate code for an application bar. We'll un-comment out their code and revise it to display an application bar with a record button and a menu option.
  2. We'll work with the AppResources.resx so that the text on our new application bar can be localized in the future.
  3. We'll clean up some unused files ... the old data model should go.
  4. We'll wire up and create event handler method stubs for the application bar button and menu option. In subsequent lessons, we'll flesh out the functionality in the event handler methods.


1. Enable the boilerplate BuildLocalizedApplicationBar() method

In the MainPage.xaml.cs, the MainPage() constructor has a commented out line of code calling the BuildLocalizedApplicationBar(). I'll un-comment that line of code out:

Generic Episode Image


... and then un-comment out the actual method further down on the code page:


Generic Episode Image


By un-commenting out these lines of code, we've added a simple application bar to our app.


2. Modifying our Application Bar Button and Text

Obviously, we'll want to change the image that is referenced in line 67 (above) to reference the microphone.png file in the Assets\AppBar folder:


Generic Episode Image


So, I'll make this change:


Generic Episode Image


... and I'll run the app. This reveals the app bar with the microphone icon and the ellipsis which, when tapped, reveals a menu option titled "Menu Option":


Generic Episode Image


Below the microphone icon, the word "add" appears. Let's change both of these.

First, the title of our method, "BuildLocalizedApplicationBar", suggests that this Application Bar retrieves it's textual values from the AppResources.resx, so let's open that file:


Generic Episode Image


... and make the following changes:


Generic Episode Image


  1. I add a property named AppBarAbout and set its value to About
  2. I add a property named AppBarRecord and set its value to Record
  3. I add a property to AppBarSave and set its value to Save

Also, I remove any properties I no longer need, including:

  • AppBarButtonText
  • AppBarMenuItemText
  • SampleProperty

... and I save this file.

Next, I'll need to re-write some of the BuildLocalizedApplicationBar() to utilize the settings added in the AppResources.resx file:


Generic Episode Image


  1. I re-write the creation of the "Record" button
  2. I re-write the creation of the "About" menu option
  3. I add them both to the Application Bar


3. Removing the old data model

When I attempt to run the app, I see that I may have been too hasty in deleting the "SampleProperty" from the AppResources.resx:


Generic Episode Image


I find that the source of the problem is code that I don't even use anymore ... i.e., the OLD data model code:


Generic Episode Image


I can kill two birds with one stone by deleting the old data model classes. I select ItemViewModel.cs and MainViewModel.cs, right-click, select Delete from the context menu. That cleans up the code base removing unnecessary code and removes the errant reference to the nonexistent entry in the AppResources.resx:


Generic Episode Image


One of my favorite authors says that you stay organized to stay productive. Keep your work area clean, like a sushi chef. Though I comment out code I don't think I'll need anymore, I also want to comb through the code once a day to keep the codebase pristine. When I open someone else's code and I look at it, I automatically assume it's all being used. Sometimes, however, there are classes or methods no longer called. This adds friction and confusion. When I'm not recording videos and actually writing code, I rely on a third-party tool called ReSharper ... it will analyze your code and find unused classes and methods, it can locate duplicate code and recommend changes and a thousand other improvements to your code. I highly recommend it.

At any rate, when we run the app this time we can see that the app bar looks has the text we would expect:


Generic Episode Image


4. Responding to the Click event of the App Bar's Record button

Finally in this lesson, we want to wire up the click event handler methods to our new button and menu items:

Generic Episode Image


I add line 69 which, as we learned in the lesson on Events, will add the RecordAudioClick method in its list of methods that will be triggered by the click event of the Record button. To create a method stub, use the technique we learned in the Event lesson—hover your mouse cursor over the blue dash under the letter R in RecordAudioClick to reveal a menu, and choose the "Generate method stub ..." menu option:


Generic Episode Image


This will create a method stub for the event handler, complete with a reminder that the method is not yet implemented by throwing an exception:


Generic Episode Image


We'll repeat this process for the "about" menu option. In line 75 (below) I associate a method event handler called AboutClick to the click event of the menu option:


Generic Episode Image


... and I use the technique described earlier to create a method stub for RecordAudioClick() (lines 86 through 89).



To recap, the big take away is how to create a new application bar, application bar icon, and application bar menu option. We used templated code and the AppResources.resx and wired up event handler method stubs, which we'll fully implement out in the coming lessons.



The Discussion

Add Your 2 Cents