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'l un-comment out their code and revise it to display an application bar with a record button and a menu option.
2. We'l work with the AppResources.resx so that the text on our new application bar can be localized in the future.
3. We'l clean up some unused files ... the old data model should go.
4. We'l wire up and create event handler method stubs for the application bar button and menu option. In subsequent lessons, we'l 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:
... and then un-comment out the actual method further down on the code page:
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:
So, I'll make this change:
... 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":
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:
... and make the following changes:
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:
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:
I find that the source of the problem is code that I don't even use anymore ... i.e., the
OLD data model code:
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:
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:
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:
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:
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:
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:
... and I use the technique described earlier to create a method stub for
RecordAudioClick() (lines 86 through 89).
Recap
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.
No comments:
Post a Comment