Click here to Skip to main content
15,893,668 members
Articles / Programming Languages / C#

Silverlight Dynamic Themes

Rate me:
Please Sign up or sign in to vote.
4.92/5 (11 votes)
6 Jan 2012CPOL6 min read 56.6K   5.9K   29  
This article describes how to dynamically apply themes to a Silverlight application.
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
    >

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/SLDynamicThemes2;component/Assets/Themes/Windows7/Brushes.xaml"/>
        <ResourceDictionary Source="/SLDynamicThemes2;component/Assets/Themes/Windows7/Fonts.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <!-- ******MAIN PAGE STYLES****** -->
    <!-- **************************** -->
    <LinearGradientBrush x:Key="NavPageLinedBrush" EndPoint="185,220" MappingMode="Absolute" SpreadMethod="Repeat" StartPoint="185,218">
        <GradientStop Color="Transparent" Offset=".35"/>
        <GradientStop Color="White" Offset=".22"/>
    </LinearGradientBrush>

    <!-- LayoutRoot Grid Style -->
    <Style x:Key="LayoutRootGridStyle" TargetType="Grid">
        <Setter Property="TextOptions.TextHintingMode" Value="Animated"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint=".05,.11" StartPoint="1.17,.95">
                    <GradientStop Color="#FFD0E7FF" Offset="1"/>
                    <GradientStop Color="#FF9AD3FF"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Content Border Style -->
    <Style x:Key="ContentBorderStyle" TargetType="Border">
        <Setter Property="Background" Value="{StaticResource NavPageLinedBrush}" />
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="CornerRadius" Value="0" />
    </Style>

    <!-- Content Frame Style -->
    <Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#FFDADADA"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Direction="0" Opacity=".2" BlurRadius="10" ShadowDepth="0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="Margin" Value="34,100,34,34"/>
        <Setter Property="Padding" Value="28,15,28,15"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>   

    <!-- Navigation Grid Style -->
    <Style x:Key="NavigationGridStyle" TargetType="Grid">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Height" Value="99"/>
        <Setter Property="Margin" Value="0,6,0,0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
    </Style>

    <!-- Branding Border Style -->
    <Style x:Key="BrandingBorderStyle" TargetType="Border">
        <Setter Property="Height" Value="Auto"/>
        <Setter Property="Margin" Value="0,0,36,0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    </Style>

    <!-- Branding StackPanel Style -->
    <Style x:Key="BrandingStackPanelStyle" TargetType="StackPanel">
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="Orientation" Value="Horizontal"/>
        <Setter Property="Margin" Value="0,15,0,0"/>
    </Style>

    <!-- Logo Path Style -->
    <Style x:Key="LogoIcon" TargetType="ContentControl">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Height" Value="Auto"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Margin" Value="3,0,6,0"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="22"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Content" Value="My"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Color="White" BlurRadius="100" ShadowDepth="0" Direction="0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" >
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF7C7C7C" Offset="0"/>
                    <GradientStop Color="#FF3F3F3F" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid>
                        <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ApplicationName Style -->
    <Style x:Key="ApplicationNameStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="22"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Margin" Value="0,2,0,0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Color="White" BlurRadius="100" ShadowDepth="0" Direction="0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF9AFF00" Offset="0"/>
                    <GradientStop Color="#FF4D811F" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Links Border Style -->
    <Style x:Key="LinksBorderStyle" TargetType="Border">
        <Setter Property="Height" Value="38"/>
        <Setter Property="Margin" Value="33,56,33,0"/>
        <Setter Property="BorderThickness" Value="1,1,1,0"/>
        <Setter Property="CornerRadius" Value="4,4,0,0" />
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#D0181818" Offset="0.897"/>
                    <GradientStop Color="DarkGray"/>
                    <GradientStop Color="#D8727272" Offset="0.374"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect BlurRadius="10" Direction="75" ShadowDepth="2" Opacity=".2"/>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Links StackPanel Style -->
    <Style x:Key="LinksStackPanelStyle" TargetType="StackPanel">
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Orientation" Value="Horizontal"/>
    </Style>

    <!-- Link Style -->
    <Style x:Key="LinkStyle" TargetType="HyperlinkButton">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="#7CFFFFFF" Offset="0.208"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="#FF9D9492"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="MinHeight" Value="28"/>
        <Setter Property="MinWidth" Value="78"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="12,4,12,4"/>
        <Setter Property="Margin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HyperlinkButton">
                    <Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}" Background="#00000000">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.95"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.275">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <PowerEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Center</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Center</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Center</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Center</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="LinkStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.25">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseInOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="ActiveLink">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ActiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimation Duration="0" To="Transparent" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ActiveBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InactiveLink">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentPresenter">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.9"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InteractiveElement">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.35"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusX)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusY)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="FocusVisualElement" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Opacity="0" Margin="-1" RadiusX="1" RadiusY="1"/>
                        <Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" Background="#FFBFD0E5" Margin="0,1.5,0,0"/>
                        <Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity="1">
                            <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity="1"/>
                        </Border>
                        <Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="#FFA7A7A7" BorderThickness="0.25,0" Opacity="0" CornerRadius="1,1,1,1" Margin="0.25,1.5,0.25,1" BorderBrush="Black"/>
                        <Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
                            <TextBlock x:Name="InteractiveElement" Foreground="White" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" FontFamily="{TemplateBinding FontFamily}"/>
                        </Border>
                        <TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="#FFAAAAAA" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Secondary Link Style -->
    <Style x:Key="SecondaryLinkStyle" TargetType="HyperlinkButton">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="#7CFFFFFF" Offset="0.208"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#FF9D9492"/>
        <Setter Property="Foreground" Value="#FF3D3D3D" />
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="MinHeight" Value="28"/>
        <Setter Property="MinWidth" Value="78"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="8,4,8,4"/>
        <Setter Property="Margin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HyperlinkButton">
                    <Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}" Background="#00000000">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                    <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.1"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.95"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="InteractiveBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="InteractiveElement">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF007EC2"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.275"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Center</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Center</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Center</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Center</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="LinkStates">
                                <VisualState x:Name="ActiveLink">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ActiveBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonGrid">
                                            <EasingColorKeyFrame KeyTime="0" Value="#18FFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InactiveLink"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.35"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusX)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusY)">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="FocusVisualElement" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Opacity="0" Margin="-1" RadiusX="1" RadiusY="1"/>
                        <Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/>
                        <Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity="1">
                            <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity="1"/>
                        </Border>
                        <Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{x:Null}" BorderThickness="1,1,1,1" Opacity="0" BorderBrush="{x:Null}"/>
                        <Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
                            <TextBlock x:Name="InteractiveElement" FontFamily="{TemplateBinding FontFamily}"  FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="Black"/>
                        </Border>
                        <TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="#FFAAAAAA" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Divider Style -->
    <Style x:Key="DividerStyle" TargetType="Rectangle">
        <Setter Property="Fill">
            <Setter.Value>
                <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                    <LinearGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform CenterY="0.5" CenterX="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Black" Offset="0.49"/>
                    <GradientStop Color="#FFABABAB" Offset="0.539"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="1.5"/>
        <Setter Property="Margin" Value="0,5,0,5"/>
        <Setter Property="StrokeThickness" Value="2"/>
        <Setter Property="OpacityMask">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                    <GradientStop Color="#FE000000" Offset="0.25"/>
                    <GradientStop Color="#FE000000" Offset="0.75"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Opacity" Value="0.5"/>
    </Style>

    <!-- **STYLE UPDATES FOR NAV TEMPLATE** -->
    <!-- ********************************** -->
    <Style x:Key="NavContentBorderStyle" TargetType="Border" BasedOn="{StaticResource ContentBorderStyle}">
        <Setter Property="Margin" Value="0" />
        <Setter Property="Background" Value="Transparent" />
    </Style>

    <Style x:Key="NavContentFrameStyle" TargetType="navigation:Frame" BasedOn="{StaticResource ContentFrameStyle}">
        <Setter Property="Margin" Value="34,0,34,34"/>
        <Setter Property="UriMapper">
            <Setter.Value>
                <uriMapper:UriMapper>
                    <uriMapper:UriMapping MappedUri="/Views/Home.xaml" Uri="" />
                    <uriMapper:UriMapping MappedUri="/Views/{pageName}.xaml" Uri="/{pageName}" />
                    <uriMapper:UriMapping MappedUri="/Views/{pageName}.xaml" Uri="{}{pageName}" />
                </uriMapper:UriMapper>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="NavBrandingBorderStyle" TargetType="Border" BasedOn="{StaticResource BrandingBorderStyle}">
        <Setter Property="Margin" Value="0,15,36,0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Padding" Value="0,5,0,0"/>
    </Style>

    <Style x:Key="NavLinksBorderStyle" TargetType="Border" BasedOn="{StaticResource LinksBorderStyle}">
        <Setter Property="Margin" Value="33,8,33,0"/>
    </Style>

    <!-- ******CONTENT PAGE STYLES****** -->
    <!-- ******************************* -->
    <!-- Page Style -->
    <Style x:Key="PageStyle" TargetType="navigation:Page"/>

    <!-- Page ScrollViewer Style -->
    <Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
        <Setter Property="Margin" Value="-29,-16,-29,-16"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="BorderBrush" Value="#FFADADAD"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
                            <Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>
                            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>
                            <ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="0" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Page ScrollViewer Style - for secondary navigation (place navigation in 36px top border area)-->
    <Style x:Key="PageScrollViewerSecondaryNavStyle" TargetType="ScrollViewer">
        <Setter Property="Margin" Value="-29,-16,-29,-16"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderThickness" Value="1,36,1,1"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                    <GradientStop Color="#FFA1A1A1" Offset=".10"/>
                    <GradientStop Color="White"/>
                    <GradientStop Color="#FFADADAD" Offset=".10"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
                            <Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>
                            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>
                            <ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="0" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Content Panel Style -->
    <Style x:Key="ContentPanelStyle" TargetType="StackPanel"/>

    <!-- Header Text Style -->
    <Style x:Key="HeaderTextStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Foreground" Value="#FF0D700D"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="24,16,24,2"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>

    <!-- This would be your Content Label Text Style -->
    <Style x:Key="ContentTextStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Foreground" Value="#FF4B4F5E"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="25,0,25,2"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>

    <!-- This would be your Content Body Text Style -->
    <Style x:Key="ContentBodyTextStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Foreground" Value="#FF313131"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="0,2,0,2"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>

    <!-- Content Text Style -->
    <Style x:Key="ControlLabelStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI Light, Lucida Sans Unicode, Verdana"/>
        <Setter Property="Foreground" Value="#FF313131"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="0,2,0,2"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="TextOptions.TextHintingMode" Value="Animated" />
    </Style>

    <!--NavBrandingStackPanelStyle-->
    <Style x:Key="NavBrandingStackPanelStyle" TargetType="StackPanel">
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="Orientation" Value="Horizontal"/>
    </Style>

    <!--LogoIcon-->
    <Style x:Key="NavLogoIcon" TargetType="ContentControl" BasedOn="{StaticResource LogoIcon}">
        <Setter Property="Margin" Value="0"/>
    </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Romania Romania
I have been a software developer for a while and still find this an interesting job.

Comments and Discussions