NavigationWindow③

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

NavigationWindow③

(ㅇㅅㅎ) 2022. 6. 14. 15:58

728x90

안녕하세요, 이번 글에서는 지난 글에 이어서 Microsoft에서 제공하는 WPF [NavigationWindow의 스타일 및 템플릿] 예제를 톺아보겠습니다. NavgationWindow Style의 경우 NavWinButtonStyle, NavWinMenu, NavWinHeaderMenuItem, NavWinSubmenuItem, NavigationWindow, ResizeGrip 순서로 나눠져 있습니다. 이번 글에서는 NavWinButtonStyle과 ResizeGrip에 대해서 보도록 하겠습니다.

NavWinButtonStyle

예제에서 사용된 NavWinButtonStyle은 NavigationWindow에서 Button에 사용할 Style을 미리 정의해둔 것입니다.

🌟 NavWinButtonStyle은 [Frame의 스타일 밑 템플릿]의 FrameButtonStyle과 유사합니다. [Microsoft Control Style & Template 톺아보기 - Frame②] 편을 보신 분은 바로 ResizeGrip으로 넘어가도 무관합니다.

NavWinButtonStyle 속성

<Style x:Key="NavWinButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="OverridesDefaultStyle" Value="true" />
  <Setter Property="Command" Value="NavigationCommands.BrowseBack" />
  <Setter Property="Focusable" Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      ...
    </Setter.Value>
  </Setter>
</Style>

x:Key

XAML 정의 사전에서 만들고 참고하는 요소를 고유하게 식별합니다.

TargetType

이 Style을 적용할 형식을 설정합니다.

OverridesDefaultStyle

테마 스타일의 스타일 속성을 포함할지 여부를 설정합니다. 이 요소가 테마 스타일 속성을 사용하지 않으면 true이고, 사용하면 false입니다.

Command

Button을 누를 때 호출할 명령을 설정합니다. 예제에서는 NavigationCommands.BrowseBack(이전 페이지로 이동 명령)으로 설정했습니다.

Focusable

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

Template

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
      <Grid>
        <VisualStateManager.VisualStateGroups>
          ...
        </VisualStateManager.VisualStateGroups>
        <Ellipse x:Name="Ellipse" ... >
          ...
        </Ellipse>
        <Path x:Name="Arrow" ... >
          ...
        </Path>
      </Grid>
      
      <ControlTemplate.Triggers>
        ...
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>

Button의 템플릿을 설정합니다. 예제에서 사용되는 Template는 Button의 외형을 지정해줄 수 있는 ControlTemplate입니다.

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

NavWinButtonStyle Template 구성

NavWinButtonStyle은 Grid 내부에 Ellipse과 Path로 구성되어있습니다.

Grid

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

Ellipse(Ellipse)

타원을 그립니다.

⭐ Ellipse 속성

<Ellipse x:Name="Ellipse" StrokeThickness="1" Width="24" Height="24">
  <Ellipse.Stroke>
    <SolidColorBrush Color="{DynamicResource NavButtonFrameColor}" />
  </Ellipse.Stroke>
  <Ellipse.Fill>
    <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>
  </Ellipse.Fill>
</Ellipse>

x:Name

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

StrokeThickness

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

Width

Ellipse의 너비를 설정합니다.

Height

Ellipse의 높이를 설정합니다.

Stroke

Ellipse 윤곽선의 색을 설정합니다. 예제에서는 SolidColorBrush를 사용하여 미리 정의된 NavButtonFrameColor로 설정했습니다.

Fill

도형 내부의 색을 설정합니다. 예제에서는 LinearGradientBrush를 사용하여 그라데이션 색으로 설정했습니다.

👀 그라데이션 색에 대하여 궁금하신 분은 이 페이지를 참고하시길 바랍니다.

Path(Arrow)

일련의 연결된 선 및 곡선을 그립니다.

⭐ Path 속성

