Develop a Browser App for Windows Phone 7

I personally have had a resistance toward developing applications for Windows Phone. However some days ago I started playing around with it and I can honestly say that it did not disappoint me at all. There is a high chance that you do not like the user experience which Windows Phone 7 provides, however I can tell you coding for Windows Phone 7 is really nice, easy and fun!

Prerequisites

It is assumed that you already have installed the following components:

• Visual Studio 2010 for Windows Phone
• .NET Framework 4
• Windows Phone SDK 7.1

1. Create Your First Windows App Project

Open your visual studio, click on "New Project" and inside the Installed Templates section, choose your preferred language (This tutorial covers C# template).

A pop-up window then asks for the Target Windows Phone OS version which should be set to Windows Phone OS 7.1.

The template will create a MainPage.xaml file. Double-click on the file, and what you see resembles to the following picture:

2. Add UI Elements

Now browse to the MainPage.xaml file and  find the part of XAML file which defines StackPanel element:

You can see that it contains two TextBlocks where you can see the application name and page title. In the first TextBlock, change the Text property to "A Windows Phone App" and in the second one to "Mini Browser". As you can see, the changes affect the UI in the Preview panel.

Next, we need to add a TextBox (which user will put the website address), a Button and a Browser element.  For this, inside the MainPage.xaml, find the ContentPanel Grid :

Now, we need to open the Grid element and insert those elements inside the ContentPanel Grid element with the following lines of code:

3. Add Button Event Handler

In the preview panel, double click on the Go button. You will be directed inside the MainPage.xaml.cs file:

public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Go_Click(object sender, RoutedEventArgs e)
        {
        }
    }

When the Go button is clicked, the browser navigates to the URL and the result will be shown inside the webbrowser element. For this, we add the following code inside the Go_Click button:

 
string HTTP = "http://";
string website = HTTP + URL.Text;
MiniBrowser.Navigate(new Uri(website, UriKind.Absolute));

Save all the modifications.


4. Run the application

Select the Windows Phone Emulator for the debugging in your toolbar:

Yes, the application is up and running. You should that it is working correctly both in Portrait  mode:

and also Landscape mode: