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:
