Walkthrough: Creating an app bar test app for Windows Phone

Article
05/20/2016

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

In this walkthrough, you build an app bar test app. The app that you create in this walkthrough enables you to test the different app bar properties, such as opacity, color, and mode. You can also test the app bar on a plain page, a pivot page, and a panorama page.

The user interface of each page of the app contains radio buttons for each of the app bar properties. As you click the radio buttons, the changes are made to the app bar dynamically, enabling you to test the different properties and their interactions with each other. For more information, see App bar for Windows Phone.

Note

A completed version of this app is available as a download. For more information, see Samples gallery on Windows Phone Dev Center.

In this walkthrough, you perform the following tasks.

Create an app bar with four icon buttons and two menu items.
Dynamically change the properties of the app bar.
Create handlers for the app bar click events.
Use the navigation service to navigate between the pages of your app.

The completed app looks like the following.

This topic contains the following sections.

Prerequisites

To complete this walkthrough, you must have the Windows Phone SDK installed. For more information, see Get the SDK.

Creating the app project

First, you create a new Windows Phone app project named AppBarTester. In later steps, you add code to your app that assumes the app name is AppBarTester. If you choose a different name for your app, you must change the namespace references in the code.

To create the app project

In Visual Studio, on the File menu, point to New and then click Project.

The New Project dialog appears.
In the left pane, click Installed Templates, expand Visual C# or Visual Basic, and then click Windows Phone.
In the list of project types, click **Windows Phone App **.
In the Name box, type AppBarTester.
Click OK.

The Windows Phone platform selection dialog box appears.
In the Target Windows Phone Version drop-down list, select Windows Phone OS 8.0 and then click OK.

The new app project is created and opens in Visual Studio.

Setting up the app structure

This app contains a main page that contains links to three secondary pages. The main page is used for navigation only; the three secondary pages are where you test the app bars. In this procedure, you create the main page, add the three secondary pages, and set up the navigation. In later procedures, you add app bars to the secondary pages.

To create the main page

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

In the XAML code, locate the GRID element named LayoutRoot. Replace everything from there to the end of the file with the following code. This creates three links to the secondary pages.

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="App Bar Tester" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <StackPanel Grid.Row="1">
            <TextBlock Text="experiment with an Application Bar on different page types:" Margin="24" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap" />

            <HyperlinkButton Content="a plain page" Name="linkPlainPage" Margin="24" Click="linkPlainPage_Click" />
            <HyperlinkButton Content="a pivot page" Name="linkPivotPage" Margin="24" Click="linkPivotPage_Click" />
            <HyperlinkButton Content="a panorama page" Name="linkPanoramaPage" Margin="24" Click="linkPanoramaPage_Click" />
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

In Solution Explorer, right-click MainPage.xaml and then click View Code to open the code-behind file in the code editor.

In the MainPage class, after the constructor, add the following code. This code creates the click event handlers for the three links. The code in each method navigates to the corresponding page. You create the pages in the next procedure.

private void linkPlainPage_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/PlainPage.xaml", UriKind.Relative));
}

private void linkPivotPage_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative));
}

private void linkPanoramaPage_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative));
}

Private Sub linkPlainPage_Click(sender As Object, e As RoutedEventArgs)

    NavigationService.Navigate(new Uri("/PlainPage.xaml", UriKind.Relative))
End Sub


Private Sub linkPivotPage_Click(sender As Object, e As RoutedEventArgs)

    NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative))
End Sub


Private Sub linkPanoramaPage_Click(sender As Object, e As RoutedEventArgs)

    NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative))
End Sub

To add the secondary pages

In Solution Explorer, right-click the project, point to Add, and then click New Item.

The Add New Item dialog appears.
Select Windows Phone Portrait Page, enter the name PlainPage.xaml, and then click Add.
Repeat step 1, select Windows Phone Pivot Page, enter the name PivotPage.xaml, and then click Add.
Repeat step 1, select Windows Phone Panorama Page, enter the name PanoramaPage.xaml, and then click Add.

Checkpoint 1

In this procedure, you run the app to test the app structure and navigation.

To test the app

On the File menu, click Save All. (Ctrl+Shift+S)
On the Build menu, click Build Solution. (Ctrl+Shift+B)
On the standard toolbar, set the deployment target of the app to Windows Phone Emulator.
On the Debug menu, click Start Debugging. (F5)

The app starts in the emulator, and the main page appears.
Tap the first link and verify that you navigate to the correct page.
Press the Back button to return to the main page.
Test the other two links and verify that they navigate to the correct pages.
On the Debug menu, click Stop Debugging. (F5)

Adding icon button images to your app

In this procedure, you add four image files to your app to use as the app bar button icons. The image files are part of a standard set of icons that is installed with the Windows Phone SDK. For more information, see App bar icon buttons for Windows Phone.

To add icon button images to your app

In Solution Explorer, right-click your project, point to Add, and then click New Folder.
Name the folder Images.
In Solution Explorer, right-click the folder Images, point to Add, and then click Existing Item.

The Add Existing Item dialog appears.
Browse to the following location to locate the standard icons:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\dark
Select all of the following files, and then click Add.
- delete.png
- feature.settings.png
- questionmark.png
- save.png
In Solution Explorer, select all four new files.
In the Properties window, set the following properties for the new files.

Property	Value
Build Action	Content
Copy to Output Directory	Copy if newer

Warning

Build Action must be set to Content to use the icons as button images.

Rename the files according to the information in the following table.

Old name	New name
delete.png	delete.png
feature.settings.png	settings.png
questionmark.png	help.png
save.png	save.png

Next Steps

To continue building this app, complete the procedures in one or more of the following optional topics. You do not need to complete the procedures in order.

Share via