SimpleMenu 및 SimpleMenuItem

메뉴는 명령 및 이벤트 처리기와 연결된 요소를 계층 구조적으로 구성하는 항목 컨트롤입니다. Microsoft Expression Blend에서는 메뉴를 두 번 클릭한 다음 사각형과 같은 요소를 그려 메뉴에 콘텐츠를 넣을 수 있습니다. 개체 및 타임라인 패널에서 메뉴를 마우스 오른쪽 단추로 클릭한 다음 SimpleMenuItem 추가를 클릭하여 컬렉션에 개별 항목을 추가하거나 데이터에 ItemsSource 바인딩을 클릭하여 데이터 원본에서 MenuItem 요소 컬렉션을 생성할 수도 있습니다. 두 번째 수준 메뉴 항목을 추가하려면 개체 및 타임라인 패널에서 메뉴 항목을 마우스 오른쪽 단추로 클릭한 다음 SimpleMenuItem 추가를 클릭하거나 자산 패널의 스타일 범주에서 사용자 지정 메뉴 항목을 추가합니다.

개체 및 타임라인 패널에서 메뉴 항목을 마우스 오른쪽 단추로 클릭한 다음 텍스트 편집를 클릭하여 메뉴 항목의 텍스트를 편집하거나 메뉴 항목을 두 번 클릭하고 컨트롤을 그려 메뉴 항목을 활성화할 수 있습니다. 아트보드에서 메뉴 항목의 확장된 자식 메뉴 항목을 보려면 개체 및 타임라인 패널에서 부모 메뉴 항목을 마우스 오른쪽 단추로 클릭한 다음 MenuItem 확장을 클릭합니다.

두 항목과 구분 기호가 추가된 후 SimpleMenu 컨트롤의 아트보드 보기

컨트롤 템플릿 분석

SimpleMenu 컨트롤 템플릿은 다음 항목으로 구성됩니다.

• Grid 패널 - 메뉴 내에 여러 자식 요소를 넣는 데 사용됩니다. 또한 Grid를 사용하면 응용 프로그램 UI(사용자 인터페이스) 디자이너가 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다.

• Border 요소 이 템플릿이 적용되는 메뉴 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

• StackPanel Grid 요소 내에 포함되며 메뉴 항목의 레이아웃을 지정하는 데 사용됩니다. 기본적으로 StackPanel의 Orientation 속성은 Horizontal로 설정되어 있습니다.

SimpleMenuItem 컨트롤 템플릿은 다음 항목으로 구성됩니다.

• Grid 패널 메뉴 항목 내에 여러 자식 요소를 넣는 데 사용됩니다. 또한 Grid를 사용하면 디자이너가 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다. 이 Grid 패널에서는 크기 공유의 개념을 사용하므로 각 메뉴 항목의 너비를 메뉴에 있는 다른 모든 메뉴 항목과 일치시킬 수 있습니다.

• Icon으로 명명된 ContentPresenter 요소 이 템플릿이 적용되는 메뉴 항목의 Icon 속성에 바인딩됩니다.

• GlyphPanel로 명명된 Grid 패널 메뉴 항목이 선택 가능한 항목인 경우 선택 표시를 나타내는 데 사용됩니다. 기본적으로 Glyph 요소는 축소되어 있지만 IsChecked 트리거에 의해 표시됩니다.

• HeaderHost로 명명된 ContentPresenter 요소 이 템플릿이 적용되는 메뉴 항목의 Header 속성에 바인딩됩니다. 이 바인딩은 HeaderHost 요소의 ContentSource 속성에서 설정됩니다.

• ArrowPanel로 명명된 Grid 패널 메뉴 항목을 확장하는 방법을 제공하는 데 사용됩니다. 기본적으로 ArrowPanel은 축소되어 있지만 Role = SubmenuHeader 트리거에 의해 표시됩니다. 이 트리거는 하위 메뉴 헤더(자식 메뉴 항목이 있는 두 번째 수준 또는 하위 수준 메뉴 항목)로 메뉴 항목을 식별합니다.

• SubMenuPopup으로 명명된 Popup 요소 기존의 자식 메뉴 항목을 저장하는 데 사용됩니다. 이러한 자식 메뉴 항목은 ItemsHost로 표시되는 StackPanel 요소에 배치되므로 이 메뉴 항목에서 자식 메뉴 항목을 배치할 위치를 알 수 있습니다. 메뉴 항목의 정렬을 변경하려면 개체 및 타임라인 패널에서 StackPanel 요소를 마우스 오른쪽 단추로 클릭하고 레이아웃 형식 변경을 가리킨 다음 패널을 선택하여 WrapPanel과 같은 다른 레이아웃 패널을 사용할 수 있습니다.

  개체 보기: SimpleMenu 컨트롤(왼쪽) 및 SimpleMenuItem 컨트롤(오른쪽)의 기본 파트(템플릿)

  

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 메뉴 항목에 대한 템플릿에서 IsChecked 속성이 True이면 템플릿이 적용되는 메뉴 항목이 선택 가능하여 트리거에 의해 GlyphPanel 요소가 표시됩니다.

