프로그램 개발/WPF: Style&Template

Menu②

(ㅇㅅㅎ) 2022. 6. 7. 15:37
728x90
반응형

 

 안녕하세요, 이번 글에서는 지난 글에 이어서 Microsoft에서 제공하는 WPF [Menu의 스타일 및 템플릿] 예제를 톺아보겠습니다. Menu Style의 경우 Menu, Separator, MenuItemRole ControlTemplate(TopLevelHeader, TopLevelItem, SubmenuItem, SubmenuHeader), MenuItem, MenuScrollViewer 순서로 나눠져 있습니다. 이번 글에서는 MenuItemRole ControlTemplate의 TopLevelHeader와 TopLevelItem에 대해서 보도록 하겠습니다.

 

 

 

MenuItemRole

모두 MenuItem이나 Role이 다르다

 MenuItem에 포함될 수 있는 서로 다른 역할을 정의합니다. 값으로는 TopLevelHeader, TopLevelItem, SubmenuHeader와 SubmenuItem이 있습니다. 예제에서는 각 Role을 ControlTemplate로 따로 정의한 뒤 사용했습니다. 

👀 Template에 대해서 좀 더 아시고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

 

 

TopLevelHeader 구성

 TopLevelHeader는 최상위 메뉴의 헤더입니다. 예제에서는 Grid 내부에 TopLevelHeader를 나타내는 ContentPresenter와 Submenu들을 나타내는 Popup으로 구성하고 있습니다.

 

Border(Border, SubmenuBorder)

 다른 요소의 주위에 윤곽선, 배경 또는 둘 다를 그립니다.

⭐ Border 속성

더보기 
<Border x:Name="Border">
  ...
      <Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="1" Background="{DynamicResource MenuPopupBrush}">
        <Border.BorderBrush>
          <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
        </Border.BorderBrush>
        ...
      </Border>
  ...
</Border>

 

x:Name

 Border에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

SnapsToDevicePixels

 렌더링 하는 동안 Border의 렌더링에 디바이스 관련 픽셀 스냅(Pixel Snap)을 사용할지 여부를 설정합니다. 픽셀 스냅을 사용하면 true이고, 그렇지 않으면 false(기본값)로 설정합니다.

 

BorderThickness

 Border의 윤곽선 두께를 설정합니다. 

 

Background

 Border의 배경색을 설정합니다. 예제에서는 미리 정의한 MenuPopupBrush로 설정했습니다.

 

BorderBrush

 Border의 테두리 색을 설정합니다. 예제에서는 SolidColorBrush를 사용하여 미리 정의한 BorderMediumColor로 설정했습니다.

 

Grid

 열 및 행으로 구성되는 유연한 모눈 영역을 정의합니다.

 

ContentPresenter

 ContentControl의 내용을 표시합니다.

⭐ ContentPresenter 속성

더보기 
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />

 

Margin

 ContentPresenter의 외부 여백을 설정합니다. 예제에서는 4개(좌, 상, 우, 하)로 나누어서 설정했습니다.

 

ContentSource

 별칭을 자동으로 지정할 때 사용할 기본 이름을 설정합니다. 

 

RecognizesAccessKey

 ContentPresenter의 스타일에 AccessText가 사용되는지 여부를 설정합니다. AccessText가 사용되면 true이고, 그렇지 않으면 false(기본값)입니다.

 

Popup(Popup)

 Content가 포함된 Popup 창을 나타냅니다.

⭐ Popup 속성

더보기 
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
  ...
</Popup>

 

x:Name

 Popup에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Placement

 Popup이 열리는 방향을 설정합니다. 값으로는 Absolute, AbsolutePoint, Bottom, Center, Custom, Left 등이 있습니다.

👀 값에 대한 자세한 설명은 이 페이지를 참고하시길 바랍니다.

 

IsOpen

 Popup의 표시 여부를 설정합니다. 예제에서는 TemplateBinding을 사용하여 부모의 IsSubmenuOpen 값으로 설정했습니다.

 

AllowsTransparency

 Popup이 투명 Content를 포함할 수 있는지 여부를 설정합니다. 투명 Content를 포함할 수 있으면 true이고, 포함할 수 없으면 false(기본값)입니다.

 

Focusable

 Popup이 focus를 받을 수 있는지 여부를 설정합니다. focus를 받을 수 있으면 true이고, 받을 수 없으면 false입니다.

 

