NavigationWindow Styles and Templates
This topic describes the styles and templates for the NavigationWindow control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.
The following table lists the named parts for the NavigationWindow control.
|
Part |
Type |
Description |
|
PART_NavWinCP |
The area for the content. |
The following table lists the visual states for the NavigationWindow control.
|
VisualState Name |
VisualStateGroup Name |
Description |
|
Valid |
ValidationStates |
The control uses the Validation class and the Validation.HasError attached property is false. |
|
InvalidFocused |
ValidationStates |
The Validation.HasError attached property is true has the control has focus. |
|
InvalidUnfocused |
ValidationStates |
The Validation.HasError attached property is true has the control does not have focus. |
Although this example contains all of the elements that are defined in the ControlTemplate of a NavigationWindow by default, the specific values should be thought of as examples.
<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>
The preceding example uses one or more of the following resources.
<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>
For the complete sample, see Styling with ControlTemplates Sample.