How to add contextual commands to an app bar (XAML)

Applies to Windows and Windows Phone

Hide app bar commands that are relevant only in certain contexts until they are relevant. For example, you might have image editing commands that are useful only when an image is selected. Or, you might have a global app bar with commands that are relevant only on certain pages. These examples show several ways you can add contextual commands to an app bar.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Add a command button to a command bar (Windows 8.1)

Windows 8.1:  This step applies only to Windows 8.1. For Windows 8, see steps 3-5.

You can add commands to a CommandBar in your code-behind file. You typically do this to add commands that apply only when an item is selected, or when you share a CommandBar between pages and have commands that apply to only one page. Adding the command in the code of the page that the command applies to makes it easier to hook the command up to elements in that page. Here, you add a command to a shared CommandBar when the user navigates to a page, and remove it when the user navigates away from the page.

For more info about sharing an app bar, see How to share an app bar across pages and XAML AppBar control sample.

When a user navigates to the page, add the command to the CommandBar.

  1. Add a CommandBar as the bottom app bar to your app. For more info, see Quickstart: Adding app bars.

    Here, you add a bottom app bar with a single button defined in XAML.

    
        <Page.BottomAppBar>
            <CommandBar x:Name="bottomAppBar">
                <AppBarButton Icon="Sort" Label="Sort" Click="AppBarButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
    
  2. When a user navigates to the page, create an AppBarSeparator to add to the CommandBar.
  3. Create an AppBarButton to add to the CommandBar.
  4. Set the Icon and Label for the AppBarButton.
  5. Register the Click event handler.
  6. Add the button to the CommandBar.

void Page1_Loaded(object sender, RoutedEventArgs e)
{
    bottomAppBar.PrimaryCommands.Insert(0, new AppBarSeparator());

    AppBarButton addButton = new AppBarButton();
    addButton.Icon = new SymbolIcon(Symbol.Add);
    addButton.Label = "Add";
    addButton.Click += AppBarButton_Click;
    bottomAppBar.PrimaryCommands.Insert(0, addButton);
}

Step 2: Remove the command button from the command bar (Windows 8.1)

Windows 8.1:  This step applies only to Windows 8.1. For Windows 8, see steps 3-5.

When a user navigates away from the page, remove the command from the AppBar

  1. Un-register the Click event handler.
  2. Remove the AppBarButton from the CommandBar.
  3. Remove the AppBarSeparator from the CommandBar.

void Page1_Unloaded(object sender, RoutedEventArgs e)
{
    CommandBar bottomCommandBar = this.BottomAppBar as CommandBar;
    if (bottomCommandBar != null)
    {
        AppBarButton b = bottomCommandBar.PrimaryCommands[0] as AppBarButton;
        b.Click -= AppBarButton_Click;

        // Remove AppBarButton.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
        // Remove AppBarSeparator.
        bottomCommandBar.PrimaryCommands.RemoveAt(0);
    }
}

Step 3: Show and hide commands (Windows 8)

Windows 8:  This step applies only to Windows 8. For Windows 8.1, see steps 1-2. In Windows 8.1, AppBarButtonStyle is deprecated and replaced with AppBarButton controls.

To show and hide a group of commands in an AppBar you can use the Visibility property. This is how you typically control contextual commands based on user selection in a page.

  1. Add an app bar to your app. For more info, see Quickstart: Adding app bars.
  2. Name commands or groups that you show and hide.
    1. To show and hide an individual command, name its command button.
    2. Or, to show and hide a group of commands, put them in a named container.

    In this example, the "Pin" and "Unpin" commands are put in a StackPanel named pinCommands. The pinCommands group is initially collapsed.

    
    <AppBar IsOpen="True" IsSticky="True">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <StackPanel x:Name="pinCommands" Orientation="Horizontal"
                            Visibility="Collapsed">
                    <Button Style="{StaticResource UnpinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource PinAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Rectangle Height="50" Width="2" Fill="LightGray"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Style="{StaticResource FavoriteAppBarButtonStyle}" 
                            Click="Button_Click"/>
                    <Button Style="{StaticResource SearchAppBarButtonStyle}" 
                            Click="Button_Click"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </AppBar>
    
    
    
  3. Set the Visibility property of the named command or container to show or hide it.

    Here, you use a ToggleSwitch to show and hide the pinCommands group. In a typical app, you might show and hide commands based on a user selection or some other interaction with your app.

    
    private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        ToggleSwitch toggle = (ToggleSwitch)sender;
    
        if (toggle.IsOn == true)
        {
            pinCommands.Visibility = Visibility.Visible;
        }
        else
        {
            pinCommands.Visibility = Visibility.Collapsed;
        }
    }
    
    
    

Here's what the app bar looks like with the commands hidden.

App bar with commands hidden

Here's what the app bar looks like with the commands shown.

App bar with commands shown

Step 4: Add a command button to an app bar (Windows 8)

Windows 8:  This step applies only to Windows 8. For Windows 8.1, see steps 1-2. In Windows 8.1, AppBarButtonStyle is deprecated and replaced with AppBarButton controls.

You can add commands to an AppBar in your code-behind file. You typically do this when you share an AppBar between pages and have commands that apply to only one page. Adding the command in the code of the page that the command applies to makes it easier to hook the command up to elements in that page. Here, you add a command to a shared AppBar when the user navigates to a page, and remove it when the user navigates away from the page.

For more info about sharing an app bar, see How to share an app bar across pages and XAML AppBar control sample.

When a user navigates to the page, add the command to the AppBar.

  1. Add an app bar to your app. For more info, see Quickstart: Adding app bars.

    Here, you add a bottom app bar with a single button defined in XAML.

    
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" IsSticky="True">
            <Grid>
                <StackPanel x:Name="rightPanel" 
                            Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource AppBarButtonStyle}" 
                            Content="&#xE174;" 
                            AutomationProperties.Name="Sort"
                            AutomationProperties.AutomationId="SortButton"
                            Click="SortMenuButton_Click" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    
    
    
  2. When a user navigates to the page, create the command button to add to the AppBar.
  3. Apply an app bar button style to the button.
  4. Register the Click event handler.
  5. Add the button to the AppBar.

Button addButton = null;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add a button to an AppBar.
   
    if (rightPanel != null)
    {
        // Create the button to add
        addButton = new Button();

        // Apply the button style so that it looks like an AppBar button
        addButton.Style = (Style)App.Current.Resources["AddAppBarButtonStyle"];

        // Add the Click handler for the new button
        addButton.Click += Button_Click;

        // Add the button to the AppBar
        rightPanel.Children.Add(addButton);
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Perform action here.
}


Step 5: Remove the command button from the app bar (Windows 8)

Windows 8:  This step applies only to Windows 8. For Windows 8.1, see steps 1-2. In Windows 8.1, AppBarButtonStyle is deprecated and replaced with AppBarButton controls.

When a user navigates away from the page, remove the command from the AppBar

  1. Un-register the Click event handler.
  2. Remove the button from the AppBar.

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (rightPanel != null)
    {
        // Unhook the Click event handler for the button
        addButton.Click -= Button_Click;

        // Remove the button from the AppBar
        rightPanel.Children.Remove(addButton);
    }
}


Related topics

XAML AppBar control sample
Quickstart: Adding app bars
AppBar

 

 

Show:
© 2014 Microsoft