CommandBar Control in UWP

In the following blog I will show you how to work with CommandBar Control in Universal Windows Apps.

CommandBar represents a specialized app bar that provides layout for AppBarButton and related command elements.

Step 1: Open a blank app and copy the following XAML code into your grid which have corresponding controls.

<CommandBar>
   <AppBarButton Icon="Back" Label="Back" />
   <AppBarButton Icon="Stop" Label="Stop" />
   <AppBarButton Icon="Play" Label="Play" />
   <AppBarButton Icon="Forward" Label="Forward" />

   <CommandBar.SecondaryCommands>
      <AppBarButton Icon="Like" Label="Like" />
      <AppBarButton Icon="Dislike" Label="Dislike" />
   </CommandBar.SecondaryCommands>

   <CommandBar.Content>
      <TextBlock Text="Now playing..." Margin="12,14"/>
   </CommandBar.Content>
</CommandBar>

Use a CommandBar to provide users with quick access to your app’s most common tasks. It's a general-purpose, flexible, light-weight control that can display both complex content, such as images, progress bars, or text blocks, as well as simple commands such as AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

CommandBar has three properties you can use to add content and commands: Content, PrimaryCommands, and SecondaryCommands. You can add any XAML elements to the content area by setting the Content property.

Step 2: Run your application and test yourself.