In this post I will go through the steps of creating my first Windows Phone 7 application using Silverlight. It will be simple and will mostly concentrate on tools rather than phone specific functionality. Of course, I will do more posts describing features that are specific to Silverlight for Windows Phone 7.
First thing I have to do is download the tools and install them on my machine. You can find all appropriate link on www.Silverlight.net. If you click on Getting Started menu, you can look for phone development tools. You will download and install Visual Studio 2010 Express for Windows Phone. Once you are done with that task, start the studio.
Here is what the screen look like.
Let’s go ahead and click on New Project link. Let’s select Silverlight tree node, then Windows Phone application. One side note – no VB.NET menu inside Studio for Phone.
Once project is created, you will see the screen that contains three parts by default – solution explorer, XAML view and Design view.
Now we can even run the application. Let’s go ahead and do this. What we will see is the Phone emulator as well as studio going to debug mode. it will take a few minutes first time you run as emulator initializes. You can resize the emulator by clicking on the menu that I have pointed to with a hand cursor on the picture below. Eventually application loads, and you will the application just created, more precisely title and subtitle blocks.
Let’s add a few controls and some code now. You will notice that when you stop debugging the studio that emulator keeps running. This is good, and you want to keep it running in order to save deployment and initialization time.
We will use the studio’s designer surface to add controls to the surface. To do so, activate toolbox and pin it.
Let’s drag and drop a button onto design surface. Here is what we will see now.
Let’s now add event handler for click event. To do so, double-click on the button on design surface. Code view will open and handler will be created. We will do something really simple, we will change the title as follows:
private void button1_Click(object sender, RoutedEventArgs e){this.textBlockPageTitle.Text = "I changed the title";}Let’s run the application and see our code in action by clicking on the button. Now, the step we are going to do is explore debugging. To do so, set a breakpoint inside the event handler.
Run the application again from studio by clicking on debug button inside the studio. I put hand cursor next the button.
Once the emulator loads the application, click on the new button inside the application we added. Voila! Our break point got hit.
I illustrated in this post how to create a sample application inside Express Studio for Windows Phone, add controls to the design surface, write code behind and set breakpoints.
One last note. You will notice that even new controls dropped onto design surface are styled certain ways to match overall phone design. If you wonder why, it is because new project wizard comes preloaded with default styles for all basic controls. To look at those styles, just open app.xaml. For example, you can search for TargetType="ButtonBase" to see style for button.
There will be more to come as I explore phone specific features in Silverlight for Windows phone.
Thanks.
