Windows Phone Dev Center - How to create your first app for Windows Phone

 

How to create your first app for Windows Phone

            468 out of 524 rated this helpful - Rate this topic                         

 

April 05, 2013

 

Applies to: Windows Phone 8 | Windows Phone OS 7.1

   

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
• Create the project
• Create the UI
• Add the code
• Run your app
• What’s next?

 

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.

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 APPLICATION TextBlock 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 name TextBlock 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	http://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.

7. 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.

8. 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.

   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.

XAML

Copy

<!--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="http://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.

   C#

   VB

   Copy

   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)
           {
   
           }
       }
   }
   

   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.

   XAML

   Copy

       <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.

   C#

   VB

   Copy

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

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.

   • System requirements for Windows Phone Emulator

   • How to enable Hyper-V for the Windows Phone Emulator

   • Troubleshooting the Windows Phone 8 Emulator

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.

Register your phone

Register your phone so that you can install, run, and debug apps on the phone.

How to register your phone for development

Download other sample apps

Pick from a large number of samples to learn how specific controls, features, and types of apps work.

Samples gallery on Windows Phone Dev Center

Take another look at the Getting Started checklist

Know what you can do with the SDK and find guidance for building great apps.

Getting started with developing for Windows Phone