PopupAnimation

 Popup 열기 및 닫기에 대한 애니메이션을 설정합니다. 기본값은 None이며 다른 값으로는 Fade, Scroll, Slide가 있습니다.

👀 값에 대한 자세한 설명은 이 페이지를 참고하시길 바랍니다.

 

ScrollViewer

 표시 가능한 다른 요소를 포함할 수 있는 Scroll 가능한 영역을 나타냅니다.

⭐ ScrollViewer 속성

더보기 
<ScrollViewer CanContentScroll="True" Style="{StaticResource MenuScrollViewer}">
  ...
</ScrollViewer>

 

CanContentScroll

 IScrollInfo가 지원되는 경우 Content가 Scroll을 제어할 수 있는지 여부를 설정합니다. Content를 Scroll 할 수 있으면 true이고, 그렇지 않으면 false이다.

 

Style

 Style은 ScrollViewer에 속성, 리소스 및 이벤트 처리기를 공유할 수 있게 합니다. 예제에서는 미리 정의한 MenuScrollViewer로 설정했습니다.

 

StackPanel

 가로 또는 세로 방향으로 한 줄로 자식 요소를 정렬합니다.

⭐ StackPanel 속성

더보기 
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />

 

IsItemsHost

 ItemsControl에 의해 생성된 UI(사용자 인터페이스) 항목에 대한 컨테이너임을 나타내는 Panel 값을 설정합니다. 항목 호스트이면 true이고, 그렇지 않으면 false(기본값)입니다.

 

KeyboardNavigation.DirectionalNavigation

 이 속성이 설정된 요소의 자식에 대한 방향 탐색 동작을 설정합니다. 값으로는 Contained, Continue, Cycle, Local, None, Once가 있습니다.

👀 값에 대한 자세한 설명은 이 페이지를 참고하시면 됩니다.

 

 

 

TopLevelHeader 이벤트

 예제에서는 이벤트로 IsSuspendingPopupAnimation, IsHighlighted, AllowsTransparency, IsEnabled 변화를 Trigger로 표현하였습니다.

⭐ IsSuspendingPopupAnimation : 메뉴가 해당 Popup에 대한 애니메이션을 일시 중단하는지 여부입니다.

 

Triggers

<ControlTemplate.Triggers>
  <Trigger Property="IsSuspendingPopupAnimation" Value="true">
    <Setter TargetName="Popup" Property="PopupAnimation" Value="None" />
  </Trigger>
  <Trigger Property="IsHighlighted" Value="true">
    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
    <Setter Property="Background" TargetName="Border">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{StaticResource ControlLightColor}" />
              <GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
  </Trigger>
  <Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
    <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4" />
    <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3" />
  </Trigger>
  <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Foreground">
      <Setter.Value>
        <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
      </Setter.Value>
    </Setter>
  </Trigger>
</ControlTemplate.Triggers>

 Trigger는 어떤 조건이나 이벤트 등이 주어졌을 때 Control의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다. 예제에서는 아래와 같이 설정되었습니다.

  • IsSuspendingPopupAnimation의 값이 true일 때 Popup의 PopupAnimation을 None으로 변경합니다.
  • IsHighlighted의 값이 true일 때 Border의 BorderBrush 값을 Transparent로 변경하고 Border의 Background를 LinearGradientBrush를 사용하여 그라데이션 값으로 변경합니다.
  • Popup의 AllowsTransparency 값이 true일 때 SubmenuBorder의 CornerRadius을 "0,0,4,4"로 변경하고 SubmenuBorder의 Padding을 "0,0,0,3"으로 변경합니다.
  • IsEnabled의 값이 False일 때 Foreground를 DisabledForegroundColor로 변경합니다.

👀 그라데이션 색에 대해서 알고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

 

 

 

 

 

TopLevelItem 구성

 TopLevelItem은 명령을 호출할 수 있는 최상위 메뉴 항목입니다. 예제에서는 TopLevelItem을 나타내는 ContentPresenter를 Grid 내부에 구성하고 있습니다.

 

Border(Border)

 다른 요소의 주위에 윤곽선, 배경 또는 둘 다를 그립니다.

⭐ Border 속성

더보기 
<Border x:Name="Border">
  ...
</Border>

 

x:Name

 Border에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Grid

 열 및 행으로 구성되는 유연한 모눈 영역을 정의합니다.

 

ContentPresenter

 ContentControl의 내용을 표시합니다.

⭐ ContentPresenter 속성

더보기 
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />

 