<Path x:Name="Arrow" Margin="0,0,3,0" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 6 0 L 0 6 L 6 12 Z">
  <Path.Fill>
    <SolidColorBrush Color="{DynamicResource GlyphColor}" />
  </Path.Fill>
</Path>

x:Name

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

Margin

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

HorizontalAlignment

Path의 가로 정렬 위치를 설정합니다. 기본값은 Stretch이며, 다른 값으로는 Left, Center, Right가 있습니다.

VerticalAlignment

Path의 세로 정렬 위치를 설정합니다. 기본값은 Stretch이며, 다른 값으로는 Top, Center, Bottom이 있습니다.

Data

그릴 모양을 지정하는 Geometry를 설정합니다.

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

Fill

도형 내부의 색을 설정합니다. 예제에서는 SolidColorBrush를 사용하여 미리 정의된 색 GlyphColor로 설정했습니다.

NavWinButtonStyle 이벤트

예제에서는 이벤트로 MouseOver, Pressed, Disabled 변화를 VisualStateManager로 표현하고, Command 변화를 Trigger로 표현하였습니다.

VisualStateManager

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonStates">
    ...
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

VisualState는 Control의 시각적 상태를 나타냅니다. 예제의 이벤트에서 시각적 변화를 주기 위해서 VisualStateGroup의 x:Name을 CommonStates로 설정했습니다.

⭐ CommonStates

<VisualStateGroup x:Name="CommonStates">
  <VisualState x:Name="Normal" />
  <VisualState x:Name="MouseOver">
    <Storyboard>
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </VisualState>
  <VisualState x:Name="Pressed">
    <Storyboard>
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </VisualState>
  <VisualState x:Name="Disabled">
    <Storyboard>
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColor}" />
      </ColorAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
      </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualState>
</VisualStateGroup>

MouseOver & Pressed & Disabled

Storyboard의 내용을 풀어보면 ["Ellipse"라는 이름을 가진 Control의 Fill GradientStops 묶음의 색 중 1번(0번부터 시작)을 각각 ControlMouseOverColor, ControlPressedColor와 DisabledControlDarkColor로 바꾸는 것]입니다. 그리고 Disabled의 경우 Storyboard에 ["Arrow"라는 이름을 가진 Control의 Fill을 DisabledForegroundColor로 바꾸는 것]이 있습니다.

🌟 Normal의 경우 Storyboard가 존재하지 않지만 명시해주지 않으면 Normal로 상태가 변할 때 외형이 바뀌지 않습니다.

ColorAnimationUsingKeyFrames

KeyFrames 집합을 따라 Color 속성 값에 EasingColorKeyFrame의 애니메이션 효과를 줍니다.

Triggers

<ControlTemplate.Triggers>
  <Trigger Property="Command" Value="{x:Static NavigationCommands.BrowseForward}">
    <Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 6 6 L 0 12 z" />
    <Setter TargetName="Arrow" Property="Margin" Value="3,0,0,0" />
  </Trigger>
</ControlTemplate.Triggers>

Trigger는 어떤 조건이나 이벤트 등이 주어졌을 때 Control의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다. 예제에서는 Command의 값이 NavigationCommands.BrowseForward일 경우 "Arrow"의 Data와 Margin 값을 변경합니다.

ResizeGrip

예제에서 사용된 ResizeGrip은 NavigationWindow의 ResizeGrip에 사용할 Style을 미리 정의해둔 것입니다.

ResizeGrip 속성

<Style x:Key="{x:Type ResizeGrip}" TargetType="{x:Type ResizeGrip}">
  <Setter Property="OverridesDefaultStyle" Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      ...
    </Setter.Value>
  </Setter>
</Style>

x:Key

XAML 정의 사전에서 만들고 참고하는 요소를 고유하게 식별합니다.

TargetType

이 Style을 적용할 형식을 설정합니다.

OverrideDefaultStyle

