명령 모음 플라이아웃
명령 모음 플라이아웃은 사용자가 일반적인 작업에 쉽게 액세스할 수 있도록 요소와 관련된 부동 도구 모음을 UI 캔버스에 표시합니다.
CommandBar처럼 CommandBarFlyout에는 명령을 추가하는 데 사용할 수 있는 PrimaryCommands 및 SecondaryCommands 속성이 있습니다. 두 컬렉션 중 하나에 또는 둘 모두에 명령을 배치할 수 있습니다. 기본 및 보조 명령이 표시되는 시기와 방법은 디스플레이 모드에 따라 달라집니다.
명령 모음 플라이아웃은 축소 및 확장의 두 가지 표시 모드를 제공합니다.
- 축소 모드에서는 기본 명령만 표시됩니다. 명령 모음 플라이아웃에 기본 명령과 보조 명령이 모두 있는 경우 줄임표[...]로 표시되는 "자세히 보기" 단추가 표시됩니다. 사용자는 이 단추를 통해 확장 모드로 전환하여 보조 명령에 액세스할 수 있습니다.
- 확장 모드에서는 기본 명령과 보조 명령이 모두 표시됩니다. (컨트롤에 보조 항목만 있는 경우 보조 항목이 MenuFlyout 컨트롤과 비슷한 방식으로 표시됩니다.)
올바른 컨트롤인가요?
앱 캔버스의 요소 컨텍스트에서 사용자에게 단추 및 메뉴 항목과 같은 명령 컬렉션을 표시하려면 명령 모음 플라이아웃 컨트롤을 사용합니다.
명령 모음 플라이아웃은 상황에 맞는 메뉴를 만들 때 권장되는 컨트롤입니다. 이를 통해 상황에 맞는 메뉴의 시나리오와 상황별로 가장 관련이 있는 일반 명령(예: 복사, 잘라내기, 붙여넣기, 삭제, 공유 또는 텍스트 선택 명령)을 기본 명령으로 추가하여 단일 가로 행으로 명령 모음 플라이아웃에 표시할 수 있습니다. TextCommandBarFlyout은 이미 TextBox, TextBlock, RichEditBox, RichTextBlock 및 PasswordBox 컨트롤에서 텍스트 명령을 자동으로 표시하도록 적절히 구성되어 있습니다. CommandBarFlyout은 텍스트 컨트롤의 기본 텍스트 명령을 바꾸는 데 사용할 수 있습니다.
목록 항목에 상황에 맞는 명령을 표시하려면 컬렉션 및 목록에 대한 상황에 맞는 명령의 지침을 따릅니다.
사전 및 사후 호출
일반적으로 UI 캔버스의 요소와 연결된 플라이아웃 또는 메뉴를 호출하는 두 가지 방법이 있는데, 하나는 사전 호출이고 다른 하나는 사후 호출입니다.
사전 호출에서는 사용자가 명령이 연결되는 항목과 상호 작용할 때 명령이 자동으로 나타납니다. 예를 들어 사용자가 텍스트 상자의 텍스트를 선택할 때 텍스트 형식 지정 명령이 나타날 수 있습니다. 이 경우 명령 모음 플라이아웃이 포커스를 받지 않습니다. 대신, 사용자가 상호 작용하는 항목 근처에 관련 명령을 표시합니다. 사용자가 명령과 상호 작용하지 않는 경우 사라집니다.
사후 호출에서는 명령을 요청하는 명시적인 사용자 작업(예: 마우스 오른쪽 단추 클릭)에 대응하여 명령이 표시됩니다. 이는 전통적인 상황에 맞는 메뉴 개념과 일치합니다.
CommandBarFlyout은 둘 중 원하는 방식으로 사용 가능하며, 심지어 두 가지를 혼합한 방식으로도 사용할 수 있습니다.
UWP 및 WinUI 2
Important
이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.
이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.
UWP 앱을 위한 CommandBarFlyout 컨트롤은 WinUI 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤용 API는 Windows.UI.Xaml.Controls (UWP) 및 Microsoft.UI.Xaml.Controls (WinUI) 네임스페이스에 모두 존재합니다.
- UWP API: CommandBarFlyout 클래스, TextCommandBarFlyout 클래스, AppBarButton 클래스, AppBarToggleButton 클래스, AppBarSeparator 클래스
- WinUI 2 API: CommandBarFlyout 클래스, TextCommandBarFlyout 클래스
- WinUI 2 갤러리 앱을 열고 작동 중인 CommonadBarFlyout을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.
이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:CommandBarFlyout />
명령 모음 플라이아웃 만들기
WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
이 예제에서는 명령 모음 플라이아웃을 만들어서 사전에 그리고 사후에 사용하는 방법을 보여줍니다. 이미지를 탭하면 플라이아웃이 축소 모드로 표시됩니다. 상황에 맞는 메뉴로 표시하는 경우 플라이아웃이 확장 모드로 표시됩니다. 두 경우 모두 플라이아웃이 열린 후 사용자가 플라이아웃을 확장하거나 축소할 수 있습니다.
<Grid>
<Grid.Resources>
<CommandBarFlyout x:Name="ImageCommandsFlyout">
<AppBarButton Label="Favorite" Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
<AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share"/>
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Rotate" Icon="Rotate"/>
<AppBarButton Label="Delete" Icon="Delete"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</Grid.Resources>
<Image Source="Assets/image1.png" Width="300"
Tapped="Image_Tapped"
FlyoutBase.AttachedFlyout="{x:Bind ImageCommandsFlyout}"
ContextFlyout="{x:Bind ImageCommandsFlyout}"/>
</Grid>
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
var options = new FlyoutShowOptions()
{
// Position shows the flyout next to the pointer.
// "Transient" ShowMode makes the flyout open in its collapsed state.
Position = e.GetPosition((FrameworkElement)sender),
ShowMode = FlyoutShowMode.Transient
};
flyout?.ShowAt((FrameworkElement)sender, options);
}
다음은 축소된 상태의 명령 모음 플라이아웃입니다.
다음은 보조 명령을 보여 주는 확장된 상태의 동일한 명령 모음 플라이아웃입니다.
사전에 명령 표시
상황에 맞는 명령을 사전에 표시할 경우 기본적으로 기본 명령만 표시해야 합니다(명령 모음 플라이아웃이 축소되어야 함). 가장 중요한 명령을 기본 명령 컬렉션에 배치하고, 이전에는 상황에 맞는 메뉴에 배치하던 추가 명령을 보조 명령 컬렉션에 배치합니다.
명령을 사전에 표시하려면 일반적으로 명령 모음 플라이아웃을 표시하는 Click 또는 Tapped 이벤트를 처리합니다. 플라이아웃이 포커스 없이 축소 모드에서 열리도록 플라이아웃의 ShowMode를 Transient 또는 TransientWithDismissOnPointerMoveAway로 설정합니다.
텍스트 컨트롤에는 SelectionFlyout 속성이 있습니다. 이 속성에 플라이아웃을 할당하면 텍스트를 선택할 때 플라이아웃이 자동으로 표시됩니다.
사후에 명령 표시
상황에 맞는 명령을 사후에 상황에 맞는 메뉴로 표시할 경우 기본적으로 보조 명령이 표시됩니다(명령 모음 플라이아웃을 확장해야 함). 이 경우 명령 모음 플라이아웃에 기본 명령과 보조 명령이 모두 있거나 보조 명령만 있을 수 있습니다.
상황에 맞는 메뉴에 명령을 표시하려면 일반적으로 UI 요소의 ContextFlyout 속성에 플라이아웃을 할당합니다. 이 방식으로 요소를 사용하여 플라이아웃 열기가 처리되므로 개발자는 아무 것도 할 필요가 없습니다.
플라이아웃을 표시를 직접 처리하는 경우(예: RightTapped 이벤트에서) 플라이아웃이 확장 모드에서 열리고 포커스를 받도록 플라이아웃의 ShowMode를 Standard로 설정합니다.
팁
플라이아웃을 배치하는 옵션과 플라이아웃 배치를 제어하는 방법에 대한 자세한 내용은 플라이아웃을 참조하세요.
항상 확장된 CommandBarFlyout 표시
기본 및 보조 명령이 CommandBarFlyout에 있는 경우 기본적으로 "자세히 보기"[...] 단추가 표시되며 보조 명령을 확장 및 축소하는 데 사용할 수 있습니다. CommandBarFlyout을 확장된 모드로 유지하고 항상 보조 명령을 표시하려면 CommandBarFlyout.AlwaysExpanded 속성을 사용할 수 있습니다.
AlwaysExpanded 속성이 true로 설정되면 "자세히 보기" 단추가 표시되지 않으며 사용자는 컨트롤의 확장된 상태를 전환할 수 없습니다. 보조 명령을 클릭하거나 사용자가 플라이아웃 외부를 클릭하면 평소와 같이 여전히 CommandBarFlyout이 닫힙니다.
CommandBarFlyout에 보조 명령이 있는 경우에만 이 속성이 적용됩니다. 보조 명령이 없는 경우 CommandBarFlyout은 항상 축소된 모드에 있습니다.
팁
AlwaysExpanded 속성이 true로 설정된 경우에도 IsOpen 속성을 설정하여 CommandBarFlyout을 프로그래밍 방식으로 축소 및 확장할 수 있습니다.
명령 및 콘텐츠
CommandBarFlyout 컨트롤에는 명령과 콘텐츠를 추가하는 데 사용하는 속성 2가지가 있습니다: PrimaryCommands 및 SecondaryCommands입니다.
기본적으로 명령 모음 항목은 PrimaryCommands 컬렉션에 추가됩니다. 이러한 명령은 명령 모음에서 표시되고 축소 모드와 확장 모드 둘 모두에 표시됩니다. CommandBar와는 달리, 기본 명령이 자동으로 보조 명령으로 오버플로되지 않으며 잘릴 수 있습니다.
SecondaryCommands 컬렉션에 명령을 추가할 수도 있습니다. 보조 명령은 컨트롤의 메뉴 영역에 표시되며 확장 모드에만 표시됩니다.
시나리오에 중요한 일반 명령(예: 복사, 잘라내기, 붙여넣기, 삭제, 공유 또는 텍스트 선택 명령)이 있는 경우 보조 명령이 아닌 기본 명령으로 추가하는 것이 좋습니다.
앱 바 버튼
PrimaryCommands 및 SecondaryCommands를 AppBarButton, AppBarToggleButton 및 AppBarSeparator 컨트롤로 직접 채울 수 있습니다.
앱 바 단추 컨트롤은 아이콘 및 텍스트 레이블에 따라 구분됩니다. 이러한 컨트롤은 명령 모음에 사용하도록 최적화되었으며, 컨트롤이 명령 모음에 표시되는지 아니면 오버플로 메뉴에 표시되는지에 따라 모양이 변합니다.
- Windows 앱 SDK 1.5 및 이후 버전: 기본 명령으로 사용되는 앱 바 버튼이 명령 모음에 텍스트 레이블과 아이콘(둘 다 설정된 경우)을 모두 표시합니다.
<AppBarButton Icon="Copy" Label="Copy"/> - Windows App SDK 1.4 및 이전 버전: 기본 명령으로 사용되는 앱 다 버튼이 명령 모음에 아이콘으로만 표시되고, 텍스트 레이블은 표시되지 않습니다. 다음과 같이 툴팁 을 사용하여 명령의 텍스트 설명을 표시하는 것이 좋습니다.
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/> - 보조 명령으로 사용되는 앱 바 단추는 레이블과 아이콘을 모두 사용하여 메뉴에 표시됩니다.
아이콘
다음에 대해 메뉴 항목 아이콘을 제공하는 것이 좋습니다.
- 가장 일반적으로 사용되는 항목
- 아이콘이 표준이거나 잘 알려진 메뉴 항목
- 아이콘이 명령의 기능을 잘 설명하는 메뉴 항목
표준 시각화가 없는 명령에 대해 반드시 아이콘을 제공해야 하는 것은 아닙니다. 모호한 아이콘은 도움이 되지 않으며, 화면을 복잡하게 만들고, 사용자가 중요한 메뉴 항목에 집중할 수 없게 합니다.
기타 콘텐츠
명령 모음 플라이아웃을 AppBarElementContainer에 래핑하여 다른 컨트롤을 명령 모음 플라이아웃에 추가할 수 있습니다. 이렇게 하면 DropDownButton 또는 SplitButton 같은 컨트롤을 추가하거나, StackPanel 같은 컨테이너를 추가하여 복합 UI를 만들 수 있습니다.
명령 모음 플라이아웃의 기본 또는 보조 명령 컬렉션에 추가하려면 요소에서 ICommandBarElement 인터페이스를 구현해야 합니다. AppBarElementContainer 는 명령 모음이 인터페이스 자체를 구현하지 않는 경우 명령 모음에 추가할 수 있도록 이 인터페이스를 구현하는 래퍼입니다.
여기는 AppBarElementContainer는 명령 모음 플라이아웃에 요소를 추가하는 데 사용됩니다. 텍스트 맞춤을 활성화하려면 SplitButton을 기본 명령에 추가합니다. StackPanel은 확대/축소 컨트롤에 좀 더 복잡한 레이아웃이 가능하도록 보조 명령에 추가됩니다.
팁
기본적으로 앱 캔버스용으로 설계된 요소는 명령 모음에 적합하지 않은 것처럼 보일 수 있습니다. AppBarElementContainer를 사용하여 요소를 추가할 때 요소가 다른 명령 모음 요소와 일치하도록 몇 가지 단계를 수행해야 합니다.
- 요소의 배경과 테두리가 앱 바 단추와 일치하도록 기본 브러시를 경량 스타일로 재정의합니다.
- 요소의 위치와 크기를 조정합니다.
- 높이와 너비가 각각 16픽셀인 Viewbox에 아이콘을 래핑합니다.
참고 항목
이 예제에서는 명령 모음 플라이아웃 UI를 보여주기만 하고, 표시되는 명령을 구현하지는 않습니다. 명령 구현에 대한 자세한 내용은 단추 및 명령 디자인 기본 사항을 참조하세요.
<CommandBarFlyout>
<AppBarButton Icon="Cut" Label="Cut" ToolTipService.ToolTip="Cut"/>
<AppBarButton Icon="Copy" Label="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="Paste" Label="Paste" ToolTipService.ToolTip="Paste"/>
<!-- Alignment controls -->
<AppBarElementContainer>
<SplitButton ToolTipService.ToolTip="Alignment">
<SplitButton.Resources>
<!-- Override default brushes to make the SplitButton
match other command bar elements. -->
<Style TargetType="SplitButton">
<Setter Property="Height" Value="38"/>
</Style>
<SolidColorBrush x:Key="SplitButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="SplitButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBorderBrushChecked"
Color="Transparent"/>
</SplitButton.Resources>
<SplitButton.Content>
<Viewbox Width="16" Height="16" Margin="0,2,0,0">
<SymbolIcon Symbol="AlignLeft"/>
</Viewbox>
</SplitButton.Content>
<SplitButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Icon="AlignLeft" Text="Align left"/>
<MenuFlyoutItem Icon="AlignCenter" Text="Center"/>
<MenuFlyoutItem Icon="AlignRight" Text="Align right"/>
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
</AppBarElementContainer>
<!-- end Alignment controls -->
<CommandBarFlyout.SecondaryCommands>
<!-- Zoom controls -->
<AppBarElementContainer>
<AppBarElementContainer.Resources>
<!-- Override default brushes to make the Buttons
match other command bar elements. -->
<SolidColorBrush x:Key="ButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushChecked"
Color="Transparent"/>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="Button">
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="40"/>
</Style>
</AppBarElementContainer.Resources>
<Grid Margin="12,-4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="76"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Viewbox Width="16" Height="16" Margin="0,2,0,0">
<SymbolIcon Symbol="Zoom"/>
</Viewbox>
<TextBlock Text="Zoom" Margin="10,0,0,0" Grid.Column="1"/>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Button ToolTipService.ToolTip="Zoom out">
<Viewbox Width="16" Height="16">
<SymbolIcon Symbol="ZoomOut"/>
</Viewbox>
</Button>
<TextBlock Text="50%" Width="40"
HorizontalTextAlignment="Center"/>
<Button ToolTipService.ToolTip="Zoom in">
<Viewbox Width="16" Height="16">
<SymbolIcon Symbol="ZoomIn"/>
</Viewbox>
</Button>
</StackPanel>
</Grid>
</AppBarElementContainer>
<!-- end Zoom controls -->
<AppBarSeparator/>
<AppBarButton Label="Undo" Icon="Undo"/>
<AppBarButton Label="Redo" Icon="Redo"/>
<AppBarButton Label="Select all" Icon="SelectAll"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
열린 SplitButton이 있는 축소된 명령 모음 플라이아웃은 다음과 같습니다.
다음은 메뉴에 사용자 지정 확대/축소 UI가 있는 확장된 명령 모음 플라이아웃입니다.
보조 명령만 있는 상황에 맞는 메뉴 만들기
보조 명령만 있는 명령 모음 플라이아웃을 사용하여 메뉴 플라이아웃과 동일한 모양과 동작을 구현하는 상황에 맞는 메뉴를 만들 수 있습니다.
<Grid>
<Grid.Resources>
<!-- A command bar flyout with only secondary commands. -->
<CommandBarFlyout x:Name="ContextMenu">
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Copy" Icon="Copy"/>
<AppBarButton Label="Save" Icon="Save"/>
<AppBarButton Label="Print" Icon="Print"/>
<AppBarSeparator />
<AppBarButton Label="Properties"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</Grid.Resources>
<Image Source="Assets/image1.png" Width="300"
ContextFlyout="{x:Bind ContextMenu}"/>
</Grid>
다음은 컨텍스트 메뉴로 사용되는 명령 모음 플라이아웃입니다.
DropDownButton이 있는 CommandBarFlyout을 사용하여 표준 메뉴를 만들 수도 있습니다.
<CommandBarFlyout>
<AppBarButton Icon="Placeholder"/>
<AppBarElementContainer>
<DropDownButton Content="Mail">
<DropDownButton.Resources>
<!-- Override default brushes to make the DropDownButton
match other command bar elements. -->
<Style TargetType="DropDownButton">
<Setter Property="Height" Value="38"/>
</Style>
<SolidColorBrush x:Key="ButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushChecked"
Color="Transparent"/>
</DropDownButton.Resources>
<DropDownButton.Flyout>
<CommandBarFlyout Placement="BottomEdgeAlignedLeft">
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Icon="MailReply" Label="Reply"/>
<AppBarButton Icon="MailReplyAll" Label="Reply all"/>
<AppBarButton Icon="MailForward" Label="Forward"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</DropDownButton.Flyout>
</DropDownButton>
</AppBarElementContainer>
<AppBarButton Icon="Placeholder"/>
<AppBarButton Icon="Placeholder"/>
</CommandBarFlyout>
다음은 명령 모음 플라이아웃의 단추 드롭다운 메뉴입니다.
텍스트 컨트롤에 대한 명령 모음 플라이아웃
TextCommandBarFlyout은 텍스트를 편집하는 명령을 포함하고 있는 특수한 명령 모음 플라이아웃입니다. 마우스 오른쪽 단추를 클릭하거나 텍스트를 선택하면 각 텍스트 컨트롤은 자동으로 TextCommandBarFlyout을 상황에 맞는 메뉴로 표시합니다. 텍스트 명령 모음 플라이아웃은 관련 명령만 표시하도록 선택한 텍스트에 맞게 조정됩니다.
다음은 선택한 텍스트의 텍스트 명령 모음 플라이아웃입니다.
다음은 보조 명령을 보여 주는 확장된 텍스트 명령 모음 플라이아웃입니다.
사용 가능한 명령
다음 표는 TextCommandBarFlyout에 포함된 명령과 각 명령이 표시되는 시기를 보여줍니다.
| 명령 | Shown... |
|---|---|
| Bold | 텍스트 컨트롤이 읽기 전용이 아닌 경우(RichEditBox만 해당) |
| 이탤릭체 | 텍스트 컨트롤이 읽기 전용이 아닌 경우(RichEditBox만 해당) |
| 밑줄 | 텍스트 컨트롤이 읽기 전용이 아닌 경우(RichEditBox만 해당) |
| Proofing | IsSpellCheckEnabled가 true이고 철자가 잘못된 텍스트를 선택한 경우 |
| 잘라내기 | 텍스트 컨트롤이 읽기 전용이 아니고 텍스트를 선택한 경우 |
| 복사 | 텍스트를 선택한 경우 |
| 붙여넣기 | 텍스트 컨트롤이 읽기 전용이 아니고 클립보드에 콘텐츠가 있는 경우 |
| 실행 취소 | 실행 취소할 수 있는 작업이 있는 경우 |
| 모두 선택 | 텍스트를 선택할 수 있는 경우 |
사용자 지정 명령 모음 플라이아웃
TextCommandBarFlyout은 사용자 지정할 수 없으며, 각 텍스트 컨트롤에 의해 자동으로 관리됩니다. 그러나 기본 TextCommandBarFlyout을 사용자 지정 명령으로 바꿀 수 있습니다.
- 선택한 텍스트에 표시되는 기본 TextCommandBarFlyout을 바꾸려면 사용자 지정 CommandBarFlyout(또는 다른 플라이아웃 형식)을 만들어서 SelectionFlyout 속성에 할당하면 됩니다. SelectionFlyout을 null로 설정하면 선택 시 어떤 명령도 표시되지 않습니다.
- 상황에 맞는 메뉴로 표시되는 기본 TextCommandBarFlyout을 바꾸려면 텍스트 컨트롤의 ContextFlyout 속성에 사용자 지정 CommandBarFlyout(또는 다른 플라이아웃 형식)을 할당합니다. ContextFlyout을 null로 설정하면 TextCommandBarFlyout 대신 이전 버전의 텍스트 컨트롤에 표시된 메뉴 플라이아웃이 표시됩니다.
빠른 해제
메뉴, 상황에 맞는 메뉴 및 기타 플라이아웃 등의 빠른 해제 컨트롤은 해제될 때까지 키보드 및 게임 패드 포커스를 임시 UI 내에 트래핑합니다. 이 동작에 대한 시각 신호를 제공하기 위해 Xbox의 빠른 해제 컨트롤은 범위를 벗어난 UI의 가시성을 줄이는 오버레이를 그립니다. 이 동작은 LightDismissOverlayMode 속성으로 수정할 수 있습니다. 기본적으로 임시 UI는 Xbox(자동)에 빠른 해제 오버레이를 그리지만 다른 디바이스 패밀리에는 그리지 않습니다. 오버레이를 항상 켜짐 또는 항상 꺼짐으로 강제 적용할 수 있습니다.
<CommandBarFlyout LightDismissOverlayMode="Off" /> >
샘플 코드 가져오기
- WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤 표시
- XAML 명령 샘플
관련된 문서
Windows developer