Barra dei comandi a schede

Il TabbedCommandBar visualizza una serie di TabbedCommandBarItem in un contenitore condiviso presente in molte app di produttività. Si basa su NavigationView.

TabbedCommandBarItempuò essere utilizzato per visualizzare determinati elementi e la relativa IsContextual proprietà può essere impostata per modificare lo stile predefinito in un elemento noto dai app Office per evidenziare a un utente che alcune opzioni di contesto sono disponibili.

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

Osservazioni:

TabbedCommandBar applica automaticamente gli stili ai controlli comuni noti all'interno di un oggetto AppBarElementContainer. Gli elementi seguenti hanno stili:

• ComboBox
• SplitButton

TabbedCommandBar non aggiunge alcuna proprietà propria. Per un elenco delle proprietà accessibili, vedere NavigationView .