브러시 사용

SimpleMenu 및 SimpleMenuItem 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

• 메뉴의 Background 속성은 LightBrush를 사용하여 설정되며, IsEnabled가 False인 경우에는 DisabledBackgroundBrush를 사용하여 설정됩니다.

• 메뉴의 BorderBrush 속성은 NormalBorderBrush를 사용하여 설정되며, IsEnabled가 False인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

• SubMenuBorder 요소의 Background 속성은 WindowBackgroundBrush를 사용하여 설정됩니다.

• SubMenuBorder 요소의 BorderBrush 속성은 SolidBorderBrush를 사용하여 설정됩니다.

또한 템플릿에서 시스템 색에 대한 바인딩을 사용하여 컨트롤에서 시스템 기본값을 사용하도록 할 수 있습니다. 대부분의 경우 이렇게 브러시를 변경하여 고유한 디자인을 만들 수 있습니다. 시스템 색을 설정하는 트리거를 편집하여 이 작업을 수행할 수 있습니다.

모범 사례 및 디자인 지침

• 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 컨트롤을 사용합니다. 기본적으로 Expression Blend에서는 Grid 컨트롤과 같은 레이아웃 패널을 찾아 활성화함으로써 아트보드에 추가되는 새 요소가 해당 레이아웃 패널의 자식 요소가 되도록 합니다.

• Popup 컨트롤은 다른 모든 컨트롤 위에서 렌더링됩니다. 일반적으로 이 컨트롤은 메뉴에 사용하는 것이 좋습니다. 예를 들어 Popup 자체에는 Placement 속성을 "Right"로 설정하여 부모 컨트롤에서의 오프셋을 설정할 수 있는 논리가 있습니다. 메뉴의 경우 메뉴의 확장은 부모 컨트롤에 대한 바인딩에 의해 제어됩니다. 메뉴를 제대로 확장하려면 이 바인딩을 유지해야 합니다.

• 메뉴 항목 템플릿의 루트 Grid 패널에서는 크기 공유의 개념을 사용하므로 각 메뉴 항목의 너비를 메뉴에 있는 다른 모든 메뉴 항목과 일치시킬 수 있습니다. 이 동작을 변경하려면 XAML 보기에서 SharedSizeGroup 속성을 수정해야 하는데, Expression Blend가 속성 패널에 이 속성을 표시하지 않기 때문입니다. 대부분의 경우에는 메뉴의 크기가 적절하게 조정되므로 SharedSizeGroup 속성을 수정할 필요가 없습니다. 열이나 메뉴 항목의 콘텐츠를 다시 정렬하는 대신 메뉴 항목 템플릿의 루트 Grid 패널로 요소를 끌어 메뉴 항목의 모양을 변경하는 것이 가장 좋은 방법입니다.

• 일부 메뉴 항목 템플릿 트리거에서는 Role이라는 속성을 사용합니다. Role은 메뉴 계층 구조에서 메뉴 항목의 수준에 따라 설정됩니다. 메뉴 항목 템플릿을 수정하면 역할 기반 트리거를 유지해야 할 수 있습니다. 실제 시스템 MenuItem 컨트롤에서 사용하는 템플릿은 SimpleMenuItem보다 훨씬 더 복잡합니다. MenuItem 컨트롤 템플릿에서는 스타일을 사용하여 메뉴 항목의 역할을 기반으로 하는 서로 다른 컨트롤 템플릿 사이를 전환합니다. SimpleMenuItem에서는 단일 템플릿을 사용하여 이 작업을 수행하므로 더 쉽게 편집할 수 있습니다.

• SimpleMenuItem 템플릿을 편집하려면 리소스 패널에서 SimpleMenuItem 스타일 옆에 있는 리소스 편집 단추를 클릭합니다. 그런 다음 스타일 편집 모드에서 개체 및 타임라인 패널의 Style을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집이나 복사본 편집을 클릭합니다.

• 명령에 메뉴 항목을 연결하는 방법에 대한 자세한 내용은 MSDN의 Menu 개요를 참조하십시오.