TabbedCommandBar

The TabbedCommandBar displays a set of TabbedCommandBarItem in a shared container found in many productivity type apps. It is based off of NavigationView.

TabbedCommandBarItem can be used to display certain items, and its IsContextual property can be set to change the default style into an item that is known from the Office apps to highlight to a user that certain context options are available.

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TabbedCommandBarExperiment.Samples.TabbedCommandBarSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TabbedCommandBarExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <Grid VerticalAlignment="Top">
        <controls:TabbedCommandBar>
            <controls:TabbedCommandBar.AutoSuggestBox>
                <AutoSuggestBox AutomationProperties.Name="Search"
                                QueryIcon="Find" />
            </controls:TabbedCommandBar.AutoSuggestBox>
            <controls:TabbedCommandBar.PaneFooter>
                <CommandBar Background="Transparent"
                            DefaultLabelPosition="Right">
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Share" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Comments" />
                </CommandBar>
            </controls:TabbedCommandBar.PaneFooter>
            <controls:TabbedCommandBar.MenuItems>
                <controls:TabbedCommandBarItem Header="Home">
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Undo" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Redo" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Paste" />
                    <AppBarSeparator />
                    <!--  TO DO: Enable when ColorPicker is merged  -->
                    <!--<AppBarElementContainer>
                        <controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
                    </AppBarElementContainer>-->
                    <AppBarElementContainer>
                        <ComboBox MinWidth="175"
                                  SelectedIndex="0">
                            <ComboBoxItem Content="Arial" />
                            <ComboBoxItem Content="Calibri" />
                            <ComboBoxItem Content="JetBrains Mono" />
                            <ComboBoxItem Content="Roboto" />
                            <ComboBoxItem Content="Segoe UI" />
                            <ComboBoxItem Content="Segoe UI Semibold" />
                        </ComboBox>
                    </AppBarElementContainer>
                    <AppBarElementContainer>
                        <TextBox PlaceholderText="Size" />
                    </AppBarElementContainer>
                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=}"
                                        Label="Bold" />
                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=}"
                                        Label="Italic" />
                    <AppBarToggleButton Icon="{ui:FontIcon Glyph=}"
                                        Label="Underline" />
                </controls:TabbedCommandBarItem>
                <controls:TabbedCommandBarItem Header="Insert">
                    <AppBarButton Icon="Pictures"
                                  Label="Pictures">
                        <AppBarButton.Flyout>
                            <MenuFlyout Placement="BottomEdgeAlignedLeft">
                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=}"
                                                Text="This device" />
                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=}"
                                                Text="Stock images" />
                                <MenuFlyoutItem Icon="{ui:FontIcon Glyph=}"
                                                Text="Online pictures" />
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Shapes" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Icons" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="3D Models" />
                    <AppBarSeparator />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Add-ins" />
                    <controls:TabbedCommandBarItem.SecondaryCommands>
                        <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                      Label="New item" />
                    </controls:TabbedCommandBarItem.SecondaryCommands>
                </controls:TabbedCommandBarItem>
                <controls:TabbedCommandBarItem x:Name="PictureFormat"
                                               Header="Picture Format"
                                               IsContextual="True"
                                               Visibility="{x:Bind ContextualItem, Mode=OneWay}">
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Remove background" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Picture effects" />
                    <AppBarButton Icon="{ui:FontIcon Glyph=}"
                                  Label="Rotate" />
                    <AppBarElementContainer>
                        <muxc:SplitButton>
                            <StackPanel Orientation="Horizontal"
                                        Spacing="12">
                                <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          FontSize="16"
                                          Glyph="" />
                                <TextBlock FontSize="12"
                                           Text="Crop" />
                            </StackPanel>
                            <muxc:SplitButton.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem Icon="{ui:FontIcon Glyph=}"
                                                    Text="Crop" />
                                    <MenuFlyoutItem Icon="{ui:FontIcon Glyph=}"
                                                    Text="Crop to Shape" />
                                    <MenuFlyoutItem Text="Aspect Ratio" />
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem Text="Fill" />
                                    <MenuFlyoutItem Text="Fit" />
                                </MenuFlyout>
                            </muxc:SplitButton.Flyout>
                        </muxc:SplitButton>
                    </AppBarElementContainer>
                </controls:TabbedCommandBarItem>
            </controls:TabbedCommandBar.MenuItems>
        </controls:TabbedCommandBar>
    </Grid>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Controls;

namespace TabbedCommandBarExperiment.Samples;

[ToolkitSampleBoolOption("ContextualItem", true, Title = "Show contextual item")]

[ToolkitSample(id: nameof(TabbedCommandBarSample), "TabbedCommandBar", description: $"A sample for showing how to create and use a {nameof(TabbedCommandBar)} control.")]
public sealed partial class TabbedCommandBarSample : Page
{
    public TabbedCommandBarSample()
    {
        this.InitializeComponent();
    }
}

Remarks

The TabbedCommandBar automatically applies styles to known common controls inside an AppBarElementContainer. The following elements have styles:

• ComboBox
• SplitButton

Note

The ComboBox does not allow changing its selection while it is in the overflow flyout.

The TabbedCommandBar does not add any of its own properties. See NavigationView for a list of accessible properties.