Share via

How to create your first app for Windows Phone 8

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

This topic provides step-by-step instructions to help you create your first app for Windows Phone. You’re going to create a basic web browser. This simple app lets the user enter a URL, and then loads the web page when the user clicks the Go button.

You can download the complete Mini-browser Sample in C# or in Visual Basic.NET.

This topic contains the following sections.

 

Before you start

This walkthrough assumes that you’re going to test your app in the emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see How to register your phone for development for Windows Phone 8.

The steps in this topic assume that you’re using Visual Studio Express 2012 for Windows Phone. You may see some variations in window layouts or menu commands if you’re using Visual Studio 2012 Professional or higher, or if you’ve already customized the layout or menus in Visual Studio.

Create the project

The first step in creating a Windows Phone app is to create a new project in Visual Studio.

To create the project

  1. Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.

  2. Launch Visual Studio from the Windows Start screen. If the Registration window appears, you can register the product, or you can temporarily dismiss the prompt.

  3. Create a new project by selecting the FILE | New Project menu command.

  4. In the New Project window, expand the installed Visual C# or Visual Basic templates, and then select the Windows Phone templates.

  5. In the list of Windows Phone templates, select the **Windows Phone App ** template.

  6. At the bottom of the New Project window, type MiniBrowser as the project’s Name.

  7. Click OK. In the New Windows Phone Application dialog box, select Windows Phone OS 8.0 for the Target Windows Phone OS Version.

    • When you select Windows Phone OS 8.0 as the target version, your app can only run on Windows Phone 8 devices.

    • When you select Windows Phone OS 7.1, your app can run on both Windows Phone OS 7.1 and Windows Phone 8 devices.

  8. Click OK. The new project is created, and opens in Visual Studio. The designer displays MainPage.xaml, which contains the user interface for your app. The main Visual Studio window contains the following items:

    • The middle pane contains the XAML markup that defines the user interface for the page.

    • The left pane contains a skin that shows the output of the XAML markup.

    • The right pane includes Solution Explorer, which lists the files in the project.

    • The associated code-behind page, MainPage.xaml.cs or MainPage.xaml.vb, which contains the code to handle user interaction with the page, is not opened or displayed by default.

Create the UI

The next step is to lay out the controls that make up the UI of the app using the Visual Studio designer. After you add the controls, the final layout will look similar to the following screenshot.

To create the UI

  1. Open the Properties window in Visual Studio, if it’s not already open, by selecting the VIEW | Properties Window menu command. The Properties window opens in the lower right corner of the Visual Studio window.

  2. Change the app title.

    1. In the Visual Studio designer, click to select the MY APPLICATIONTextBlock control. The properties of the control are displayed in the Properties window.

    2. In the Text property, change the name to MY FIRST APPLICATION to rename the app window title. If the properties are grouped by category in the Properties window, you can find Text in the Common category.

  3. Change the name of the page.

    1. In the designer, click to select the page nameTextBlock control.

    2. Change the Text property to Mini Browser to rename the app’s main page.

  4. Change the supported orientations.

    1. In the XAML code window, click the first line of the XAML code. The properties of the PhoneApplicationPage are displayed in the Properties window.

    2. Change the SupportedOrientations property to PortraitOrLandscape to add support for both portrait and landscape orientations. If the properties are grouped by category in the Properties window, you can find SupportedOrientations in the Common category.

  5. Open the Toolbox in Visual Studio, if it’s not already open, by selecting the VIEW | Toolbox menu command. The Toolbox typically opens on the left side of the Visual Studio window and displays the list of available controls for building the user interface. By default the Toolbox is collapsed when you’re not using it.

  6. Add a textbox for the URL.

    1. From the Common Windows Phone Controls group in the Toolbox, add a TextBox control to the designer surface by dragging it from the Toolbox and dropping it onto the designer surface. Place the TextBox just below the Mini Browser text. Use the mouse to size the control to the approximate width shown in the layout image above. Leave room on the right for the Go button.

    2. In the Properties window, set the following properties for the new text box.

Property

Value

Name

URL

Text

https://www.xbox.com

TextWrapping

NoWrap

Height

Auto

