Post
Ask Question

Understanding AppBar And CommandBar In UWP

We can easily implement AppBar and CommandBar with a sample app in UWP.  CommandBar is a defualt class on the Windows.UI.Xaml.Controls package in Windows Runtime APIs. We can use the AppBar only when developing Universal Windows 8 apps in Windows 8. If you are going to develop new apps in Windows 10, it is highly recommended to use the CommandBar control instead of the App Bar in UWP.

Universal Windows Platform series.

Background

CommandBar is a UI component and its light-weight control can used in complex content such as images or text blocks as well as simple content such as AppBarButton, AppBarToggleButton and AppBarSeparator controls. It can be used with any navigation pattern and has three main properties: PrimaryCommands, SecondaryCommands and Content.

How to implement AppBar and CommandBar and run UWP App

We are going to discuss how to implement AppBar and CommadBar with a sample app on UWP and show the demo in multiple devices. We will see the step by step guidelines for the UWP AppBar and CommandBar app creation here.

Step 1

Open Visual Studio 2015. Go to file menu, point to new and then click new project. New Project window will open, you can select an installed template like “ Universal” under the Window on Visual C# Template, and then select a Blank App (Universal Windows) and type Project Name UWPCommandBar. Choose the project location path and then click on the OK button.

 
 
Now, you can see the UWPHelloWorld project structure as in the following screen shot.
 
    
 

Step 2

As you all know, we have discussed project folder structure and files in my previous article:

Step 3

As you all know, we have toolbox available on Visual Studio which is available on CommandBar control as in the below screen shot:

 
 
Now, you can see the auto generated code as below  
  1. <Page.BottomAppBar>  
  2.         <CommandBar>  
  3.             <CommandBar.Content>  
  4.                 <Grid/>  
  5.             </CommandBar.Content>  
  6.             <AppBarButton Icon="Accept" Label="appbarbutton"/>  
  7.             <AppBarButton Icon="Cancel" Label="appbarbutton"/>  
  8.         </CommandBar>  
  9.  </Page.BottomAppBar>  

Home.xaml

  1. <Page  
  2.     x:Class="UWPCommandBar.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:UWPCommandBar"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d">  
  9.     <Page.BottomAppBar>  
  10.         <CommandBar ClosedDisplayMode="Compact">  
  11.             <CommandBar.PrimaryCommands>  
  12.                 <AppBarButton Name="home" Icon="Home" Label="Home" Click="AppHome_Click"/>                  
  13.                 <AppBarButton Name="admin" Icon="Admin" Label="Admin" Click="AppAdmin_Click"/>  
  14.                 <AppBarButton Name="contact" Icon="Contact" Label="Contact" Click="AppContact_Click"/>  
  15.             </CommandBar.PrimaryCommands>  
  16.             <CommandBar.SecondaryCommands>  
  17.                 <AppBarButton Name="setting" Icon="Setting" Label="Setting"/>  
  18.             </CommandBar.SecondaryCommands>  
  19.         </CommandBar>  
  20.     </Page.BottomAppBar>  
  21.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  22.         <StackPanel>  
  23.             <TextBlock Text="Home" Padding="25 25 25 25"></TextBlock>  
  24.         </StackPanel>  
  25.     </Grid>  
  26. </Page>  

Home.xaml.cs

  1. using System;  
  2. using Windows.UI.Xaml;  
  3. using Windows.UI.Xaml.Controls;  
  4. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409   
  5. namespace UWPCommandBar  
  6. {  
  7.     /// <summary>  
  8.     /// An empty page that can be used on its own or navigated to within a Frame.  
  9.     /// </summary>  
  10.     public sealed partial class MainPage : Page  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             this.InitializeComponent();  
  15.         }  
  16.   
  17.         private void AppHome_Click(object sender, RoutedEventArgs e)  
  18.         {  
  19.             Frame.Navigate(typeof(MainPage));  
  20.         }  
  21.   
  22.         private void AppAdmin_Click(object sender, RoutedEventArgs e)  
  23.         {  
  24.             Frame.Navigate(typeof(About));  
  25.         }  
  26.   
  27.         private void AppContact_Click(object sender, RoutedEventArgs e)  
  28.         {  
  29.             Frame.Navigate(typeof(Contact));  
  30.         }  
  31.     }  
  32. }  

Step 4

Now, if you run the UWPCommandBar Apps with different devices, you can see how an app looks, as shown below:

Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps

 
 
 

How to Customize the CommandBar in UWP

We can easily customize the UI/UX based on your requirements in UWP. I have used AppBarSeparator for the UI and it looks pretty in the sample Universal Windows apps.

Step 1

  1. <Page.TopAppBar>  
  2.         <CommandBar ClosedDisplayMode="Minimal" Background="#1FA2E1"></CommandBar>  
  3.     </Page.TopAppBar>  
  4.     <Page.BottomAppBar>  
  5.         <CommandBar ClosedDisplayMode="Compact" Background="#1FA2E1">  
  6.             <CommandBar.PrimaryCommands>  
  7.                 <AppBarButton Name="home" Icon="Home" Label="Home" Click="AppHome_Click"/>  
  8.                 <AppBarSeparator/>  
  9.                 <AppBarButton Name="admin" Icon="Admin" Label="Admin" Click="AppAdmin_Click"/>  
  10.                 <AppBarSeparator/>  
  11.                 <AppBarButton Name="contact" Icon="Contact" Label="Contact" Click="AppContact_Click"/>  
  12.                 <AppBarSeparator/>  
  13.             </CommandBar.PrimaryCommands>  
  14.             <CommandBar.SecondaryCommands>  
  15.                 <AppBarButton Name="setting" Icon="Setting" Label="Setting"/>  
  16.             </CommandBar.SecondaryCommands>  
  17.         </CommandBar>  
  18.     </Page.BottomAppBar>  

Step 2

Now, if you can run the UWPCommandBar Apps with  different devices, you can see how an app looks, as shown below:

Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps

 
 
 
 
Select a Debug and Local Machine option to run the apps.
 
  

Note

You can also read this article in my blog here.

Conclusion

I hope you understood CommendBar, AppBar, Customize UI, and how to run it on multiple devices. I have covered all the requirements. If you find anything that I missed in this article, please let me know. Please share your valuable feedback or suggestions.


Similar Articles