B
BobTabor, Clint Rutkas
Guest
Source Code: http://aka.ms/absbeginnerdevwp8
Now that we have the tools we need installed, we can build our first Windows Phone 8 app.
Heres our game plan:
(1) Well create a new Windows Phone App project
(2) Well make some simple edits, like removing comments and adding a MediaControl and a Button control and well style it up
(3) Well write an event handler that will respond to the click event of the Button
(4) In the Button click event handler well 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 Beginners series on Channel9. I wont take much time to explain those ... if something is unfamiliar, you may want to review the C# for Absolute Beginners series:
(1) File
(2) New
(3) Project ...
In the New Project dialog:
(1) Make sure youre in the Windows Phone project templates
(2) Select the Windows Phone App project template
(3) Rename to: PetSounds
(4) Make sure the name of the Solution has changed to "PetSounds" as well
(5) 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 well only work with a single "page", but in other apps well add pages and navigate between them.
Ill assume youve never worked with a Windows Phone project template before. Youll see the MainPage.xaml loaded into the visual designer:
(1) On the left, youll 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 ...
(2) 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 its not critical to our lesson, I want to move ahead. In the XAML pane, I want to remove two large comment passages so that its easier to navigate through the XAML. Ive 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:
Well 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:
<Button>Quack</Button>
... code, notice how the visual designer changes:
The button takes up practically the entire area of the screen. That wont 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:
Lets 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 Ill 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:
Thats a great start. You can see that we can manipulate the visual qualities of objects on our Windows Phone page by setting its attributes.
4. Add a MediaElement control
Next, lets 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 wont harm anything. As youll 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, Ive not set the Source attribute of the MediaElement yet. Thats 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 youve downloaded the assets the accompany this video. You can download them from the place where you downloaded this document, or are watching the videos.
Ive 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, theres 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 Studios 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. Ill 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 projects 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 Ill need to give the MediaControl a name. You may wonder what the x: prefix is for ... Ill 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. Thats not what I want. I want to trigger the wav file to play when I click the "Quack" button. Well write code to accomplish that next.
6. Add an event handler for the Button click event
In the <Button> XAML element, Ill add the Click="" attribute. Visual Studios Intellisense feature gives me the option to create a new event handler:
Making sure that option is highlighted, Ill 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 Ill 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 youre new to creating Windows, Web or now Phone apps in Visual Studio, youll come to realize that theres two parts to these "pages" were 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, well want to trigger the MediaElement to play the sound we set in its Source attribute, namely, the Quack.wav file:
I use the MediaElements 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, lets test the app.
7. Run the app
Again, this should be familiar to you. Youll 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. Its 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. Well be using the Phone Emulator extensively in this series as its easier than deploying our tests to a physical phone each time we want to test the code weve written or a change weve made. Youll 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 youll hear a ducks quack through your headset or speakers.
To stop debugging the app, click the red square button in the toolbar:
Recap
To quickly recap, in just one lesson, weve 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 ... well 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, theres a lot to talk about ... if youre new to XAML, its 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.
Continue reading...
Now that we have the tools we need installed, we can build our first Windows Phone 8 app.
Heres our game plan:
(1) Well create a new Windows Phone App project
(2) Well make some simple edits, like removing comments and adding a MediaControl and a Button control and well style it up
(3) Well write an event handler that will respond to the click event of the Button
(4) In the Button click event handler well 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 Beginners series on Channel9. I wont take much time to explain those ... if something is unfamiliar, you may want to review the C# for Absolute Beginners series:
(1) File
(2) New
(3) Project ...
In the New Project dialog:
(1) Make sure youre in the Windows Phone project templates
(2) Select the Windows Phone App project template
(3) Rename to: PetSounds
(4) Make sure the name of the Solution has changed to "PetSounds" as well
(5) 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 well only work with a single "page", but in other apps well add pages and navigate between them.
Ill assume youve never worked with a Windows Phone project template before. Youll see the MainPage.xaml loaded into the visual designer:
(1) On the left, youll 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 ...
(2) 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 its not critical to our lesson, I want to move ahead. In the XAML pane, I want to remove two large comment passages so that its easier to navigate through the XAML. Ive 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:
Well 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:
<Button>Quack</Button>
... code, notice how the visual designer changes:
The button takes up practically the entire area of the screen. That wont 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:
Lets 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 Ill 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:
Thats a great start. You can see that we can manipulate the visual qualities of objects on our Windows Phone page by setting its attributes.
4. Add a MediaElement control
Next, lets 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 wont harm anything. As youll 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, Ive not set the Source attribute of the MediaElement yet. Thats 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 youve downloaded the assets the accompany this video. You can download them from the place where you downloaded this document, or are watching the videos.
Ive 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, theres 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 Studios 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. Ill 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 projects 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 Ill need to give the MediaControl a name. You may wonder what the x: prefix is for ... Ill 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. Thats not what I want. I want to trigger the wav file to play when I click the "Quack" button. Well write code to accomplish that next.
6. Add an event handler for the Button click event
In the <Button> XAML element, Ill add the Click="" attribute. Visual Studios Intellisense feature gives me the option to create a new event handler:
Making sure that option is highlighted, Ill 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 Ill 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 youre new to creating Windows, Web or now Phone apps in Visual Studio, youll come to realize that theres two parts to these "pages" were 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, well want to trigger the MediaElement to play the sound we set in its Source attribute, namely, the Quack.wav file:
I use the MediaElements 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, lets test the app.
7. Run the app
Again, this should be familiar to you. Youll 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. Its 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. Well be using the Phone Emulator extensively in this series as its easier than deploying our tests to a physical phone each time we want to test the code weve written or a change weve made. Youll 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 youll hear a ducks quack through your headset or speakers.
To stop debugging the app, click the red square button in the toolbar:
Recap
To quickly recap, in just one lesson, weve 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 ... well 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, theres a lot to talk about ... if youre new to XAML, its 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.
Continue reading...