I started off the new year with Microsoft D3 Live and Interactive. The talk focused on “Starting Something New” in 2012. I decided to start off the year showing how easy it is to use your existing knowledge of .NET, indeed, even use some of your existing code, to make cool new things for Windows Phone.
In my part I decided to make a simple web page that loaded some data from an XML file and displayed it on the screen.
I started with a very simple page:
I did say simple All the stuff that was done on this page is done in the code behind:
The code behind is calling the following class(es):
That code is used to read this XML:
That little code exercise gives you this output:
Now for the cool part !!!
Now we take that simple site and make a simple phone app in a few short minutes and with ALMOST NO CODE CHANGES!!!
Start by adding a new Windows Phone Application project:
Now your phone Project will look like this:
In ASP.NET the default name for the first page is Default.ASPX, in Windows Phone, it’s MainPage.xaml. this is where we will be doing most of our work (using that term really loosely) today.
To give ourselves somewhere to place our outputted text, we will need to add a TextBlock (label) to the MainPage.xaml and give it a name (I used coolSitesTextBlock):
Now, in order to get the data, we copy the XML file, and the Sites.cs to the Phone app:
Now in the Sites.cs file, we have to make three changes:
- Remove the using System.Web.Hosting; line at the top as it is no longer applicable to this platform.
- Add a reference to System.Xml.Linq to the Windows Phone project to allow the XML code to work.
- Change the namespace in the class from CoolSitesWeb to CoolSitesPhone
- Finally, change the following line:
The reason for this is plain, the XML file is found in a different location on the phone as apposed to the web application.
Now for one of the coolest parts! You can copy the entire loading code from the ASPX page in the ASP.NET page and copy it to the phone, make a few simple changes and you’re done!
Create a simple Loaded event handler on the code behind for the Phone’s MainPage.xaml:
Replace the throw new NotImplementedException(); line with this code from the Default.aspx page’s Page_Load event.
Now make three little changes:
Add a string variable to hold the concatenated text to be desplayed in the coolSitesTextBlock on the MainPage.xaml (I used coolSitesText)
Change the Response.Write line to a line that concatenates your text for you in the foreach loop.
Add a line that sets the coolSitesTextBlock.Text value to your cool sitesText variable.
And last, but not least, change the <br /> for \r\n to add the same formatting you had in the web page on the Phone form.
Your new code should look something like this:
Now, surprisingly, we’re done! Running your new phone app will give you this:
As you can see, it is remarkably easy to port code from other .NET applications to the Phone.
You can get the source code here for both the Web and the Phone sides of this little project so you can see for yourself how easy this is.
Check out the tools and the other cool stuff at the App Hub
Find out how you can get a free phone or XBox (and other cool stuff) by joining the Developer Movement!!!
And keep tuning into Microsoft D3 Live and Interactive for great new shows and lots of other cool stuff!
And most of all:
Now, before you start telling me all the better ways that you can add data to either a Web app or a Phone app, I want to let you know that this is just for demonstration purposes and not necessarily an example of Best Practices or the best way to code either of these two instances.
Other than that, I’d like to hear your suggestions, stories and/or answer your questions about getting started with Windows Phone development, after all, that is why I do this!!!