Development of Windows 8.1 applications on XAML / С #. Part 3. Toolbars

Windows 8.1 offers the developer new features for creating toolbars in applications. We will consider these features and create a navigation bar and action bar for the application from the previous article .



Toolbars (AppBar) in applications can be placed at the top and bottom of the screen. A classic example of this is the Windows Store.







The top navigation bar contains a list of categories and serves to navigate through the application.

The bottom panel contains actions that are relevant to this particular page or selected item.

')

We will not delve into the theory and try to just add panels to the application.

Application Navigation Bar (TopAppBar)

Simple navigation

Let's create a navigation bar that will be located at the top of the application screen and contain two buttons:

• Go back to the main page;
• Go to the shopping basket.

Let's start the implementation:

1. Open the application from the previous article in Visual Studio 2012 or create a new one.

2. In Solution Explorer, open the main HubPage.xaml application screen and add the following code inside the Page tag:

<Page.TopAppBar> <AppBar> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Label=" " Click="HomeAppBarButton_Click" /> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" /> </Grid> </AppBar> </Page.TopAppBar> 

Our panel contains a table and two buttons AppBarButton . AppBarButton is a button heir created for toolbars.

For example, this button has the ability to select, as an icon, a beautiful icon from the standard set :







AppBarButton allows you to use not only ready-made icons or those drawn by you, but also to make your own unique style using fonts or by drawing an icon with dots.



3. Add the following code for the Home button to the main screen to the HomeAppBarButton_Click event handler:

 private void HomeAppBarButton_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(HubPage)); } 

4. Run the application.

5. The result of his work, you can see in the picture.







By default, the navigation bar is in a minimized state and you will not see it. To see it, you need:

• Right-click anywhere on the screen (if you use the mouse).
• Swipe down from top to bottom (if you are using a touch device).

Section Navigation

In fact, you do not need to use only AppBarButton and you can use any other controls on the toolbar.



Now we will change the page code and organize the navigation through the sections of the catalog of goods.



Let's start the implementation:

1. In Solution Explorer, open the HubPage.xaml main screen and replace the contents of the Page.TopAppBar tag:

 <Page.TopAppBar> <AppBar> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="350" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" > <Grid Background="#3D3D3D" > <Grid.ColumnDefinitions> <ColumnDefinition Width="90" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Click="HomeAppBarButton_Click" Margin="0,15,0,0" /> <HyperlinkButton x:Name="CategoryButton" Grid.Column="1" Content=" " Click="HomeAppBarButton_Click" Foreground="White" /> </Grid> <GridView x:Name="NavigationGridView" ItemsSource="{Binding NavigationItems}" Background="#616161" BorderBrush="#3D3D3D" BorderThickness="0,1,0,0"> <GridView.ItemTemplate> <DataTemplate> <HyperlinkButton x:Name="NavigationItem" Content="{Binding Title}" Click="NavigationItem_Click" CommandParameter="{Binding UniqueId}" Margin="90,0,26,0" Foreground="White" /> </DataTemplate> </GridView.ItemTemplate> </GridView> </StackPanel> <AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="" Click="ShoppingCartAppBarButton_Click" HorizontalAlignment="Right" /> </Grid> </AppBar> </Page.TopAppBar> 

The page now has a GridView table that displays links from a data source. Fill the data source and navigate through the category pages.



2. In Solution Explorer, open the HubPage.xaml.cs file and add the code to the top of the navigationHelper_LoadState method to get the product catalog sections and populate the data source:

 private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e) { var sampleNavigation = await SampleDataSource.GetGroupsAsync(); this.DefaultViewModel["NavigationItems"] = sampleNavigation; //… } 

3. In the HubPage.xaml.cs file , find the automatically generated method NavigationItem_Click and replace it with the following code:

 private void NavigationItem_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(SectionPage), (sender as HyperlinkButton).CommandParameter); } 

4. Launch the application and open the toolbar.







As you can see, now on the toolbar is a table that displays links from a data source and navigates through sections.

Application Action Bar (BottomAppBar)

Now we will add an action bar for the application. It will be at the bottom of the screen and contain several buttons:

• Add to Cart;
• Remove from basket;
• Settings;
• Add to favorites;
• Secure to the tile.

Let's start the implementation:

1. In Solution Explorer, open the HubPage.xaml file.

2. Add to the bottom of the page, inside the Page tag the following code:

 <Page.BottomAppBar > <CommandBar > <CommandBar.PrimaryCommands> <AppBarButton x:Name="AddAppBarButton" IsCompact="True" Label=" " Icon="Add" /> <AppBarButton x:Name="DeleteAppBarButton" IsCompact="True" Label="" Icon="Delete" /> <AppBarSeparator IsCompact="True" /> <AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="" Icon="Setting" /> </CommandBar.PrimaryCommands> <CommandBar.SecondaryCommands> <AppBarToggleButton x:Name="FavoriteAppBarButton" IsCompact="True" Label="" Checked="FavoriteAppBarButton_Checked" Unchecked="FavoriteAppBarButton_Unchecked"> <AppBarToggleButton.Icon> <SymbolIcon Symbol="Favorite" /> </AppBarToggleButton.Icon> </AppBarToggleButton> <AppBarButton x:Name="PinAppBarButton" IsCompact="True" Label="  " Icon="Pin" /> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar> 

We use the CommandBar as a container to add buttons.



We have the main and most important actions - adding a product to the basket and removing it from the basket, as well as there are additional actions, such as adding a product to your favorites.



We add important actions to the PrimaryCommands section - they will be displayed on the right side of the panel.

Secondary actions - in the SecondaryCommands section - they will be displayed in the left part of the panel.



Actions can be logically separated by an AppBarSeparator separator.



In addition to the usual buttons, you can use buttons that have two AppBarToggleButton states, for example, for the case of adding and removing from favorites.



The IsCompact property, which we have specified for all elements, allows you to hide the superfluous if it does not fit on the screen, for example, the captions for the buttons will be hidden at low resolution.



3. Run the application.

4. Right-click anywhere or on any item.

In addition to the top navigation bar, the action panel will appear on the screen.







5. Reduce the window with the application and see how the panel goes into compact mode.







6. Click on the "Favorites" button and she will remember her status.

Conclusion

That's all for today. We got acquainted with new opportunities for creating toolbars, as well as learned how to implement navigation panels and action bars for applications using various standard controls.



In the following articles, we will continue to comprehend the development of Windows 8.1 applications with simple examples.



Download the resulting application on SkyDrive at the link: http://sdrv.ms/1hJIudI

Useful materials

AppBar Controls

Standard AppBar Icon Set

Quick Start: Adding Application Panel Buttons