Part 2: Lay out the user interface
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
- 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.
- Add a title for the app.
- 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.

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

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

- 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.
- Add a text box for the URL.
- 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.
- In the Properties window, change the following properties for the new text box.
Property Category Value Name n/a URL Text Common http://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.
- Add the Go button.
- 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.
- 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.

- Add the WebView control.
- 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.
- 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="http://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.