메뉴 및 상황에 맞는 메뉴

  • 아티클

메뉴 및 상황에 맞는 메뉴는 모양과 포함할 수 있는 항목이 유사합니다. 둘 다 명령 또는 옵션의 구성 목록을 표시하며, 필요할 때까지 숨겨 공간을 절약합니다. 그러나 이러한 항목을 만드는 데 사용해야 하는 항목 및 사용자가 액세스하는 방법 등의 차이점이 있습니다.

Example of a typical context menu

올바른 컨트롤인가요?

메뉴 및 바로 가기 메뉴는 명령을 구성하며, 필요할 때까지 명령을 숨겨 공간을 절약합니다. 알림 또는 확인 요청과 같은 임의의 콘텐츠를 표시하려면 대화 상자 또는 플라이아웃을 사용합니다.

특정 명령이 자주 사용되고 사용 가능한 공간이 있다면 사용자가 메뉴를 사용하지 않고도 이용할 수 있도록 해당 요소에 직접 배치할 수 있습니다.

메뉴 또는 컨텍스트 메뉴는 언제 사용해야 하나요?

  • 호스트 요소가 단추 또는 주 역할이 추가 명령을 제공하는 것인 다른 명령 요소인 경우 메뉴를 사용합니다.
  • 호스트 요소가 다른 기본 용도(예: 텍스트 또는 이미지 표시)가 있는 다른 유형의 요소인 경우에 컨텍스트 메뉴를 사용합니다.

잘라내기, 복사 및 붙여넣기 등의 명령을 텍스트 또는 이미지 요소에 추가하려면 메뉴 대신 바로 가기 메뉴를 사용합니다. 이 시나리오에서 텍스트 요소의 주 역할은 텍스트 표시 및 편집입니다. 잘라내기, 복사 및 붙여넣기 등의 추가 명령은 보조 역할이므로 상황에 맞는 메뉴에 포함됩니다.

Example of context menu in photo gallery

상황에 맞는 메뉴

바로 가기 메뉴의 특성은 다음과 같습니다.

  • 단일 요소에 연결되고 보조 명령을 표시합니다.
  • 마우스 오른쪽 단추를 클릭하거나 이와 동등한 작업(예: 손가락으로 길게 누르기)을 통해 호출됩니다.
  • 그 ContextFlyout 속성을 통해 요소와 연결됩니다.

바로 가기 메뉴에 일반 명령(예: 복사, 잘라내기, 붙여넣기, 삭제, 공유 또는 텍스트 선택 명령)이 포함되는 경우 명령 모음 플라이아웃을 사용하고 이러한 일반 명령을 기본 명령으로 그룹화하여 바로 가기 메뉴에서 단일 가로 행으로 표시됩니다.

바로 가기 메뉴에 일반 명령이 포함되지 않는 경우 명령 모음 플라이아웃 또는 메뉴 플라이아웃을 사용하여 바로 가기 메뉴를 표시할 수 있습니다. CommandBarFlyout는 MenuFlyout보다 많은 기능을 제공하며, 원하는 경우 보조 명령만 사용하여 동일한 동작을 수행하고 MenuFlyout을 찾을 수 있기 때문에 이를 사용하는 것이 좋습니다.

메뉴의 특징은 다음과 같습니다.

  • 항상 표시되는 단일 진입점(예: 화면 맨 위의 파일 메뉴)이 있습니다.
  • 일반적으로 단추 또는 부모 메뉴 항목에 연결됩니다.
  • 마우스 왼쪽 단추를 클릭하여(또는 이와 동등한 작업, 예: 손가락으로 길게 누르기) 호출됩니다.
  • 해당 Flyout 또는 FlyoutBase.AttachedFlyout 속성을 통해 요소와 연결되거나, 앱 창의 맨 위에 있는 메뉴 막대에 그룹화됩니다.

추가 명령 표시가 기본 역할인 명령 요소(예: 버튼)를 호출하면 메뉴 플라이아웃을 사용하여 단일 최상위 메뉴를 호스팅하여 캔버스 UI 요소에 연결된 플라이아웃으로 인라인으로 표시됩니다. 각 MenuFlyout은 메뉴 항목 및 하위 메뉴를 호스트할 수 있습니다. 더 많은 조직이나 그룹이 필요할 수 있는 앱의 경우 가로 행에 여러 최상위 메뉴 집합을 표시하는 빠르고 간단한 방법으로 메뉴 모음을 사용합니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 일반적으로 WinUI 2를 사용하는 UWP 앱에 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 CommandBarFlyout 및 MenuBar 컨트롤은 Windows UI 라이브러리 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이러한 컨트롤용 API는 Windows.UI.Xaml.Controls 및 Microsoft.UI.Xaml.Controls 네임스페이스에 모두 존재합니다.

최신 WinUI 2를 사용하여 모든 컨트롤에 대한 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이러한 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />