Part 3: Writing your First Windows Phone 8 App
Now that we have the tools we need installed, we can build our first Windows Phone 8 app.
Here's our game plan:
- We'll create a new Windows Phone App project
- We'll make some simple edits, like removing comments and adding a MediaControl and a Button control and we'll style it up
- We'll write an event handler that will respond to the click event of the Button
- In the Button click event handler we'll play a wav sound file
1. Create a new Windows Phone App project, name it "PetSounds"
Hopefully some of the basics steps like creating new projects, adding new files and so on are already familiar to you from personal experience or from watching other Absolute Beginner's series on Channel9. I won't take much time to explain those ... if something is unfamiliar, you may want to review the C# for Absolute Beginners series:
- Project ...
In the New Project dialog:
- Make sure you're in the Windows Phone project templates
- Select the Windows Phone App project template
- Rename to: PetSounds
- Make sure the name of the Solution has changed to "PetSounds" as well
- Click OK
You may see the following dialog:
Since this series is only targeting the Windows Phone OS 8.0, select this option. Just know that you can create apps that target previous versions of the Windows Phone operating system in Visual Studio if you want to expand your apps reach to owners of older Windows Phone devices.
2. Delete unnecessary comments to more easily navigate through the code
After a few moments, the new Project will be created and loaded into the Solution Explorer, and the MainPage.xaml will be visible in the main area of Visual Studio. Notice that these "screens" are called "Pages", as in MainPage.xaml. In our first apps we'll only work with a single "page", but in other apps we'll add pages and navigate between them.
I'll assume you've never worked with a Windows Phone project template before. You'll see the MainPage.xaml loaded into the visual designer:
- On the left, you'll see the visual designer. While you can use this as your primary means of laying out and adding controls to your Windows Phone app, I use it primarily as feedback for what I do in the ...
- XAML editor pane, on the right. I typically write all my XAML by hand. Changes I make in the XAML code will be reflected in the visual designer and vice versa. They are two perspectives, but represent the same thing.
There are a number of tools beneath the panes:
... and between the panes:
... feel free to experiment with them. They are self explanatory and you need to take a moment to play around with them and understand their usage. However, since it's not critical to our lesson, I want to move ahead. In the XAML pane, I want to remove two large comment passages so that it's easier to navigate through the XAML. I've identified these sections as follows:
You can safely delete these comments. Be sure to delete everything from the starting:
... to the ending ...
Your XAML should look like this:
We'll be focusing on the "ContentPanel" beginning in line 36 throughout this lesson adding new XAML code between the opening and closing <Grid> elements.
3. Add a Button control to the ContentPanel and style it
Add the following code between the opening and closing <Grid> elements:
Once you add the:
... code, notice how the visual designer changes:
The button takes up practically the entire area of the screen. That won't do ... we need to limit the size of the Button by setting a Height and Width attribute:
The value "200" infers "200 pixels".
The visual designer updates to a smaller button size:
Let's move the Button control to the upper left-hand corner of the page (beneath the page title), and make its background color red:
I also gave the <Button> control a name so that I can reference that control in C#. Giving controls names is optional. You only need to give things names that you want to access somehow in C#. I know I'll want to access the button later, so I give it a programmatic name now.
The visual designer updates to show the effect of our changes:
That's a great start. You can see that we can manipulate the visual qualities of objects on our Windows Phone page by setting it's attributes.
4. Add a MediaElement control
Next, let's add a MediaElement control to the XAML, beneath the Button control:
Notice I can add whitespace and extra lines between my XAML code and it won't harm anything. As you'll learn later, Visual Studio will automatically indent and space the code for readability, however it will not impact how it is rendered on the page.
Also, I've not set the Source attribute of the MediaElement yet. That's because I do not have any sources (i.e., media elements, like sound files) in my project to choose from.
5. Add a wav file as an asset to the project
Make sure you've downloaded the assets the accompany this video. You can download them from the place where you downloaded this document, or are watching the videos.
I've unzipped that file into a folder called C9Phone8 in my Documents directory.
The C9Phone8 directory has 3 sub-directories:
We want to use the assets contained in the PetSounds_Assets folder. Inside that folder, there's two sub folders ... we want to copy the Audio sub-folder into our project.
The target for our Audio folder is the Assets subfolder of our project:
I drag and drop the Audio folder from Windows Explorer to the target directory in Visual Studio's Solution Explorer, specifically the Assets folder ... now my Assets folder looks like this as I expand everything out:
There are a number of .wav sound files in my app. I want to access one specific file ... a Duck.wav file. I'll add that as the value for the Source attribute in my MediaElement XAML element:
First, notice that I added the full subfolder path relative to the MainPage.xaml file, which lives in the project's root directory.
Second, notice that I also have added two more attributes ... I set Volume to "1" which means the loudest. Many settings in the Windows Phone API are 0.0 for the smallest and 1.0 for the largest value, with 0.5 somewhere in between. Most of these values are the C# data type Double.
Third, I will want to access this control programmatically to trigger the playback of the sound when someone taps the button, so I'll need to give the MediaControl a name. You may wonder what the x: prefix is for ... I'll explain that in the next lesson. Just keep that in the back of your mind for now.
Finally, I set the AutoPlay attribute to "False". If I set this to "True", the Duck.wav sound file would play immediately as my app loaded. That's not what I want. I want to trigger the wav file to play when I click the "Quack" button. We'll write code to accomplish that next.
6. Add an event handler for the Button click event
In the <Button> XAML element, I'll add the Click="" attribute. Visual Studio's Intellisense feature gives me the option to create a new event handler:
Making sure that option is highlighted, I'll hit the enter key on my keyboard to generate a name for the click event handler:
I want to write code that will execute when someone clicks the button, so I'll want to navigate to the PlayAudioButton_Click() method and write C# code there.
I right-click anywhere on that line of code and choose "Navigate to Event Handler" from the context menu:
This opens up a file called MainPage.xaml.cs in the main area of Visual Studio.
If you're new to creating Windows, Web or now Phone apps in Visual Studio, you'll come to realize that there's two parts to these "pages" we're creating. The XAML and design view allows us to write declarative code (XAML). The related code view (the .cs file) allows us to define behavior in C#. These are two halves of the same concept. More on that later. In Visual Studio, your cursor should be located between the opening and closing curly braces for the PlayAudioButton_Click() method:
Since this code block will execute whenever someone taps the Quack button on the phone, we'll want to trigger the MediaElement to play the sound we set in its Source attribute, namely, the Quack.wav file:
I use the MediaElement's name, QuackMediaElement, to access it programmatically. I want to call its Play() method to kick off the playback of the Source, in other words, the Quack.wav file.
Now, let's test the app.
7. Run the app
Again, this should be familiar to you. You'll run the application in debug mode the same way you would run Console applications that we created in the C# Fundamentals series ... by either using the Play button in the toolbar OR using the F5 key on your keyboard.
What you see next is the Windows Phone Emulator. It's a virtual machine that is running the full Windows Phone 8.0 operating system. In other words, the operating system actually thinks it is running on a physical phone device, however it is "virtual" in the sense that Microsoft created software that mimics the phone hardware in every way. We'll be using the Phone Emulator extensively in this series as it's easier than deploying our tests to a physical phone each time we want to test the code we've written or a change we've made. You'll learn more about the features of the Phone Emulator in this series.
Use your mouse to simulate using your finger to tap the screen of the phone. You want to click on the red Quack button. If your computer is set up to hear audio, then you'll hear a duck's quack through your headset or speakers.
To stop debugging the app, click the red square button in the toolbar:
To quickly recap, in just one lesson, we've created a simple sound board app. We learned how to create a Windows Phone project, how to modify the declarative XAML code to add and configure controls. We learned how to add assets to the project and reference them in our code, and how to add event handlers to respond to certain events that are triggered by the end user. We learned how the MainPage.xaml and the MainPage.xaml.cs are related ... we'll learn more about that in the next lesson. We learned how to trigger methods of the controls to play the sound when a user taps the button. Finally, we learned about the Windows Phone emulator as a means of testing our apps in a virtual environment.
However, there's a lot to talk about ... if you're new to XAML, it's really important for you to have a solid foundation with it, so in the next lesson I want to talk about the features of XAML and build on those throughout the rest of this series. As I said at the outset, many of the lessons you learn here will transfer over to all the APIs the utilize XAML, such as the Windows Presentation Foundation and Windows Store apps.