ContextMenu 개요

  • 아티클

ContextMenu 클래스는 컨텍스트별 Menu를 사용하여 기능을 노출하는 요소를 나타냅니다. 일반적으로 사용자는 마우스 오른쪽 단추를 클릭하여 UI(사용자 인터페이스)에 ContextMenu를 노출합니다. 이 항목에서는 ContextMenu 요소를 소개하고 XAML(Extensible Application Markup Language) 및 코드에서 사용하는 방법에 대한 예제를 제공합니다.

ContextMenu 컨트롤

ContextMenu는 특정 컨트롤에 연결되어 있습니다. ContextMenu 요소를 사용하면 Button과 같은 특정 컨트롤과 연결된 옵션이나 명령을 지정하는 항목 목록을 사용자에게 제공할 수 있습니다. 사용자가 컨트롤을 마우스 오른쪽 단추로 클릭하면 메뉴가 표시됩니다. 일반적으로 MenuItem을 클릭하면 하위 메뉴가 열리거나 애플리케이션에서 명령을 실행합니다.

ContextMenu 만들기

다음 예제에서는 하위 메뉴로 ContextMenu를 만드는 방법을 보여 줍니다. ContextMenu 컨트롤은 단추 컨트롤에 연결됩니다.

<Button Name="cmButton" Height="30">
  Button with Context Menu
  <Button.ContextMenu>
    <ContextMenu Name="cm" Opened="OnOpened" Closed="OnClosed" StaysOpen="true">
      <MenuItem Header="File"/>
      <MenuItem Header="Save"/>
      <MenuItem Header="SaveAs"/>
      <MenuItem Header="Recent Files">
        <MenuItem Header="ReadMe.txt"/>
        <MenuItem Header="Schedule.xls"/>
      </MenuItem>
    </ContextMenu>
  </Button.ContextMenu>
</Button>

btn = new Button();
btn.Content = "Created with C#";
contextmenu = new ContextMenu();
btn.ContextMenu = contextmenu;
mi = new MenuItem();
mi.Header = "File";
mia = new MenuItem();
mia.Header = "New";
mi.Items.Add(mia);
mib = new MenuItem();
mib.Header = "Open";
mi.Items.Add(mib);
mib1 = new MenuItem();
mib1.Header = "Recently Opened";
mib.Items.Add(mib1);
mib1a = new MenuItem();
mib1a.Header = "Text.xaml";
mib1.Items.Add(mib1a);
contextmenu.Items.Add(mi);
cv2.Children.Add(btn);

Dim btn As New Button()
Dim contextmenu As New ContextMenu()
Dim mi As New MenuItem()
Dim mia As New MenuItem()

btn.Background = Brushes.Red
btn.Height = 30
btn.Content = "Created with Visual Basic."

mi.Header = ("Item 1")
contextmenu.Items.Add(mi)
mia.Header = ("Item 2")
contextmenu.Items.Add(mia)

btn.ContextMenu = (contextmenu)
cv2.Children.Add(btn)

ContextMenu에 스타일 적용

Style 컨트롤을 사용하면 사용자 지정 컨트롤을 쓰지 않고도 ContextMenu의 모양과 동작을 크게 변경할 수 있습니다. 시각적 속성을 설정하는 것 외에 컨트롤의 파트에 스타일을 적용할 수도 있습니다. 예를 들어 속성을 사용하여 컨트롤 파트의 동작을 변경하거나, ContextMenu에 파트를 추가하거나 레이아웃을 변경할 수 있습니다. 다음 예제에서는 ContextMenu 컨트롤에 스타일을 추가하는 몇 가지 방법을 보여 줍니다.

첫 번째 예제는 스타일에서 현재 시스템 설정을 사용하는 방법을 보여 주는 SimpleSysResources라는 스타일을 정의합니다. 예제에서는 MenuHighlightBrushKey를 Background 색상으로, MenuTextBrushKey를 ContextMenu의 Foreground 색상으로 할당합니다.

<Style x:Key="SimpleSysResources" TargetType="{x:Type MenuItem}">  
  <Setter Property = "Background" Value=
    "{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}"/>  
  <Setter Property = "Foreground" Value=
    "{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>  
</Style>

다음 예제에서는 Trigger 요소를 사용하여 ContextMenu에서 발생한 이벤트에 대한 응답으로 Menu의 모양을 변경합니다. 사용자가 메뉴 위로 마우스를 이동하면 ContextMenu 항목의 모양이 변경됩니다.

<Style x:Key="Triggers" TargetType="{x:Type MenuItem}">  
  <Style.Triggers>  
    <Trigger Property="MenuItem.IsMouseOver" Value="true">  
      <Setter Property = "FontSize" Value="16"/>  
      <Setter Property = "FontStyle" Value="Italic"/>  
      <Setter Property = "Foreground" Value="Red"/>  
    </Trigger>  
  </Style.Triggers>  
</Style>

참고 항목