Command Bar

Learn to use the Command Bar in Windows App SDK with this Tutorial

Hello Input shows you how to use a ContentDialog with a TextBox that you can type into and show that text in another ContentDialog using the Windows App SDK.

Step 1

Follow Setup and Start on how to get Setup and Install what you need for Visual Studio 2022 and Windows App SDK.

In Windows 11 choose Start and then find or search for Visual Studio 2022 and then select it.

Once Visual Studio 2022 has started select Create a new project.

Then choose the Blank App, Packages (WinUI in Desktop) and then select Next.

After that in Configure your new project type in the Project name as CommandBar, then select a Location and then select Create to start a new Solution.

Step 2

Within Solution Explorer for the Solution double-click on MainWindow.xaml to see the XAML for the Main Window.

Step 3

In the XAML for MainWindow.xaml there will be some XAML for a StackPanel, this should be Removed:


<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Step 4

While still in the XAML for MainWindow.xaml above </Window>, type in the following XAML:


<CommandBar IsOpen="True" IsSticky="True" VerticalAlignment="Bottom">
    <CommandBar.SecondaryCommands>
        <AppBarButton Name="Hide" Icon="Cancel"
        Visibility="Collapsed" Label="Hide Other" Click="Toggle_Click"/>
    </CommandBar.SecondaryCommands>
    <AppBarButton Name="Toggle" Icon="Accept" AccessKey="T" 
    Label="Toggle Other" Click="Toggle_Click"/>
</CommandBar>

CommandBar is a Control that can contain AppBarButton, in this case one for Toggle Other which will be used to show or hide another AppBarButton for Hide Other in the SecondaryCommands, which are displayed under a Menu on the CommandBar indicated with … The AppBarButton for Toggle Other also has an AccessKey of T to it can be triggered with a Click or by pressing Alt and then T on the keyboard.

Step 5

Within Solution Explorer for the Solution select the arrow next to MainWindow.xaml then double-click on MainWindow.xaml.cs to see the Code for the Main Window.

Step 6

In the Code for MainWindow.xaml.cs there be a Method of myButton_Click(...) this should be Removed by removing the following:


private void myButton_Click(object sender, RoutedEventArgs e)
{
    myButton.Content = "Clicked";
}

Step 7

Once myButton_Click(...) has been removed, below the end of public MainWindow() { ... } type in the following Code:


private void Toggle_Click(object sender, RoutedEventArgs e)
{
    if (Hide.Visibility == Visibility.Collapsed)
    {
        Hide.Visibility = Visibility.Visible;
    }
    else
    {
        Hide.Visibility = Visibility.Collapsed;
    }
}

The Method of Toggle_Click will be triggered when the AppBarButton of Toggle Other or Hide Other is Clicked it can also be triggered by pressing Alt and then T on the keyboard. It will check the value of the Visibility of AppBarButton for Hide, if this is Collapsed or it is hidden, it will set it to Visible which will mean it can be seen, otherwise it will do the opposite and hide it to make it Collapsed again.

Step 8

That completes the Windows App SDK application. In Visual Studio 2022 from the Toolbar select CommandBar (Package) to Start the application.

Step 9

Once running you should see an AppBarButton with the Text Toggle Other along with … which is where the SecondaryCommands for Hide Other would be displayed.

Command Bar Running

Step 10

If you Click on the AppBarButton with the Text Toggle Other or press Alt and then T this will Toggle the AppBarButton of Hide Other when … is Clicked you can also Click on Hide Other to hide itself.

Command Bar Output

Step 11

To Exit the Windows App SDK application, select the Close button from the top right of the application as that concludes this Tutorial for Windows App SDK from tutorialr.com!

Command Bar PDF