Margin

 ContentPresenter의 외부 여백을 설정합니다. 예제에서는 4개(좌, 상, 우, 하)로 나누어서 설정했습니다.

 

ContentSource

 별칭을 자동으로 지정할 때 사용할 기본 이름을 설정합니다.

 

RecognizesAccessKey

 ContentPresenter의 스타일에 AccessText가 사용되는지 여부를 설정합니다. AccessText가 사용되면 true이고, 그렇지 않으면 false(기본값)입니다.

 

 

 

TopLevelItem 이벤트

 예제에서는 이벤트로 IsHighlighted와 IsEnabled 변화를 Trigger로 표현하였습니다.

 

Triggers

<ControlTemplate.Triggers>
  <Trigger Property="IsHighlighted" Value="true">
    <Setter Property="Background" TargetName="Border">
      <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{StaticResource ControlLightColor}" />
              <GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
  </Trigger>
  <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Foreground">
      <Setter.Value>
        <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
      </Setter.Value>
    </Setter>
  </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

 Trigger는 어떤 조건이나 이벤트 등이 주어졌을 때 Control의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다. 예제에서는 아래와 같이 설정되었습니다.

  • IsHighlighted의 값이 true일 때 Border의 Background를 그라데이션 색으로 변경합니다.
  • IsEnabled의 값이 false일 때 Foreground를 DisabledForegroundColor로 변경합니다.

👀 그라데이션 색에 대해서 알고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

 

 

 

 

 

전체 코드

더보기 
<!--#region 오류 방지 부족한 부분 추가 -->
<Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry>
<Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry>
<Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border x:Name="Border" BorderThickness="0" Background="Transparent">
                    <ContentPresenter x:Name="ContentContainer" HorizontalAlignment="Center" Margin="2" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="{StaticResource ControlLightColor}" />
                                            <GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--#endregion-->