테마 스타일의 스타일 속성을 포함할지 여부를 설정합니다. 이 요소가 테마 스타일 속성을 사용하지 않으면 true이고, 사용하면 false입니다.

Template

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ResizeGrip}">
      <Border ... >
        <Rectangle ... >
          <Rectangle.Fill>
            <DrawingBrush ... >
              ...
            </DrawingBrush>
          </Rectangle.Fill>
        </Rectangle>
      </Border>
    </ControlTemplate>
  </Setter.Value>
</Setter>

ResizeGrip의 템플릿을 설정합니다. 예제에서 사용되는 Template는 ResizeGrip의 외형을 지정해줄 수 있는 ControlTemplate입니다.

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

ResizeGrip Template 구성

ResizeGrip은 Border 내부에 Rectangle이 구성된 간단한 형태입니다. 그리고 Rectangle의 Fill 속성을 DrawingBrush를 이용하여 영역을 구성했습니다.

Border

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

⭐ Border 속성

<Border Background="Transparent" SnapsToDevicePixels="True" Width="16" Height="16">
  ...
</Border>

Background

Border의 배경색을 설정합니다. 예제에서는 Transparent(투명)로 설정했습니다.

SnapsToDevicePixels

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

Width

Border의 너비를 설정합니다.

Height

Border의 높이를 설정합니다.

Rectangle

사각형을 그립니다.

⭐ Rectangle 속성

<Rectangle Margin="2">
  <Rectangle.Fill>
    ...
  </Rectangle.Fill>
</Rectangle>

Margin

Rectangle의 외부 여백을 설정합니다.

Fill

도형의 내부 색을 설정합니다. 예제에서는 DrawingBrush를 사용하여 특정 모양으로 설정했습니다.

DrawingBrush

Drawing을 사용하여 영역을 그리며 Shape, Text, Video, Image 또는 다른 도면을 포함할 수 있습니다.

⭐ DrawingBrush 속성

<DrawingBrush Viewport="0,0,4,4" ViewportUnits="Absolute" Viewbox="0,0,8,8" ViewboxUnits="Absolute" TileMode="Tile">
  <DrawingBrush.Drawing>
    <DrawingGroup>
      <DrawingGroup.Children>
        <GeometryDrawing Brush="#FFE8EDF9" Geometry="M 4 4 L 4 8 L 8 8 L 8 4 z" />
      </DrawingGroup.Children>
    </DrawingGroup>
  </DrawingBrush.Drawing>
</DrawingBrush>

Viewport

TileBrush에 대한 기본 파일의 위치 및 크기를 설정합니다.

ViewportUnits

BrushMappingMode 기준 타일의 크기 및 위치를 나타내는 Viewport의 값이 출력 영역의 크기에 상대적인지 여부를 지정하는 TileBrush 열거형을 설정합니다. 값으로는 Absolute와 RelativeToBoundingBox가 있습니다.

Viewbox

TileBrush 타일의 Content 위치 및 크기를 설정합니다.

ViewboxUnits

Viewbox 값이 TileBrush 내용의 경계 상자를 기준으로 하는지 여부 또는 값이 절대 값인지 여부를 설정합니다. 값으로는 Absolute와 RelativeToBoundingBox가 있습니다.

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

TileMode

기본 타일이 출력 영역보다 작은 경우 사용자가 칠하고 있는 영역을 TileBrush에서 채우는 방법을 지정하는 값을 설정합니다. 값으로는 FlipX, FlipXY, FlipY, None과 Tile이 있습니다.

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

Drawing

이 Drawing의 Content를 설명하는 DrawingBrush을 설정합니다. DrawingGroup을 사용하여 GeometryDrawing을 사용하여 설정했습니다.

🌟 DrawingGroup : 단일 그리기로 작업할 수 있는 그리기의 컬렉션을 나타냅니다.

🌟 DrawingGroup.Children : 이 DrawingGroup에 포함된 Drawing 개체를 설정합니다.

