Partager via


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. ![](images/Dn631252.wpapp1_withtitle(en-us,WIN.10).png)
  1. 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.
  1. 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. ![](images/Dn631252.wpapp1_withcontrols(en-us,WIN.10).png)
  1. 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.