<Style x:Key="{x:Type Menu}"
       TargetType="{x:Type Menu}">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Menu}">
        <Border BorderThickness="1">
          <Border.BorderBrush>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Border.BorderBrush>
          <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
              <GradientStop Color="{DynamicResource ControlLightColor}"
                            Offset="0" />
              <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1" />
            </LinearGradientBrush>
          </Border.Background>
          <StackPanel ClipToBounds="True"
                      Orientation="Horizontal"
                      IsItemsHost="True" />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="{x:Static MenuItem.SeparatorStyleKey}"
       TargetType="{x:Type Separator}">
  <Setter Property="Height"
          Value="1" />
  <Setter Property="Margin"
          Value="0,4,0,4" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Separator}">
        <Border BorderThickness="1">
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- TopLevelHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  <Border x:Name="Border">
    <Grid>
      <ContentPresenter Margin="6,3,6,3"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
      <Popup x:Name="Popup"
             Placement="Bottom"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             AllowsTransparency="True"
             Focusable="False"
             PopupAnimation="Fade">
        <Border x:Name="SubmenuBorder"
                SnapsToDevicePixels="True"
                BorderThickness="1"
                Background="{DynamicResource MenuPopupBrush}">
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ScrollViewer CanContentScroll="True"
                        Style="{StaticResource MenuScrollViewer}">
            <StackPanel IsItemsHost="True"
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
          </ScrollViewer>
        </Border>
      </Popup>
    </Grid>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="IsSuspendingPopupAnimation"
             Value="true">
      <Setter TargetName="Popup"
              Property="PopupAnimation"
              Value="None" />
    </Trigger>
    <Trigger Property="IsHighlighted"
             Value="true">
      <Setter TargetName="Border"
              Property="BorderBrush"
              Value="Transparent" />
      <Setter Property="Background"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{StaticResource ControlLightColor}" />
                <GradientStop Color="{StaticResource ControlMouseOverColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>

        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger SourceName="Popup"
             Property="AllowsTransparency"
             Value="True">
      <Setter TargetName="SubmenuBorder"
              Property="CornerRadius"
              Value="0,0,4,4" />
      <Setter TargetName="SubmenuBorder"
              Property="Padding"
              Value="0,0,0,3" />
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="False">
      <Setter Property="Foreground">
        <Setter.Value>
          <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
        </Setter.Value>
      </Setter>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<!-- TopLevelItem -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  <Border x:Name="Border">
    <Grid>
      <ContentPresenter Margin="6,3,6,3"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
    </Grid>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="IsHighlighted"
             Value="true">
      <Setter Property="Background"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{StaticResource ControlLightColor}" />
                <GradientStop Color="{StaticResource ControlMouseOverColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>

        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="False">
      <Setter Property="Foreground">
        <Setter.Value>
          <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
        </Setter.Value>
      </Setter>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<!-- SubmenuItem -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  <Border x:Name="Border"
          BorderThickness="1">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Icon" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Shortcut" />
        <ColumnDefinition Width="13" />
      </Grid.ColumnDefinitions>
      <ContentPresenter x:Name="Icon"
                        Margin="6,0,6,0"
                        VerticalAlignment="Center"
                        ContentSource="Icon" />
      <Border x:Name="Check"
              Width="13"
              Height="13"
              Visibility="Collapsed"
              Margin="6,0,6,0"
              BorderThickness="1">
        <Border.BorderBrush>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{DynamicResource BorderLightColor}"
                              Offset="0.0" />
                <GradientStop Color="{DynamicResource BorderDarkColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>

        </Border.BorderBrush>
        <Border.Background>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
              <GradientStopCollection>
                <GradientStop Color="{DynamicResource ControlLightColor}" />
                <GradientStop Color="{DynamicResource ControlMediumColor}"
                              Offset="1.0" />
              </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Border.Background>
        <Path x:Name="CheckMark"
              Width="7"
              Height="7"
              Visibility="Hidden"
              SnapsToDevicePixels="False"
              StrokeThickness="2"
              Data="M 0 0 L 7 7 M 0 7 L 7 0">
          <Path.Stroke>
            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
          </Path.Stroke>
        </Path>
      </Border>
      <ContentPresenter x:Name="HeaderHost"
                        Grid.Column="1"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
      <TextBlock x:Name="InputGestureText"
                 Grid.Column="2"
                 Text="{TemplateBinding InputGestureText}"
                 Margin="5,2,0,2"
                 DockPanel.Dock="Right" />
    </Grid>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="ButtonBase.Command"
             Value="{x:Null}" />
    <Trigger Property="Icon"
             Value="{x:Null}">
      <Setter TargetName="Icon"
              Property="Visibility"
              Value="Hidden" />
    </Trigger>
    <Trigger Property="IsChecked"
             Value="true">
      <Setter TargetName="CheckMark"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
    <Trigger Property="IsCheckable"
             Value="true">
      <Setter TargetName="Check"
              Property="Visibility"
              Value="Visible" />
      <Setter TargetName="Icon"
              Property="Visibility"
              Value="Hidden" />
    </Trigger>
    <Trigger Property="IsHighlighted"
             Value="true">
      <Setter Property="Background"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="Transparent"
                          Offset="0" />
            <GradientStop Color="{DynamicResource ControlMouseOverColor}"
                          Offset="1" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="BorderBrush"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource BorderMediumColor}"
                          Offset="0" />
            <GradientStop Color="Transparent"
                          Offset="1" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="false">
      <Setter Property="Foreground">
        <Setter.Value>
          <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
        </Setter.Value>
      </Setter>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
  <Border x:Name="Border"
          BorderThickness="1">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Icon" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Shortcut" />
        <ColumnDefinition Width="13" />
      </Grid.ColumnDefinitions>
      <ContentPresenter x:Name="Icon"
                        Margin="6,0,6,0"
                        VerticalAlignment="Center"
                        ContentSource="Icon" />
      <ContentPresenter x:Name="HeaderHost"
                        Grid.Column="1"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
      <TextBlock x:Name="InputGestureText"
                 Grid.Column="2"
                 Text="{TemplateBinding InputGestureText}"
                 Margin="5,2,2,2"
                 DockPanel.Dock="Right" />
      <Path Grid.Column="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 0 0 L 0 7 L 4 3.5 Z">
        <Path.Fill>
          <SolidColorBrush Color="{DynamicResource GlyphColor}" />
        </Path.Fill>
      </Path>
      <Popup x:Name="Popup"
             Placement="Right"
             HorizontalOffset="-4"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             AllowsTransparency="True"
             Focusable="False"
             PopupAnimation="Fade">
        <Border x:Name="SubmenuBorder"
                SnapsToDevicePixels="True"
                Background="{DynamicResource MenuPopupBrush}"
                BorderThickness="1">
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ScrollViewer CanContentScroll="True"
                        Style="{StaticResource MenuScrollViewer}">
            <StackPanel IsItemsHost="True"
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
          </ScrollViewer>
        </Border>
      </Popup>
    </Grid>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="Icon"
             Value="{x:Null}">
      <Setter TargetName="Icon"
              Property="Visibility"
              Value="Collapsed" />
    </Trigger>
    <Trigger Property="IsHighlighted"
             Value="true">
      <Setter Property="Background"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="Transparent"
                          Offset="0" />
            <GradientStop Color="{DynamicResource ControlMouseOverColor}"
                          Offset="1" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="BorderBrush"
              TargetName="Border">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource BorderMediumColor}"
                          Offset="0" />
            <GradientStop Color="Transparent"
                          Offset="1" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger SourceName="Popup"
             Property="AllowsTransparency"
             Value="True">
      <Setter TargetName="SubmenuBorder"
              Property="CornerRadius"
              Value="4" />
      <Setter TargetName="SubmenuBorder"
              Property="Padding"
              Value="0,3,0,3" />
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="false">
      <Setter Property="Foreground">
        <Setter.Value>
          <SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
        </Setter.Value>
      </Setter>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<!-- MenuItem Style -->