🌟 GeometryDrawing : 지정된 Geometry 및 Brush를 사용하여 Pen을 만듭니다.

전체 코드

<Style x:Key="NavWinButtonStyle"
       TargetType="{x:Type Button}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Command"
          Value="NavigationCommands.BrowseBack" />
  <Setter Property="Focusable"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlMouseOverColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                Storyboard.TargetProperty="(Shape.Fill).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledForegroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>

              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Ellipse x:Name="Ellipse"
                   StrokeThickness="1"
                   Width="24"
                   Height="24">
            <Ellipse.Stroke>
              <SolidColorBrush Color="{DynamicResource NavButtonFrameColor}" />
            </Ellipse.Stroke>
            <Ellipse.Fill>
              <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>

            </Ellipse.Fill>
          </Ellipse>
          <Path x:Name="Arrow"
                Margin="0,0,3,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M 6 0 L 0 6 L 6 12 Z">
            <Path.Fill>
              <SolidColorBrush Color="{DynamicResource GlyphColor}" />
            </Path.Fill>
          </Path>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="Command"
                   Value="{x:Static NavigationCommands.BrowseForward}">
            <Setter TargetName="Arrow"
                    Property="Data"
                    Value="M 0 0 L 6 6 L 0 12 z" />
            <Setter TargetName="Arrow"
                    Property="Margin"
                    Value="3,0,0,0" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- NavWin Menu Style -->
<Style x:Key="NavWinMenu"
       TargetType="{x:Type Menu}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="KeyboardNavigation.TabNavigation"
          Value="None" />
  <Setter Property="IsMainMenu"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Menu}">
        <DockPanel IsItemsHost="true" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- NavWin Menu Header Style -->
<Style x:Key="NavWinHeaderMenuItem"
       TargetType="{x:Type MenuItem}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type MenuItem}">
        <Grid>
          <Popup x:Name="PART_Popup"
                 Placement="Bottom"
                 VerticalOffset="2"
                 IsOpen="{TemplateBinding IsSubmenuOpen}"
                 AllowsTransparency="True"
                 Focusable="False"
                 PopupAnimation="Fade">
            <Border x:Name="SubMenuBorder"
                    Background="{DynamicResource MenuPopupBrush}"
                    BorderThickness="1">
              <Border.BorderBrush>
                <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
              </Border.BorderBrush>
              <StackPanel IsItemsHost="true"
                          Margin="2"
                          KeyboardNavigation.TabNavigation="Cycle"
                          KeyboardNavigation.DirectionalNavigation="Cycle" />
            </Border>
          </Popup>

          <Grid x:Name="Panel"
                Width="24"
                Background="Transparent"
                HorizontalAlignment="Right"
                VerticalAlignment="Stretch"
                d:IsHidden="True">

            <Border Visibility="Hidden"
                    x:Name="HighlightBorder"
                    BorderThickness="1"
                    CornerRadius="2">
              <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 ControlMouseOverColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Border.Background>
            </Border>
            <Path x:Name="Arrow"
                  SnapsToDevicePixels="false"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Center"
                  Margin="0,2,4,0"
                  StrokeLineJoin="Round"
                  Data="M 0 0 L 4 4 L 8 0 Z">
              <Path.Fill>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Fill>
            </Path>
          </Grid>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsHighlighted"
                   Value="true">
            <Setter TargetName="HighlightBorder"
                    Property="Visibility"
                    Value="Visible" />
          </Trigger>
          <Trigger Property="IsSubmenuOpen"
                   Value="true">
            <Setter TargetName="HighlightBorder"
                    Property="BorderBrush">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <GradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource BorderDarkColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource BorderMediumColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </GradientBrush.GradientStops>
                </LinearGradientBrush>

              </Setter.Value>
            </Setter>
            <Setter Property="Background"
                    TargetName="HighlightBorder">
              <Setter.Value>

                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlPressedColor}"
                                Offset="0.984" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- NavWin Menu Item Style -->

