탭형 명령 모음

TabbedCommandBar는 많은 생산성 앱에서 볼 수 있는 공통 컨테이너에 TabbedCommandBarItem 집합을 표시합니다. NavigationView를 기반으로 합니다.

TabbedCommandBarItem는 특정 항목을 표시하는 데 사용할 수 있으며 IsContextual 해당 속성을 설정하여 기본 스타일을 Office 앱 알려진 항목으로 변경하여 특정 컨텍스트 옵션을 사용할 수 있음을 사용자에게 강조 표시할 수 있습니다.

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

설명

TabbedCommandBar는 AppBarElementContainer 내부의 알려진 공통 컨트롤에 스타일을 자동으로 적용합니다. 다음 요소에는 스타일이 있습니다.

• ComboBox
• 분할 버튼

자체 TabbedCommandBar 속성을 추가하지 않습니다. 접근성 속성 목록은 NavigationView를 참조하세요.