<Style x:Key="{x:Type MenuItem}"
       TargetType="{x:Type MenuItem}">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Style.Triggers>
    <Trigger Property="Role"
             Value="TopLevelHeader">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}" />
      <Setter Property="Grid.IsSharedSizeScope"
              Value="true" />
    </Trigger>
    <Trigger Property="Role"
             Value="TopLevelItem">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}" />
    </Trigger>
    <Trigger Property="Role"
             Value="SubmenuHeader">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}" />
    </Trigger>
    <Trigger Property="Role"
             Value="SubmenuItem">
      <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}" />
    </Trigger>
  </Style.Triggers>
</Style>
<!--ScrollViewer for a MenuItem-->
<MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter" />

<Style x:Key="MenuScrollViewer"
       TargetType="{x:Type ScrollViewer}"
       BasedOn="{x:Null}">
  <Setter Property="HorizontalScrollBarVisibility"
          Value="Hidden" />
  <Setter Property="VerticalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <Grid SnapsToDevicePixels="True">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Border Grid.Row="1"
                  Grid.Column="0">
            <ScrollContentPresenter Margin="{TemplateBinding Padding}" />
          </Border>
          <RepeatButton Style="{StaticResource MenuScrollButton}"
                        Grid.Row="0"
                        Grid.Column="0"
                        Command="{x:Static ScrollBar.LineUpCommand}"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Focusable="False">
            <RepeatButton.Visibility>
              <MultiBinding FallbackValue="Visibility.Collapsed"
                            Converter="{StaticResource MenuScrollingVisibilityConverter}"
                            ConverterParameter="0">
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ComputedVerticalScrollBarVisibility" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="VerticalOffset" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ExtentHeight" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ViewportHeight" />
              </MultiBinding>
            </RepeatButton.Visibility>
            <Path Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"
                  Data="{StaticResource UpArrow}" />
          </RepeatButton>
          <RepeatButton Style="{StaticResource MenuScrollButton}"
                        Grid.Row="2"
                        Grid.Column="0"
                        Command="{x:Static ScrollBar.LineDownCommand}"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        Focusable="False">
            <RepeatButton.Visibility>
              <MultiBinding FallbackValue="Visibility.Collapsed"
                            Converter="{StaticResource MenuScrollingVisibilityConverter}"
                            ConverterParameter="100">
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ComputedVerticalScrollBarVisibility" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="VerticalOffset" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ExtentHeight" />
                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                         Path="ViewportHeight" />
              </MultiBinding>
            </RepeatButton.Visibility>
            <Path Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"
                  Data="{StaticResource DownArrow}" />
          </RepeatButton>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

 

 

 

 

 

 

 이 글의 내용은 아래의 사이트에서 기초합니다.

https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/controls/menu-styles-and-templates?view=netframeworkdesktop-4.8 

 

Menu 스타일 및 템플릿 - WPF .NET Framework

Windows Presentation Foundation 메뉴 컨트롤의 스타일 및 템플릿에 대해 알아봅니다. 컨트롤에 고유한 모양을 제공하도록 ControlTemplate을 수정합니다.

docs.microsoft.com

 

반응형

'프로그램 개발 > WPF: Style&Template' 카테고리의 다른 글

Menu④  (0) 2022.06.09
Menu③  (0) 2022.06.08
Menu①  (0) 2022.06.03
ListView②  (0) 2022.06.01
ListView①  (0) 2022.05.31

'프로그램 개발/WPF: Style&Template'의 다른글

  • 현재글Menu②

관련글

댓글

티스토리툴바