Over a million developers have joined DZone.

Starting a New Project for Windows Phone

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

Ok now it is time to get started. Open up Visual Studio. I am using Visual Studio 2010 Professional version, if you have Visual Studio for Windows Phone Express that is perfect for building windows phone 7 apps.

I will now refer to Visual Studio as VS. Once you open up VS you should see a welcome screen and in the upper left see a link for a New Project… Click that.

Then you should see a screen where you can select what type of project you would like to make. Here I selected a Windows Phone Pivot Application. Give it a name and click ok. The name is the name of your project, this will create a folder in your projects folder for VS. This doesn’t have to be the name of your app.

You will be asked what type of WP7 OS version you would like to create. Pick 7.1 as it is the latest version of WP7 and will give you access to some really awesome things inside the Mango(the code name for Windows 7.1 OS) 7.0 is the original release of WP7 and doens’t have everything that 7.1 has.

You will now be shown the project screen. Here you will see a windows phone on one side, a bunch of code on the other, and then your solution explorer on the right.

The code you see is XAML code. This code is used to design and format what the page of a silverlight for Windows Phone 7 app page. You can see what the app will look like in the windows next to the code.

On the right is the solution explorer, here you can view all the files linked to the project/solution.

Click on the little arrow next to MainPage.xaml to show the MainPage.xaml.cs file. Double click the .cs file to open up the code file for the MainPage.

As you can see this is a bunch of C# code. (If you really wanted you could have this as VB code, but I am going to be coding in C#.) This code is used to handle events that happen on the MainPage, and also help set up the page.

Now that you have seen the xaml and C# code. I will explain a bit on what is going on. In the C# code you see the line DataContext = App.ViewModel and then the code in the MainPage_Loaded function. That code is taking data from the ViewModel. Which is in the ViewModels folder(You can check it out in the solution explorer folder.) This is used to seperate data from the UI, I will get more into this into a later post.

But now let us run the app. In the toolbar you should see a green play arrow and a drop down list with Windows Phone Emulator in it.

Make sure the Windows Phone Emulator is selected and click the green play button. Then the emulator should open up and then the app will start.

You can play around with the app right now. Swipe left and right, scroll up and down. Try and select an item in the list of data shown. When you are done, in VS click on debug then Stop Debugging. This will stop your app from running.

You just ran your first Windows Phone 7 app! In my next post I will actually demenstrate how to add code and what it should do. For now just take some time and look around the files in the solution and try to figure out what it is doing. If you have any questions please ask.

Thank you and check back soon for my next post!

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


Published at DZone with permission of Andrew Conlisk, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}