Chapter Six: Navigation, layout, and views

Navigation, layout, and views (Windows) are the important terms an app developer must know before starting development so here we are providing you basics of all these with the motto of happy learning :)

 UI design includes the organization of pages in the app, the navigation between pages, and the layout of content and commands on each page.

Learn how to:

• Add pages and navigation
• Arrange controls and content on a page
• Adapt the page layout to different orientations and views

Step 1: Add pages and navigation

we go over the basics of creating a user interface in Extensible Application Markup Language (XAML). Add the photo viewer page

To add a page to an app

Select Project>Add New Item. The Add New Item dialog box opens.

Under Visual C# or Visual Basic in the left pane, pick the Windows Store template type.

In the center pane, pick Basic Page.

Enter "PhotoPage.xaml" as the name for the page.

Click Add. The XAML and code behind files for your page are added to the project.

Here's the Add New Item dialog.

To change the page title, select the "My Application" text near the top of PhotoPage.xaml.

Make sure the TextBlock named pageTitle is showing in the Properties panel and the Properties view () is selected.

Under Common in the Properties panel, click the property marker for the Text property. The property menu opens.

Note  Theproperty marker is the small box symbol to the right of each property value. The Text property marker is green to indicate that it's set to a resource.

In the property menu, select Edit Resource. The Edit Resource dialog opens.

In the Edit Resource dialog, change the value from "My Application" to "Hello, photo!".

Click OK.

XAML

<x:Stringx:Key="AppName">Hello, photo!<x:String>

Add navigation

The XAML UI framework provides a built-in navigation model that uses Frames and Pages and works much like the navigation in a web browser. The Frame control hosts Pages, and has a navigation history that you can use to go forward and back through pages you've visited. You can also pass data between pages as you navigate.

you add a command to MainPage to navigate to new page in the same way.

In Solution Explorer, double-click MainPage.xaml to open it.

In the XAML editor, find the StackPanel that contains the greetingOutputTextBlock. Immediately after the greetingOutputTextBlock, add a Button element, like this:

XAML

<Buttonx:Name="photoPageButton" Content="Go to photo page">

Here's the button you added with the surrounding XAML.

XAML

<StackPanelGrid.Row="1" Margin="120,30,0,0">

<TextBlockText="What's your name?" Style="{StaticResourceBasicTextStyle}">

<StackPanelOrientation="Horizontal" Margin="0,20,0,20">

<TextBoxx:Name="nameInput" Width="300" HorizontalAlignment="Left"

TextChanged="NameInput_TextChanged">

<ButtonContent="Say &quot;Hello&quot;" Click="Button_Click">

<StackPanel>

<TextBlockx:Name="greetingOutput" Style="{StaticResourceBigGreenTextStyle}">

<Buttonx:Name="photoPageButton" Content="Go to photo page">

<StackPanel>

In the XAML editor or design view, select the "Go to photo page" Button that you added to MainPage.xaml.

In the Properties panel, click the Events button ().

Find the Click event at the top of the event list. In the text box for the event, type "PhotoPageButton_Click" as the name of the function that handles the Click event.

C#,VB

 Add this code.

if (this.Frame != null)

{

this.Frame.Navigate(typeof(PhotoPage));

  }

Press F5 to build and run the app.

You don't need to add a back button to the photo page. The photo page is based on the LayoutAwarePage class, which has built-in support for navigation.

Step 2: Adapt the page layout to different orientations and views

In the landscape orientation, it must support Full Screen, Filled, and Snapped layouts. Here, we see how you can make your app look good in any resolution or orientation.

Use different views in Visual Studio

We need to also use the Display options to see how the UI looks at different screen resolutions. A fluid layout adapts to look good on different screens.

To use different views in Visual Studio

In the Device panel, click the filled () view button. The designer changes to simulate the filled view.

In the Device panel, click the snapped () button. The designer changes to simulate the snapped view.

In the Device panel, click the portrait () button. The designer changes to simulate the portrait view.

This is what the app looks like when the user rotates it to portrait orientation. This view is also too narrow. You need to make some adjustments similar to those you make for the snapped view.

Adjust the snapped view

You start by making some changes to the snapped view.

To adjust the snapped view

In the Device panel, click the snapped () button to show the snapped view.

Check the Enable state recording checkbox.

When you enable state recording, changes to the layout are applied only to the current visual state, and the changes are made in the VisualStateManager section of the XAML. Select the "contentGrid" Grid control.

Under Layout, set the grid's left Margin to "20".

Set the grid's bottom Margin to "20".

Select the "imagePanel" StackPanel.

Under Layout in the Properties panel, set the panel's Orientation property to Vertical.

The app now looks like this in snapped view.

Adjust the portrait view

Now, let's fix the portrait view.

To adjust the portrait view

In the Device panel, click the portrait () button to show the portrait view.

Check the Enable state recording checkbox.

Select the "imagePanel" StackPanel.

Under Layout in the Properties panel, set the panel's Orientation property to Vertical.

Set the panel's right Margin property to "20".

The app now looks like this in portrait orientation.

To test the app in different orientations, views, and resolutions, you can use the simulator in Visual Studio.

By:

Khushbu Wadhwani,

Senior Windows app developer,

References:MSDN,Microsoft developer forum