<Style x:Key="NavWinSubmenuItem"
       TargetType="{x:Type MenuItem}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Header"
          Value="{Binding (JournalEntry.Name)}" />
  <Setter Property="Command"
          Value="NavigationCommands.NavigateJournal" />
  <Setter Property="CommandTarget"
          Value="{Binding TemplatedParent, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" />
  <Setter Property="CommandParameter"
          Value="{Binding RelativeSource={RelativeSource Self}}" />
  <Setter Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
          Value="{Binding (JournalEntryUnifiedViewConverter.JournalEntryPosition)}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type MenuItem}">
        <Border Name="Border"
                BorderThickness="1">
          <Grid x:Name="Panel"
                Background="Transparent"
                SnapsToDevicePixels="true"
                Height="35"
                Width="250">
            <Path x:Name="Glyph"
                  SnapsToDevicePixels="false"
                  Margin="7,5"
                  Width="10"
                  Height="10"
                  HorizontalAlignment="Left"
                  StrokeStartLineCap="Triangle"
                  StrokeEndLineCap="Triangle"
                  StrokeThickness="2">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>
            <ContentPresenter ContentSource="Header"
                              Margin="24,5,50,5" />
          </Grid>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Value="Current"
                   Property="JournalEntryUnifiedViewConverter.JournalEntryPosition">
            <Setter TargetName="Glyph"
                    Property="Data"
                    Value="M 0,5 L 2.5,8 L 7,3 " />
          </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>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsHighlighted"
                         Value="true" />
              <Condition Value="Forward"
                         Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Glyph"
                    Property="Data"
                    Value="M 3 1 L 7 5 L 3 9 z" />
            <Setter TargetName="Glyph"
                    Property="Fill">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource GlyphColor}" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="Glyph"
                    Property="Stroke"
                    Value="{x:Null}" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsHighlighted"
                         Value="true" />
              <Condition Value="Back"
                         Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Glyph"
                    Property="Data"
                    Value="M 7 1 L 3 5 L 7 9 z" />
            <Setter TargetName="Glyph"
                    Property="Fill">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource GlyphColor}" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="Glyph"
                    Property="Stroke"
                    Value="{x:Null}" />
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Merges Back and Forward Navigation Stacks -->

<JournalEntryUnifiedViewConverter x:Key="JournalEntryUnifiedViewConverter" />

<!-- SimpleStyles: NavigationWindow -->

