Beginning Windows Phone 7 Development - Part 2

Developing your first Windows Phone App

In this part, we will start off with developing a very simple, but fully functioning, Silverlight application for Windows Phone. After you are done with creating the application, it will allow you to browse the Internet from within the application.

Start by creating a new Silverlight for Windows Phone Application project as described in Part 1 of the blog series.

Open the MainPage.xaml file in design view so that you can see the default phone page created. On this screen you will add the following controls to interact with:

A TextBox to type in the URL of the website you want to browse.
A Button that you can click to send the navigate command to the WebBrowser object
A WebBrowser where you will see the website.

Tip: If you want to use your application in, both, Portrait and Landscape modes. you will need to change the SupportedOrientation property of the PhoneApplicationPage to PortraitOrLandscape. To do this, select the first line in the MainPage.xaml file so that PhoneApplicationPage properties are shown in the properties window and then change the SupportedOrientation property to support both Portrait and Landscape modes.

You will also need to modify the following properties on the objects you placed on the designer in order to support both portrait and landscape modes.

For the TextBox, set the Height and Width properties to Auto by typing the word Auto in the property value. Set the HorizontalAlignment property to Stretch and set the Vertical Alignment property to Top. Use the mouse to reposition your control relative to the margin so there is room for the Go button. Set the name of the TextBox to txtURL and the Text property to http://www.att.com

For the button, set the HorizontalAlignment property to Right and set the Vertical Alignment property to Top. For the Height and Width properties, type of value of Auto to automatically adjust the size of the button. Set the Content property of the button to 'Go' and the name to btnGo.

For the WebBrowser control, set the Height and Width properties to Auto. Set the HorizontalAlignment and Vertical Alignment properties to Stretch.  Set the name of the WebBrowser control to wbBrowser.

After setting all these properties, your designer should look like figure 1.

 

Figure 1

Now, we need to setup the event handler for the Go button. You can do this by double-clicking on the Go button in the designer. This will open the code-behind file (MainPage.xaml.cs) and you will see a new method in there like shown in figure 2.

 

Figure 2

Double clicking the Go button also updates the markup for MainPage.xaml - you will notice a new attribute added to the button object. It should look something like Click="btnGo_Click"

To add the functionality which navigates the user to the URL provided we add the following line to the event handler just created:

wbBrowser.Navigate(new Uri(txtURL.Text));

Now you are ready to test your first Windows Phone Application. Build the solution using the Build menu and then start debugging either by selecting the Start Debugging option from the Debug menu or by pressing  F5.

Note: Before you can actually browse to a website from within your application, make sure that your development computer has Internet access.

Once the application is loaded, type in a URL in the TextBox and click the Go button to see the website in the WebBrowser control. It might take a few seconds for the website to load.

Tip: Script is disabled in the WebBrowser control by default unless you set the IsScriptEnabled property to true in your application. To enable script, add the following to the button event handler that we added earlier: wbBrowser.IsScriptEnabled = true;

Note: The website URLs typed in will have to start with http:// otherwise you will receive an exception saying "System.UriFormatException was unhandled. Invalid URI: The format of the URI could not be determined" and your application will crash.

If you are using the emulator window to run your application, click the text box to give it focus. This
will cause the Software Input Panel (SIP) to open automatically. You can type a message using the software keyboard or press the PAUSE/BREAK key to use your desktop keyboard instead. The need to press the PAUSE/BREAK key is a known issue and will be fixed in future releases.

Since we set the application to work in both Portrait and Landscape modes, press one of the rotation controls on the emulator as shown in figure 3.

 

Figure 3

The emulator will rotate into Landscape mode. The controls will resize themselves to fit the Landscape screen format.


Note: The controls on the screen do not rotate when the desktop keyboard is enabled. Press PAUSE/BREAK key to set the input to the Software Input Panel and all the controls will be displayed properly in Landscape format.

You can use your mouse to double-click on the website in order to pan and zoom in the browser window.

Congratulations, you have just built your first Windows Phone Application!


Links to other parts in this series are provided below.

Part 1 - Understanding the development environment