Walkthrough: Creating an Application Bar Test Application for Windows Phone

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 Silverlight for Windows Phone.

In the list of project types, click Windows Phone Application.

In the Name box, type AppBarTester.

Click OK.

The New Windows Phone Application dialog appears.

In the Target Windows Phone Version drop-down list, select Windows Phone 7.1 and then click OK.

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

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));
}

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.

On the File menu, click Save All. (Ctrl+Shift+S)

On the Build (or the Debug menu in Visual Studio 2010 Express for Windows® Phone 7.1), click Build Solution. (Ctrl+Shift+B)

On the standard toolbar, set the deployment target of the application to Windows Phone Emulator.

On the Debug menu, click Start Debugging. (F5)

The application 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)

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 one of the following locations to locate the standard icons:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark

Select all of the following files, and then click Add.

• appbar.delete.rest.png

• appbar.feature.settings.rest.png

• appbar.questionmark.rest.png

• appbar.save.rest.png

In Solution Explorer, select all four new files.

In the Properties window, set the following properties for the new files.

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