Width

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Top
With these settings, the control can size and position itself correctly in both portrait and landscape modes.

  1. Add the Go button.

    1. Resize the text box to make room for the Go button. Then, from the Common Windows Phone Controls group in the Toolbox, add a Button control by dragging and dropping it. Place it to the right of the text box you just added. Size the button to the approximate width shown in the preceding image.

    2. In the Properties window, set the following properties for the new button.

Property

Value

Name

Go

Content

Go

Height

Auto

Width

Auto

HorizontalAlignment

Right

VerticalAlignment

Top
With these settings, the control can size and position itself correctly in both portrait and landscape modes.

  1. Add the WebBrowser control.

    1. From the All Windows Phone Controls group in the Toolbox, add a WebBrowser control to your app by dragging and dropping it. Place it below the two controls you added in the previous steps. Use your mouse to size the control to fill the remaining space.

      If you want to learn more about the WebBrowser control, see WebBrowser control for Windows Phone 8.

    2. In the Properties window, set the following properties for the new WebBrowser control.

Property

Value

Name

MiniBrowser

Height

Auto

Width

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch
With these settings, the control can size and position itself correctly in both Portrait and Landscape modes.

Your layout is now complete. In the XAML code in MainPage.xaml, look for the grid that contains your controls. It will look similar to the following. If you want the layout exactly as shown in the preceding illustration, copy the following XAML and paste it to replace the grid layout in your MainPage.xaml file.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="https://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

Add the code

The final step before testing your app is to add the code that implements the Go button.

To add the code

  1. In the designer, double-click the Go button control that you added to create an empty event handler for the button’s Click event. You will see the empty event handler in a page of C# code on the MainPage.xaml.cs tab, or in a page of Visual Basic code on the MainPage.xaml.vb tab.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using MiniBrowser.Resources;

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

        private void Go_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

    Imports System
Imports System.Threading
Imports System.Windows.Controls
Imports Microsoft.Phone.Controls
Imports Microsoft.Phone.Shell

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()

    End Sub

    Private Sub Go_Click(sender As Object, e As RoutedEventArgs) Handles Go.Click

    End Sub

End Class

    When you double-click the Go button, Visual Studio also updates the XAML in MainPage.xaml to connect the button’s Click event to the Go_Click event handler.

        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>

  2. In MainPage.xaml.cs or MainPage.xaml.vb, add the highlighted lines of code to the empty Go_Click event handler. This code takes the URL that the user enters in the text box and navigates to that URL in the MiniBrowser control.

    private void Go_Click(object sender, RoutedEventArgs e)
{
    string site = URL.Text;
    MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
}

    Private Sub Go_Click(sender As Object, e As RoutedEventArgs) Handles Go.Click

    Dim site As String = URL.Text
    MiniBrowser.Navigate(New Uri(site, UriKind.Absolute))

End Sub

Run your app

Now you’ve finished your first Windows Phone app! Next you’ll build, run, and debug the app.

Before you test the app, make sure that your computer has Internet access to be able to test the Web browser control.

To run your app in the emulator

  1. Build the solution by selecting the BUILD | Build Solution menu command.

    If any errors occur, they’re listed in the Error List window. You can open the Error List window, if it’s not already open, by selecting the VIEW | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.

  2. On the Standard toolbar, make sure the deployment target for the app is set to one of the values for the Windows Phone Emulator, for example, Emulator WVGA 512MB.

  3. Run the app by pressing F5 or by selecting the DEBUG | Start Debugging menu command. This opens the emulator window and launches the app. If this is the first time you’re starting the emulator, it might take a few seconds for it to start and launch your app.

    The Windows Phone 8 Emulator has special hardware, software, and configuration requirements. If you have any problems with the emulator, see the following topics.

  4. To test your running app, click the Go button and verify that the browser goes to the specified web site.

  5. To test the app in landscape mode, press one of the rotation controls on the emulator toolbar.

    Or

    The emulator rotates to landscape mode. The controls resize themselves to fit the landscape screen format.

  6. To stop debugging, you can select the DEBUG | Stop Debugging menu command in Visual Studio.

    It’s better to leave the emulator running when you end a debugging session. The next time you run your app, the app starts more quickly because the emulator is already running.

Congratulations! You’ve now successfully completed your first Windows Phone app.

What’s next?

Get started developing for Windows Phone.