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'l make branding changes, binding to our LocalizedResources.
2. We'l add the buttons and ellipse, and then add some shapes on the ellipse to make it look like an old-fashioned reel.
3. We'l 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:
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:
2. Perform basic layout of primary controls
I'll add the following XAML in the ContentPanel Grid:
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:
I'll add the following XAML in the ContentPanel Grid:
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:
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:
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:
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:
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:
Hopefully none of this is new to you ... I've explained most of this code before, but
specific to this app bar:
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.
No comments:
Post a Comment