The WPF Menu control

윈도우 응용프로그램의 가장 일반적인 부분이 메뉴로, 응용프로그램에서 일반적으로 하나만 있을 수 있기때문에 메인메뉴라고도 합니다. 메뉴는 많은 옵션을 제공하고, 아주 작은 공간을 차지하기 때문에 실용적입니다. MS가 구형 메뉴와 툴바를 리본으로 변경하는 것을 밀고있지만, 메뉴는 여전히 많은 개발자들의 도구상자에서 역할을 하고있습니다.

WPF는 "Menu"라고 불리는 메뉴를 만드는 컨트롤을 제공합니다. 아이템을 추가하는 것은 아주 간단합니다 - 단순히 MenuItem 항목을 추가만 하면, 일반 프로그램에서 많이 보는 계층적 메뉴가 가능한 부메뉴를 생성할 수 있습니다. 메뉴를 사용하는 예제로 바로 이동해 보겠습니다.

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuSample" Height="200" Width="200">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_New" />
                <MenuItem Header="_Open" />
                <MenuItem Header="_Save" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

대부분의 윈도우 응용프로그래밍에서와 같이, 생성된 메뉴는 WPF의 유연성을 유지한채 윈도우의 상단에 위치합니다. 그러므로, 메뉴 컨트롤은 당신이 원하는 폭과 넓이로, 원하는 어디든 배치가 가능합니다.

나는 4개의 서브메뉴와 구분자를 가지는 하나의 메인메뉴를 정의하였다. 나는 item의 라벨을 정의하기위해 Header 속성을 사용하였기때문에, 당신은 각 라벨의 첫글자앞에 underscore를 표시해주어야 하며, 이는 WPF에 글자가 hot key로써 역할을 한다는 것을 알려주는 것으로, Alt 키와 함께 주어진 글 알파벳을 눌러 해당 메뉴를 활성화할 수 있음을 의미한다. 이것은 최상위 메뉴에서 계층적으로 내려가면서 사용가능한 것으로, 예를들면Alt와 함께 F를 누르고 N을 누르면, New 아이템이 활성화된다.

아이콘과 체크상자

메뉴 아이템의 두가지 일반적인 속성은 아이콘으로 해당 메뉴가 무엇을 하는지 쉽게 정의할 수 있는 아이콘과, 특정 속성을 on, off할 수 있는 선택적인 메뉴 아이템을 가지는 능력이다. WPF 메뉴 아이템은 두가지 모두를 제공하며, 이것은 사용하기 아주 쉽다

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuIconCheckableSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuIconCheckableSample" Height="150" Width="300">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Tools">
                <MenuItem Header="_Manage users">
                    <MenuItem.Icon>
                        <Image Source="/WpfTutorialSamples;component/Images/user.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Show groups" IsCheckable="True" IsChecked="True" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

이번 예제에서는 최상위 메뉴에 2번째 메뉴를 생성하였고, 2개의 아이템을 추가하였다. 하나는 자체적으로 제공하는 표준 이미지를 가지는 것으로 Icon 속성을 사용하였고, 다른 하나는 사용자가 해당항목을 선택적으로 체크할 수 있는 것으로 IsCheckable 속성을 사용하였다. IsChecked 속성은 선택한 것을 기본 속성으로 하게하였다. 이는 코드를 통해서 메뉴가 선택되었는지 아닌지는 읽을 수 있는 속성과 동일하다.

Click 이벤트의 처리

사용자가 메뉴 아이템을 클릭하면, 당신은 무언가 실행되게 하여야 한다. 가장 간편한 방법은 클릭 이벤크 핸들러를 메뉴아이템에 간단히 추가하는것으로, 다음과 같다

<MenuItem Header="_New" Click="mnuNew_Click" />

이어서 코드 부분에서 당신은 mnuNew_Click 메서드를 다음과 같이 구현할 필요가 있다

private void mnuNew_Click(object sender, RoutedEventArgs e)
{
	MessageBox.Show("New");
}

이것은 단순한 응용 프로그램이나 프로토 타이핑에 충분하지만 WPF 방식은 이런것들을 위해 Command를 사용한다

키보드 단축키와 Command

위에서 한것 처럼 메뉴 아이템의 Click 이벤트를 쉽게 처리 할 수 ​​있지만, 더 일반적인 방법은 WPF 명령어를 사용하는 것이다. 명령어의 사용 및 생성에 대한 많은 이론이 있으나, 특별히 메뉴와 툴바의 조합에 있어서 WPF를 사용할때 몇가지 이점을 설명하고자 한다

우선, 여러위치에 동일한 코드를 구현하는 것없이 툴바, 메뉴, 컨텍스트가 동일한 작업을 수행할 수 있다. 또한 WinForms과 달리 WPF는 단축키를 자동으로 인식하지 않으므로 단축키를 쉽게처리 할 수 있다. 메뉴 아이템은 수동적으로 처리해주어야 한다.

하지만, 명령어를 사용할때, WPF는 모든 뒤로써 키보드 단축키에 자동적으로 응답할것이다. 아이템 문자(Header) 또한 자동으로 설정되며(필요시 덮어쓸수있음), InputGestureText는 특정 항목 호출에 어떤 단축키가 사용되었는지를 알려준다. Menu에서 WPF 명령어의 사용예제는 다음과 같다.

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuWithCommandsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuWithCommandsSample" Height="200" Width="300">
    <Window.CommandBindings>
        <CommandBinding Command="New" CanExecute="NewCommand_CanExecute" Executed="NewCommand_Executed" />
    </Window.CommandBindings>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Command="New" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Command="Cut" />
                <MenuItem Command="Copy" />
                <MenuItem Command="Paste" />
            </MenuItem>
        </Menu>

        <TextBox AcceptsReturn="True" Name="txtEditor" />
    </DockPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Common_interface_controls
{
	public partial class MenuWithCommandsSample : Window
	{
		public MenuWithCommandsSample()
		{
			InitializeComponent();
		}

		private void NewCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}

		private void NewCommand_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			txtEditor.Text = "";
		}
	}
}

완전히 명확하지는 않지만 Command를 사용하여 우리는 방금 쉽게 많은 기능들을 얻었습니다. 메뉴 항목의 키보드 단축기, 문자, InputGestureText와 활성 컨트롤과 그의 상태에 따라 메뉴 항목이 자동적으로 활성/비활성화되는 기능 등. 이 경우 , 선택된 문자가 없기 때문에 잘라내기(Cut) 와 복사하기(Copy)는 비활성화되고, 붇여넣기(Paste)는 클립보드가 비어있지 않기 때문에 활성화된다.

그리고 WPF는 특정 컨트롤과 결합하여 특정 명령을 처리하는 방법을 알고 있기 때문에 ( 이 경우 텍스트 입력 컨트롤과 연결된 Cut/Copy/Paste 명령), 각 Command의 Execute 이벤트를 처리하지 않아도 즉시 동작이 가능하다. 하지만, New Command에 대해서는 WPF가 사용자가 원하는 것을 추측 할 방법이 없기 때문에 New Command에 대해서는 Execute 이벤트를 처리해야합니다. 이 작업은 윈도우의 CommandBindings 을 사용하여 수행하며 Command에 대한 장에서 자세하게 설명합니다.

요약

WPF 메뉴 컨트롤은 쉽고 빠르며 복잡한 메뉴 계층도 간단하게 만들 수 있으며 WPF Command와 결합 하면, 많은 기능을 쉽게 얻을 수 있습니다.