728x90
반응형
728x170
■ ControlTemplate 엘리먼트를 사용해 NavigationWindow 엘리먼트를 정의하는 방법을 보여준다.
▶ MainApplication.xaml
<Application x:Class="TestProject.MainApplication"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Color x:Key="WindowColorKey">#ffe8edf9</Color>
<Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
<Color x:Key="DisabledForegroundColorKey">#ff888888</Color>
<Color x:Key="ControlLightColorKey">White</Color>
<Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
<Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
<Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
<Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
<Color x:Key="GlyphColorKey">#ff444444</Color>
<Color x:Key="BorderLightColorKey">#ffcccccc</Color>
<Color x:Key="BorderMediumColorKey">#ff888888</Color>
<Color x:Key="BorderDarkColorKey">#ff444444</Color>
<Color x:Key="NavigationButtonFrameColorKey">#ff3843c4</Color>
<LinearGradientBrush x:Key="MenuPopupBrushKey"
StartPoint="0.5 0"
EndPoint="0.5 1">
<GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="0.5" Color="{DynamicResource ControlMediumColorKey}" />
<GradientStop Offset="1" Color="{DynamicResource ControlLightColorKey }" />
</LinearGradientBrush>
<JournalEntryUnifiedViewConverter x:Key="JournalEntryUnifiedViewConverterKey" />
<Style x:Key="NavigationWindowButtonStyleKey" 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 Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="arrowPath"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="ellipse"
Width="24"
Height="24"
StrokeThickness="1">
<Ellipse.Stroke>
<SolidColorBrush Color="{DynamicResource NavigationButtonFrameColorKey}" />
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Path Name="arrowPath"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0 0 3 0"
Data="M 6 0 L 0 6 L 6 12 Z">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
</Path.Fill>
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Command" Value="{x:Static NavigationCommands.BrowseForward}">
<Setter
TargetName="arrowPath"
Property="Data"
Value="M 0 0 L 6 6 L 0 12 z" />
<Setter
TargetName="arrowPath"
Property="Margin"
Value="3 0 0 0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationWindowMenuStyleKey" 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>
<Style x:Key="NavigationWindowHeaderMenuItemStyleKey" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid>
<Popup Name="PART_Popup"
Placement="Bottom"
PopupAnimation="Fade"
VerticalOffset="2"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsSubmenuOpen}">
<Border
BorderThickness="1"
Background="{DynamicResource MenuPopupBrushKey}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
</Border.BorderBrush>
<StackPanel
Margin="2"
IsItemsHost="true"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
<Grid Name="panel"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Width="24"
Background="Transparent">
<Border Name="highlightBorder"
CornerRadius="2"
BorderThickness="1"
Visibility="Hidden">
<Border.BorderBrush>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
<GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlMouseOverColorKey}" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Path Name="arrowPath"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 2 4 0"
SnapsToDevicePixels="false"
StrokeLineJoin="Round"
Data="M 0 0 L 4 4 L 8 0 Z">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
</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 Offset="0.0" Color="{DynamicResource BorderDarkColorKey }" />
<GradientStop Offset="1.0" Color="{DynamicResource BorderMediumColorKey}" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter
TargetName="highlightBorder"
Property="Background">
<Setter.Value>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="0.984" Color="{DynamicResource ControlPressedColorKey}" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationWindowSubmenuItemStyleKey" 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 Name="panel"
Width="250"
Height="35"
Background="Transparent"
SnapsToDevicePixels="true">
<Path Name="glyphPath"
HorizontalAlignment="Left"
Margin="7 5"
Width="10"
Height="10"
StrokeThickness="2"
StrokeStartLineCap="Triangle"
StrokeEndLineCap="Triangle"
SnapsToDevicePixels="false">
<Path.Stroke>
<SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
</Path.Stroke>
</Path>
<ContentPresenter
Margin="24 5 50 5"
ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Value="Current" Property="JournalEntryUnifiedViewConverter.JournalEntryPosition">
<Setter
TargetName="glyphPath"
Property="Data"
Value="M 0 5 L 2.5 8 L 7 3 " />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter
TargetName="border"
Property="Background">
<Setter.Value>
<LinearGradientBrush
StartPoint="0.5 0"
EndPoint="0.5 1">
<GradientStop Offset="0" Color="Transparent" />
<GradientStop Offset="1" Color="{DynamicResource ControlMouseOverColorKey}" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter
TargetName="border"
Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush
StartPoint="0.5 0"
EndPoint="0.5 1">
<GradientStop Offset="0" Color="{DynamicResource BorderMediumColorKey}" />
<GradientStop Offset="1" Color="Transparent" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="true" />
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="Forward" />
</MultiTrigger.Conditions>
<Setter
TargetName="glyphPath"
Property="Data"
Value="M 3 1 L 7 5 L 3 9 z" />
<Setter
TargetName="glyphPath"
Property="Fill">
<Setter.Value>
<SolidColorBrush Color="{StaticResource GlyphColorKey}" />
</Setter.Value>
</Setter>
<Setter
TargetName="glyphPath"
Property="Stroke"
Value="{x:Null}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="true" />
<Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition" Value="Back" />
</MultiTrigger.Conditions>
<Setter
TargetName="glyphPath"
Property="Data"
Value="M 7 1 L 3 5 L 7 9 z" />
<Setter
TargetName="glyphPath"
Property="Fill">
<Setter.Value>
<SolidColorBrush Color="{StaticResource GlyphColorKey}" />
</Setter.Value>
</Setter>
<Setter
TargetName="glyphPath"
Property="Stroke"
Value="{x:Null}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<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 WindowColorKey}" />
</DockPanel.Background>
<Border DockPanel.Dock="Top"
Height="30"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
</Border.BorderBrush>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
<Menu Name="navigationMenu" Grid.ColumnSpan="3"
Style="{StaticResource NavigationWindowMenuStyleKey}"
VerticalAlignment="Center"
Margin="1 0 0 0"
Height="20">
<MenuItem
Style="{StaticResource NavigationWindowHeaderMenuItemStyleKey}"
ItemContainerStyle="{StaticResource NavigationWindowSubmenuItemStyleKey}"
IsSubmenuOpen="{Binding (MenuItem.IsSubmenuOpen),
Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}">
<MenuItem.ItemsSource>
<MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverterKey}">
<Binding
RelativeSource="{RelativeSource TemplatedParent}"
Path="BackStack" />
<Binding
RelativeSource="{RelativeSource TemplatedParent}"
Path="ForwardStack" />
</MultiBinding>
</MenuItem.ItemsSource>
</MenuItem>
</Menu>
<Path Grid.Column="0" Grid.ColumnSpan="3"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="2 1.5 0 1.5"
StrokeThickness="1"
SnapsToDevicePixels="false"
IsHitTestVisible="false"
Data="M 22.5767 21.035 Q 27 19.37
31.424 21.035 A 12.5 12.5 0 0 0 53.5 13
A 12.5 12.5 0 0 0 37.765 0.926
Q 27 4.93 16.235 0.926
A 12.5 12.5 0 0 0 0.5 13
A 12.5 12.5 0 0 0 22.5767 21.035 z">
<Path.Stroke>
<SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
</Path.Stroke>
<Path.Fill>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<GradientStop Offset="0" Color="{DynamicResource ControlMediumColorKey}" />
<GradientStop Offset="0.984" Color="{DynamicResource ControlDarkColorKey }" />
</LinearGradientBrush>
</Path.Fill>
</Path>
<Button Grid.Column="0"
Style="{StaticResource NavigationWindowButtonStyleKey}"
Margin="3 1.5 2 1.5"
Command="NavigationCommands.BrowseBack"
Content="M 4 0 L 0 4 L 4 8 Z" />
<Button Grid.Column="1"
Style="{StaticResource NavigationWindowButtonStyleKey}"
Margin="2 1.5 0 1.5"
Command="NavigationCommands.BrowseForward"
Content="M 4 0 L 0 4 L 4 8 Z" />
</Grid>
</Border>
<Grid>
<AdornerDecorator>
<Border BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
</Border.BorderBrush>
<ContentPresenter Name="PART_NavWinCP"
ClipToBounds="true" />
</Border>
</AdornerDecorator>
<ResizeGrip Name="windowResizeGrip"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
IsTabStop="false"
Visibility="Collapsed" />
</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
Width="16"
Height="16"
Background="Transparent"
SnapsToDevicePixels="True">
<Rectangle Margin="2">
<Rectangle.Fill>
<DrawingBrush
ViewportUnits="Absolute"
Viewport="0 0 4 4"
ViewboxUnits="Absolute"
Viewbox="0 0 8 8"
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>
</Application.Resources>
</Application>
▶ MainWindow.xaml
<NavigationWindow x:Class="TestProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Style="{StaticResource {x:Type NavigationWindow}}"
Width="800"
Height="600"
Title="TestProject"
FontFamily="나눔고딕코딩"
FontSize="16">
</NavigationWindow>728x90
반응형
그리드형(광고전용)
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] ControlTemplate 엘리먼트 : ScrollViewer 엘리먼트 정의하기 (0) | 2023.01.31 |
|---|---|
| [C#/WPF] ControlTemplate 엘리먼트 : ScrollBar 엘리먼트 정의하기 (0) | 2023.01.29 |
| [C#/WPF] ControlTemplate 엘리먼트 : RepeatButton 엘리먼트 정의하기 (0) | 2023.01.29 |
| [C#/WPF] ControlTemplate 엘리먼트 : ProgressBar 엘리먼트 정의하기 (0) | 2023.01.29 |
| [C#/WPF] ControlTemplate 엘리먼트 : PasswordBox 엘리먼트 정의하기 (0) | 2023.01.28 |
| [C#/WPF] ControlTemplate 엘리먼트 : Menu 엘리먼트 정의하기 (0) | 2023.01.28 |
| [C#/WPF] ControlTemplate 엘리먼트 : ListView 엘리먼트 정의하기 (0) | 2023.01.27 |
| [C#/WPF] ControlTemplate 엘리먼트 : ListBox 엘리먼트 정의하기 (0) | 2023.01.27 |
| [C#/WPF] ControlTemplate 엘리먼트 : Label 엘리먼트 정의하기 (0) | 2023.01.27 |
| [C#/WPF] ControlTemplate 엘리먼트 : GroupBox 엘리먼트 정의하기 (0) | 2023.01.27 |
댓글을 달아 주세요