<Style x:Key="{x:Type NavigationWindow}"
       TargetType="{x:Type NavigationWindow}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type NavigationWindow}">
        <DockPanel>
          <DockPanel.Background>
            <SolidColorBrush Color="{DynamicResource WindowColor}" />
          </DockPanel.Background>
          <Border DockPanel.Dock="Top"
                  Height="30"
                  BorderThickness="1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Grid>
              <Grid.Background>

                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource ControlLightColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource ControlMediumColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Grid.Background>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>

              <Menu x:Name="NavMenu"
                    Grid.ColumnSpan="3"
                    Height="20"
                    Margin="1,0,0,0"
                    VerticalAlignment="Center"
                    Style="{StaticResource NavWinMenu}">
                <MenuItem Style="{StaticResource NavWinHeaderMenuItem}"
                          ItemContainerStyle="{StaticResource NavWinSubmenuItem}"
                          IsSubmenuOpen="{Binding (MenuItem.IsSubmenuOpen), 
                  Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                  <MenuItem.ItemsSource>
                    <MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverter}">
                      <Binding RelativeSource="{RelativeSource TemplatedParent}"
                               Path="BackStack" />
                      <Binding RelativeSource="{RelativeSource TemplatedParent}"
                               Path="ForwardStack" />
                    </MultiBinding>
                  </MenuItem.ItemsSource>
                </MenuItem>
              </Menu>

              <Path Grid.Column="0"
                    SnapsToDevicePixels="false"
                    IsHitTestVisible="false"
                    Margin="2,1.5,0,1.5"
                    Grid.ColumnSpan="3"
                    StrokeThickness="1"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Data="M22.5767,21.035 Q27,19.37 
                      31.424,21.035 A12.5,12.5,0,0,0,53.5,13
                      A12.5,12.5,0,0,0,37.765,0.926
                      Q27,4.93 16.235,0.926
                      A12.5,12.5,0,0,0,0.5,13 
                      A12.5,12.5,0,0,0,22.5767,21.035 z">
                <Path.Stroke>
                  <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                </Path.Stroke>
                <Path.Fill>

                  <LinearGradientBrush EndPoint="0,1"
                                       StartPoint="0,0">
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="0" />

                    <GradientStop Color="{DynamicResource ControlDarkColor}"
                                  Offset="0.984" />
                  </LinearGradientBrush>
                </Path.Fill>
              </Path>
              <Button Style="{StaticResource NavWinButtonStyle}"
                      Command="NavigationCommands.BrowseBack"
                      Content="M 4 0 L 0 4 L 4 8 Z"
                      Margin="3,1.5,2,1.5"
                      Grid.Column="0" />
              <Button Style="{StaticResource NavWinButtonStyle}"
                      Command="NavigationCommands.BrowseForward"
                      Content="M 4 0 L 0 4 L 4 8 Z"
                      Margin="2,1.5,0,1.5"
                      Grid.Column="1" />
            </Grid>
          </Border>
          <Grid>
            <AdornerDecorator>
              <Border BorderThickness="1">
                <Border.BorderBrush>
                  <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                </Border.BorderBrush>
                <ContentPresenter x:Name="PART_NavWinCP"
                                  ClipToBounds="true" />
              </Border>
            </AdornerDecorator>

            <ResizeGrip x:Name="WindowResizeGrip"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Bottom"
                        Visibility="Collapsed"
                        IsTabStop="false" />
          </Grid>
        </DockPanel>
        <ControlTemplate.Triggers>
          <Trigger Property="ResizeMode"
                   Value="CanResizeWithGrip">
            <Setter TargetName="WindowResizeGrip"
                    Property="Visibility"
                    Value="Visible" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="{x:Type ResizeGrip}"
       TargetType="{x:Type ResizeGrip}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ResizeGrip}">
        <Border Background="Transparent"
                SnapsToDevicePixels="True"
                Width="16"
                Height="16">
          <Rectangle Margin="2">
            <Rectangle.Fill>
              <DrawingBrush Viewport="0,0,4,4"
                            ViewportUnits="Absolute"
                            Viewbox="0,0,8,8"
                            ViewboxUnits="Absolute"
                            TileMode="Tile">
                <DrawingBrush.Drawing>
                  <DrawingGroup>
                    <DrawingGroup.Children>
                      <GeometryDrawing Brush="#FFE8EDF9"
                                       Geometry="M 4 4 L 4 8 L 
                                                 8 8 L 8 4 z" />
                    </DrawingGroup.Children>
                  </DrawingGroup>
                </DrawingBrush.Drawing>
              </DrawingBrush>
            </Rectangle.Fill>
          </Rectangle>
        </Border>
      </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/navigationwindow-styles-and-templates?view=netframeworkdesktop-4.8

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

NavigationWindow 스타일 및 템플릿 아티클 05/04/2022 읽는 데 6분 걸림 기여자 1명 이 문서의 내용 --> 이 항목에서는 NavigationWindow 컨트롤의 스타일 및 템플릿을 설명합니다. 기본값을 수정할 수 있습니

docs.microsoft.com

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

ProgressBar (0)	2022.06.15
PasswordBox (0)	2022.06.15
NavigationWindow② (0)	2022.06.13
NavigationWindow① (0)	2022.06.11
Menu④ (0)	2022.06.09

현재글NavigationWindow③

ㅇㅅㅎ