Click here to Skip to main content
15,885,546 members
Articles / Desktop Programming / XAML

Silverlight Menu4U

Rate me:
Please Sign up or sign in to vote.
4.90/5 (59 votes)
14 Aug 2011CPOL11 min read 120K   4.1K   85  
A new Silverlight menu with styling and templating.
<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">

  <!-- ******MAIN PAGE STYLES****** -->
  <!-- **************************** -->
  <!-- Primary Color Brushes -->
  <SolidColorBrush x:Key="NavigationBackgroundColorBrush" Color="#FF484848"/>
  <SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="#FFFFFFFF"/>
  <SolidColorBrush x:Key="HighLightColorBrush" Color="#FF0097FC"/>
  <SolidColorBrush x:Key="HoverHyperlinkForegroundColorBrush" Color="#FFEBF7FF"/>
  <SolidColorBrush x:Key="HoverHyperLinkBackgroundColorBrush" Color="#FF747474"/>
  <SolidColorBrush x:Key="BodyTextColorBrush" Color="#FF313131"/>

  <!-- LayoutRoot Grid Style -->
  <Style x:Key="LayoutRootGridStyle" TargetType="Grid">
    <Setter Property="Background" Value="#FFFFFFFF"/>
  </Style>

  <!-- Content Border Style -->
  <Style x:Key="ContentBorderStyle" TargetType="Border">
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,0.045" StartPoint="0.5,0">
          <GradientStop Color="#6FCCCCCC"/>
          <GradientStop Color="#00CCCCCC" Offset="1"/>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" Value="#FFFFFFFF"/>
    <Setter Property="BorderThickness" Value="0,3,0,0"/>
    <Setter Property="Margin" Value="0,42,0,0"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
  </Style>

  <!-- Content Frame Style -->
  <Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="58,15,58,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="{StaticResource NavigationBackgroundColorBrush}"/>
    <Setter Property="Height" Value="42"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
  </Style>

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

  <!-- Branding StackPanel Style -->
  <Style x:Key="BrandingStackPanelStyle" TargetType="StackPanel">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Orientation" Value="Horizontal"/>
  </Style>

  <!-- Logo Path Style -->
  <Style x:Key="LogoIcon" TargetType="ContentControl">
    <Setter Property="Height" Value="24"/>
    <Setter Property="Width" Value="24"/>
    <Setter Property="Margin" Value="0,1,10,0"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
          <Grid>
            <!--<Path UseLayoutRounding='False' Fill="{StaticResource HighLightColorBrush}" Stretch="Fill" Data="M8,0 C12.417931,2.8898596E-06 16,3.5814998 16,8 C16,12.417819 12.41803,16 8,16 C3.5816212,16 6.1398991E-06,12.417912 0,8 C1.5351338E-06,6.8954077 0.22386749,5.8431153 0.62867981,4.8860393 C0.65398115,4.82622 0.6799894,4.7667723 0.70669389,4.7077074 L0.73170543,4.6541386 L5.6357112,9.5581446 L3.7429986,11.450858 L3.7429986,11.493001 L11.669835,11.493001 L11.669835,3.5661643 L11.627691,3.5661643 L9.7349787,5.4588776 L4.8993444,0.62324351 L5.0666013,0.55490673 C5.5510159,0.36389247 6.0585575,0.21878535 6.5838675,0.12495131 C6.8465204,0.078035071 7.1136146,0.043936942 7.3844767,0.023327276 C7.5199089,0.013022465 7.6562829,0.0060896641 7.7935166,0.0026129775 C7.862133,0.00087448902 7.9309645,4.5157563E-08 8,0 z"/>-->
            <Image Source="/Images/Menu4U.png"/>
            </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ApplicationName Style -->
  <Style x:Key="ApplicationNameStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Margin" Value="0,2,0,0"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="10" Opacity="0.25" ShadowDepth="0"/>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Links Border Style -->
  <Style x:Key="LinksBorderStyle" TargetType="Border">
    <Setter Property="Height" Value="42"/>
    <Setter Property="Margin" Value="25,0,25,0"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
  </Style>

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

  <!-- Link Style -->
  <Style x:Key="LinkStyle" TargetType="HyperlinkButton">
    <Setter Property="Background" Value="{StaticResource HighLightColorBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF9D9492"/>
    <Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <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="Template">
      <Setter.Value>
        <ControlTemplate TargetType="HyperlinkButton">
          <Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.95"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveElementBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="5"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InteractiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </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 BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <HorizontalAlignment>Center</HorizontalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <VerticalAlignment>Center</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <HorizontalAlignment>Center</HorizontalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <VerticalAlignment>Center</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="LinkStates">
                <VisualState x:Name="ActiveLink">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </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 BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusX)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(Rectangle.RadiusY)">
                      <EasingDoubleKeyFrame KeyTime="00:00:00" 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">
                <ContentPresenter.Effect>
                  <DropShadowEffect ShadowDepth="0" Color="#FF484848" Opacity="0.65" BlurRadius="0"/>
                </ContentPresenter.Effect>
              </ContentPresenter>
            </Border>
            <Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{StaticResource HoverHyperLinkBackgroundColorBrush}" BorderThickness="1,1,1,1" Opacity="0" BorderBrush="{StaticResource HoverHyperLinkBackgroundColorBrush}" CornerRadius="1,1,1,1"/>
            <Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
              <TextBlock x:Name="InteractiveElement" Foreground="{StaticResource HoverHyperlinkForegroundColorBrush}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}"/>
            </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" Value="#1FFFFFFF"/>
    <Setter Property="Stroke" Value="Transparent"/>
    <Setter Property="Width" Value="1"/>
    <Setter Property="Margin" Value="2,4,2,4"/>
  </Style>

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

  <!-- Page ScrollViewer Style -->
  <Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0,1,0,1"/>
    <Setter Property="Margin" Value="-58,-15,-58,-15"/>
    <Setter Property="Padding" Value="58,0,58,0"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
  </Style>

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

  <!-- Header Text Style -->
  <Style x:Key="HeaderTextStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource BodyTextColorBrush}"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Margin" Value="0,15,0,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>

  <!-- Content Text Style -->
  <Style x:Key="ContentTextStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource BodyTextColorBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Margin" Value="0,2,0,2"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
  </Style>

  <!-- Page HyperlinkButton Style -->
  <Style x:Key="PageHyperlinkButtonStyle" TargetType="HyperlinkButton">
    <Setter Property="TargetName" Value="_new"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
  </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
Instructor / Trainer Alura Cursos Online
Brazil Brazil

Comments and Discussions