Part 19: Setting up the RecordAudio.xaml Page

Play Part 19: Setting up the RecordAudio.xaml Page
Sign in to queue

Description

Source Code: https://aka.ms/absbeginnerdevwp8
PDF Version: https://aka.ms/absbeginnerdevwp8pdf

Now that we can navigate to the new RecordAudio.xaml page, it's time to focus on the layout of this page. If you'll recall from our low-tech UI sketches, we envisioned a simple reel image that would rotate to indicate that the app was recording. There would be a button to start the recording process and a button to play back the sound. Finally, there would be an app bar to save the sound and give it a name. In this lesson, we'll get started by laying out the page and worry about the audio recording functionality and the animation later.

So the game plan in this short lesson is pretty straight forward ...

  1. We'll make branding changes, binding to our LocalizedResources.
  2. We'll add the buttons and ellipse, and then add some shapes on the ellipse to make it look like an old-fashioned reel.
  3. We'll add an app bar like we learned how to do earlier.

 

1. Perform simple branding changes

We'll begin by modifying the text at the top of the app:

Generic Episode Image

  1. We'll pull the app's name from our LocalResources.resx file through the familiar syntax we've used many times before.
  2. For now, I'll just hardcode the Text attribute as "record audio".

That should produce the following results:

 

Generic Episode Image

 

2. Perform basic layout of primary controls

I'll add the following XAML in the ContentPanel Grid:

Generic Episode Image

 

  1. We'll use a StackPanel to stack the controls in a vertical fashion.
  2. We'll use a ToggleButton, which has two states: on and off. The idea is that we want to turn recording on and off. When the ToggleButton switches states, we'll want to handle the event that is raised to begin or stop the recording process.
  3. We'll create a Grid that we'll use to position the Ellipse. We set the color of the Ellipse to the built-in PhoneAccentBrush color, the primary tile color selected for the phone.
  4. We'll add one last button for playback of the last sound that was recorded.

It should produce the following results:

 

Generic Episode Image

 

The Ellipse control is not complete—we want it to look like an old reel to reel player. We can accomplish this by using several smaller shapes in XAML—a small Ellipse in the center, and small Rectangles aligned to different positions of the main outer Ellipse:

 

Generic Episode Image

 

Hopefully most of the code is self explanatory. We use a series of Alignments and Margins to position the shapes on top of the main Ellipse.

If correct, the results should look like this:

 

Generic Episode Image

 

3. Add an App Bar

We'll uncomment the lines of code provided by the file template to enable an app bar on the page. In the RecordAudio.xaml.cs file:

 

Generic Episode Image

 

Hopefully none of this is new to you ... I've explained most of this code before, but specific to this app bar:

  1. Uncomment the call to BuildLocalizedApplicationBar().
  2. Uncomment out the BuildLocalizedApplicationBar() method boilerplate.
  3. Create a new ApplicationBarIconButton, and set its IconUri property to the save.png file as well as set its text to the AppResources.resx entry AppBarSave that we created earlier in this series.
  4. Create and wire up a new event handler method for the Click event (see #7) ignoring the suggested name when I typed the += characters, instead preferring my own name, and then using the hover-over-the-blue-dash method to reveal the context menu option to generate a method stub.
  5. Add the recordAudioAppBar to the app bar.
  6. Make the application bar visible.
  7. This is the stubbed out event handler you created in step 4 (above).

Running the app and navigating to this page will reveal the app bar with a small disk image titled "save".

Recap

To recap, there are no big takeaways per se, just use the techniques we've learned before to implement the special layout for this page. The only new control you met was the ToggleButton which will toggle on or off as opposed to a typically button that can only be tapped / clicked.

Embed

Download

The Discussion

Add Your 2 Cents