TabbedCommandBar

TabbedCommandBar zeigt einen Satz von TabbedCommandBarItem in einem freigegebenen Container an, der in vielen Apps des Produktivitätstyps zu finden ist. Sie basiert auf NavigationView.

TabbedCommandBarItem kann verwendet werden, um bestimmte Elemente anzuzeigen, und seine IsContextual-Eigenschaft kann so eingestellt werden, dass der Standardstil in ein Element geändert wird, das aus den Office-Apps bekannt ist, um den Benutzer darauf hinzuweisen, dass bestimmte Kontextoptionen verfügbar sind.

<!--  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();
    }
}

Hinweise

TabbedCommandBar wendet automatisch Formatvorlagen auf bekannte gängige Steuerelemente innerhalb von AppBarElementContainer an. Die folgenden Elemente weisen Formatvorlagen auf:

• ComboBox
• SplitButton

Hinweis

Das ComboBox-Steuerelement lässt keine Änderung der Auswahl zu, während sie sich im Überlauf-Flyout befindet.

Die TabbedCommandBar-Eigenschaft fügt keine eigenen Eigenschaften hinzu. Eine Liste der barrierefreien Eigenschaften finden Sie unter NavigationView.