Command Bar In Universal Windows Platform With C++

This article is the sequel to the series Universal Windows Platform with C++. If you start with UWP and C++, follow "Hello World in Universal Windows Platform with C++" to learn how to get started.

When you build a UWP application, you have to respect some rules for application validation in the Microsoft Store but also, respect some rules in the UI. The platform brings a lot of specific controls to facilitate user interaction with multiple devices, such as - a PC, tablet, Xbox, and mobile.

The command bar is an area where we can put some controls to provide quick actions for the user. Generally, this is where the main AppBarButton controls can be added. You can add actions depending on the application context or specific context.

For example, in the News application, there is a command bar at the top providing some actions such as customize the interface, enable dark theme or search a news.

Command Bar In Universal Windows Platform With C++

By clicking on the […] action button, it shows more details (such as button label) and other actions if exist.

Create a new UWP C++ project

In Windows 10, go to Start menu and find Visual Studio 2017.

Once Visual Studio 2017 gets started, go to File >> New >> Project…

Then, from the new project window, choose Visual C++ from Installed templates; choose Blank App (Universal Windows); type in a Name (I choose CommandBar for example); select a Location and then click OK to create the project.

Visual Studio 2017 will create a new UWP project and show you a dialog so that you have to select the target version. This should be at least the Windows 10 Spring Creators Update (or Windows 10, version 1803) and the minimum version depends on which Windows 10 version your application could run (in general, we choose the same version for both maximum and minimum version).

To make sure you have the most recent version, check if your Windows 10 is up-to-date and in Visual Studio 2017, select Tools menu > Extensions and Updates… and see if there are any updates.

Add a command bar

From the solution explorer, double-click MainPage.xaml.

We can add a command bar by using the CommandBar control. In the XAML code, between the <Grid> and </Grid> tags, enter the following XAML.

<CommandBar x:Name="MyCommandBar" IsOpen="True" IsSticky="True" VerticalAlignment="Bottom">
<AppBarButton x:Name="AddCommand" Icon="Add" Label="Add a command" Click="AddCommand_Click" />
</CommandBar>

A command bar is composed of three elements - a commands area, a secondary commands area, and the content.

Command area contains all AppBar controls like AppBarButton, AppBarSeparator, AppBarToggleButton and so on.
Secondary commands is the area where we can add commands which are displayed to the users by tapping the More […] Button.
The Content area is shown on the left and you can put in it all type of controls.

Generally, you will put in a Command Bar main features of Universal Windows Platform application. Windows 10 brings a set of standard icons to make your application fit with others.

Command Bar event

Be sure the method stub is generated for the Click action of the AppBarButton (called AddCommand_Click). Now, open the source file definition MainWindow.xaml.h and add a new private variable.

Private:

int m_button;

Then, go to the source file MainWindow.xaml.cpp and initialize m_button to 0 in the constructor.

MainPage::MainPage()
: m_button(0)
{
InitializeComponent();
}

Next, the following code should be entered for the AppBarButton Click event.

void CommandBar::MainPage::AddCommand_Click(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e) {
auto button = ref new Windows::UI::Xaml::Controls::AppBarButton();
button - > Icon = ref new Windows::UI::Xaml::Controls::SymbolIcon(Windows::UI::Xaml::Controls::Symbol::Delete);
button - > Label = "AppBarButton" + m_button;
button - > Click += ref new Windows::UI::Xaml::RoutedEventHandler(this, & CommandBar::MainPage::AppBarButton_Click);
MyCommandBar - > SecondaryCommands - > Append(button);
m_button++;
}

What we do is to create a new AppBarButton and add it to the Secondary Commands area of our Command Bar. We also subscribe the new AppBarButton’s Click event to another method which doesn’t exist yet. Back in MainWindow.xaml.h, add the following method signature below AddCommand_Click,

void AppBarButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

Finally, we implement the new AppBarButton_Click method in MainWindow.xaml.cpp.

void CommandBar::MainPage::AppBarButton_Click(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e) {
auto button = dynamic_cast < Windows::UI::Xaml::Controls::AppBarButton ^ > (sender);
unsigned int index = 0;
if (MyCommandBar - > SecondaryCommands - > IndexOf(button, & index)) {
MyCommandBar - > SecondaryCommands - > RemoveAt(index);
}
}

We get the button clicked and search for this index, so we can delete it from Secondary Commands.

Run the application

Press F5 in Visual Studio 2017 or select the Local Machine button to run the application. Once the application has started running, tap on the "Add a command" button to add a new button into the Secondary Commands area.

Then, when you tap on a secondary button, it is now deleted.

Thanks for reading!