.NET MAUI 데스크톱 앱에서 상황에 맞는 메뉴 표시
오른쪽 클릭 메뉴라고도 하는 상황에 맞는 메뉴는 클릭할 컨트롤과 관련된 상황에 맞는 명령을 제공합니다. .NET 다중 플랫폼 앱 UI(.NET MAUI)에서는 Mac Catalyst 및 Windows에서 Element파생되는 모든 컨트롤에 상황에 맞는 메뉴를 추가할 수 있습니다. 여기에는 모든 페이지, 레이아웃 및 보기가 포함됩니다.
상황에 맞는 메뉴는 다음 자식으로 MenuFlyout구성할 수 있는 로 정의됩니다.
MenuFlyoutItem는 클릭할 수 있는 메뉴 항목을 나타냅니다.MenuFlyoutSubItem는 클릭할 수 있는 하위 메뉴 항목을 나타냅니다.MenuFlyoutSeparator메뉴의 항목을 구분하는 가로줄입니다.
MenuFlyoutSubItemMenuFlyoutItem에서 파생되며, 이 파생은 .에서 MenuItem파생됩니다. MenuItem 는 메뉴 항목의 모양과 동작을 지정할 수 있는 여러 속성을 정의합니다. 메뉴 항목 또는 하위 항목의 모양은 및 IconImageSource 속성을 설정Text하여 정의할 수 있습니다. 메뉴 항목 또는 하위 항목에 대한 응답은 , Command및 CommandParameter 속성을 설정Clicked하여 정의할 수 있습니다. 메뉴 항목에 대한 자세한 내용은 표시 메뉴 항목을 참조 하세요.
Warning
현재 Mac Catalyst에서는 Entry 상황에 맞는 메뉴가 지원되지 않습니다.
상황에 맞는 메뉴 항목 만들기
MenuFlyout 에서 파생되는 모든 컨트롤의 연결된 속성에 개체를 추가할 FlyoutBase.ContextFlyout 수 있습니다Element. 사용자가 컨트롤을 마우스 오른쪽 단추로 클릭하면 포인터를 클릭한 위치에 상황에 맞는 메뉴가 표시됩니다.
다음 예제에서는 상황에 맞는 메뉴를 정의하는 방법을 보여 WebView 줍니다.
<WebView x:Name="webView"
Source="https://learn.microsoft.com/dotnet/maui"
MinimumHeightRequest="400">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Go to docs repo"
Clicked="OnWebViewGoToRepoClicked"
CommandParameter="docs" />
<MenuFlyoutItem Text="Go to engineering repo"
Clicked="OnWebViewGoToRepoClicked"
CommandParameter="eng" />
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</WebView>
이 예제에서 상황에 맞는 메뉴는 다음 두 개의 메뉴 항목을 정의합니다.
메뉴 항목을 클릭하면 OnWebViewGoToRepoClicked 이벤트 처리기가 실행됩니다.
void OnWebViewGoToRepoClicked(object sender, EventArgs e)
{
MenuFlyoutItem menuItem = sender as MenuFlyoutItem;
string repo = menuItem.CommandParameter as string;
string url = repo == "docs" ? "docs-maui" : "maui";
webView.Source = new UrlWebViewSource { Url = $"https://github.com/dotnet/{url}" };
}
OnWebViewGoToRepoClicked 이벤트 처리기는 클릭한 개체의 CommandParameter MenuFlyoutItem 속성 값을 검색하고 해당 값을 사용하여 탐색하는 URL을 WebView 작성합니다.
Warning
현재 런타임에 항목을 추가하거나 항목을 MenuFlyout 제거할 수 없습니다.
바로 가기 키를 통해 상황에 맞는 메뉴 항목을 호출할 수 있도록 바로 가기 키를 상황에 맞는 메뉴 항목에 키보드 가속기를 추가할 수 있습니다. 자세한 내용은 키보드 가속기를 참조 하세요.
하위 메뉴 항목 만들기
하위 메뉴 항목은 다음 항목에 하나 이상의 MenuFlyoutSubItem 개체를 추가하여 상황에 맞는 메뉴에 MenuFlyout추가할 수 있습니다.
<Label x:Name="label"
Text="Right-click to choose color">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Black"
Clicked="OnLabelClicked"
CommandParameter="Black" />
<MenuFlyoutSubItem Text="Light">
<MenuFlyoutItem Text="Blue"
Clicked="OnLabelClicked"
CommandParameter="LightBlue" />
<MenuFlyoutItem Text="Coral"
Clicked="OnLabelClicked"
CommandParameter="LightCoral" />
<MenuFlyoutItem Text="Cyan"
Clicked="OnLabelClicked"
CommandParameter="LightCyan" />
</MenuFlyoutSubItem>
<MenuFlyoutSubItem Text="Dark">
<MenuFlyoutItem Text="Blue"
Clicked="OnLabelClicked"
CommandParameter="DarkBlue" />
<MenuFlyoutItem Text="Cyan"
Clicked="OnLabelClicked"
CommandParameter="DarkCyan" />
<MenuFlyoutItem Text="Magenta"
Clicked="OnLabelClicked"
CommandParameter="DarkMagenta" />
</MenuFlyoutSubItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Label>
이 예제에서 상황에 맞는 메뉴는 각각 세 개의 메뉴 항목이 포함된 메뉴 항목과 두 개의 하위 메뉴를 정의합니다.
메뉴 항목에 아이콘 표시
MenuFlyoutItem 속성을 MenuFlyoutSubItem 상속 IconImageSource MenuItem합니다. 그러면 상황에 맞는 메뉴 항목의 텍스트 옆에 작은 아이콘이 표시될 수 있습니다. 이 아이콘은 이미지 또는 글꼴 아이콘일 수 있습니다.
Warning
Mac Catalyst는 상황에 맞는 메뉴 항목에 아이콘 표시를 지원하지 않습니다.
다음 예제에서는 메뉴 항목의 아이콘이 글꼴 아이콘을 사용하여 정의되는 상황에 맞는 메뉴를 보여 줍니다.
<Button Text="▶️ Play"
WidthRequest="80">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Pause"
Clicked="OnPauseClicked">
<MenuFlyoutItem.IconImageSource>
<FontImageSource Glyph="⏸"
FontFamily="Arial" />
</MenuFlyoutItem.IconImageSource>
</MenuFlyoutItem>
<MenuFlyoutItem Text="Stop"
Clicked="OnStopClicked">
<MenuFlyoutItem.IconImageSource>
<FontImageSource Glyph="⏹"
FontFamily="Arial" />
</MenuFlyoutItem.IconImageSource>
</MenuFlyoutItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Button>
이 예제에서 상황에 맞는 메뉴는 Windows에서 아이콘과 텍스트를 표시하는 두 개의 메뉴 항목을 정의합니다.
글꼴 아이콘 표시에 대한 자세한 내용은 글꼴 아이콘 표시를 참조 하세요. .NET MAUI 프로젝트에 이미지를 추가하는 방법에 대한 자세한 내용은 .NET MAUI 앱 프로젝트에 이미지 추가를 참조하세요.
.NET MAUI