UWP: Understanding AppBar and Command Bar
Introduction
In this article we will discuss how we can understand the AppBar and Command Bar in UWP. We can easily implement App Bar and Command Bar with a sample app in UWP. As you all know AppBar, Command Bar is a default classes on Windows.UI.Xaml.Controls package in Windows Runtime APIs. We can use the AppBar only when you are developing universal windows 8 apps in Windows 8. If you are going to develop new apps in Windows 10. It is highly recommend using the CommandBar control instead of AppBar in UWP.
Background
CommandBar is a UI component and its light-weight control that can used in complex content such as images or text blocks as well as simple commands such as AppBarButton, AppBarToggleButton and AppBarSeparator controls. It can be used with any navigation pattern and main three properties such as PrimaryCommands, SecondaryCommands and Content.
How to implement AppBar and CommandBar and run UWP App
We are going to discuss how to implement AppBar and CommandBar with a sample apps on UWP and show the demo in multiple device. 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 a installed template like “ Universal” under the Windows 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.
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar1.png
Now, you can see the UWPHelloWorld project structure as in the following screen shot
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar2.png
Step 2
As you all know, we have discussed project folder structure and files on my previous article at earlier.
Step 3
As you all know, we have toolbox available on visual studio in that which is available on CommandBar control in the below screen shots
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar3.png
Now, you can see the auto generated code as below
01.<Page.BottomAppBar>
02. <CommandBar>
03. <CommandBar.Content>
04. <Grid/>
05. </CommandBar.Content>
06. <AppBarButton Icon="Accept" Label="appbarbutton"/>
07. <AppBarButton Icon="Cancel" Label="appbarbutton"/>
08. </CommandBar>
09. </Page.BottomAppBar>
Home.xaml
01.<Page
02. x:Class="UWPCommandBar.MainPage"
03. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05. xmlns:local="using:UWPCommandBar"
06. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08. mc:Ignorable="d">
09. <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
01.using System;
02.using Windows.UI.Xaml;
03.using Windows.UI.Xaml.Controls;
04.// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 ;
05.namespace UWPCommandBar
06.{
07. /// <summary>
08. /// An empty page that can be used on its own or navigated to within a Frame.
09. /// </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 can run the UWPCommandBar Apps with the different devices, you can see how an apps looks, as shown below:
Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar4.png
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar5.png
How to Customize the CommandBar in UWP
We can easily customize the UI/UX based on your requirements in UWP. I have used in AppBarSeparator for the UI looks pretty in the sample universal windows apps.
Step 1
01.<Page.TopAppBar>
02. <CommandBar ClosedDisplayMode="Minimal" Background="#1FA2E1"></CommandBar>
03. </Page.TopAppBar>
04. <Page.BottomAppBar>
05. <CommandBar ClosedDisplayMode="Compact" Background="#1FA2E1">
06. <CommandBar.PrimaryCommands>
07. <AppBarButton Name="home" Icon="Home" Label="Home" Click="AppHome_Click"/>
08. <AppBarSeparator/>
09. <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 the different devices, you can see how an appslooks, as shown below:
Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar7.png
Select a Debug and Local Machine option to run the apps
http://www.san2debug.net/image.axd?picture=%2f2016%2f06%2fUWPCommandBar8.png
Reference
Originally posted here.