Part 2: Lay out the user interface

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

In this step, lay out the controls for the simple user interface of your app.

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

2. Add a title for the app.

   1. From the Common XAML Controls group in the Toolbox, add a TextBlock control to the designer surface by dragging it from the Toolbox and dropping it onto the designer surface. Place the TextBlock at the top of the available space. Use the mouse to size the control to the width of the page.

      

   2. 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. If the TextBlock is still selected, the properties of the TextBlock are displayed in the Properties window.

      

   3. In the Properties window, change the following properties for the new TextBlock.

Property	Category	Value
Text	Common	Mini Browser
Height	Layout	Auto
Width	Layout	Auto
HorizontalAlignment	Layout	Stretch
Font size	Text	48 px

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

3. Add a text box for the URL.

   1. From the Common XAML 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, change the following properties for the new text box.

Property	Category	Value
Name	n/a	URL
Text	Common	https://windows.microsoft.com /
Height	Layout	Auto
Width	Layout	Auto
HorizontalAlignment	Layout	Stretch
TextWrapping	Text	NoWrap

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

4. Add the Go button.

   1. Resize the text box to make room for the Go button. Then, from the Common XAML 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 fit the available space.

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

Property	Category	Value
Name	n/a	Go
Content	Common	Go
Height	Layout	Auto
Width	Layout	Auto
HorizontalAlignment	Layout	Right

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

5. Add the WebView control.

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

   2. In the Properties window, set the following properties for the new WebView 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 in your MainPage.xaml file.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/>
        <TextBox x:Name="URL" Margin="10,95,124,0" Text="https://windows.microsoft.com/" VerticalAlignment="Top"/>
        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,85,10,0" VerticalAlignment="Top" Width="109"/>
        <WebView x:Name="MiniBrowser" Margin="10,150,10,10"/>
    </Grid>

Summary

Congratulations, you're done with the second step of building your first Windows Phone Store app! You learned how to lay out the controls for the user interface of your app.

Next step

In the next step of this tutorial, you learn how to add code to take action when the user interacts with your app. Go to Part 3: Add the code.