Customizing the Main Menu With Styles
The Main Menu control can be skinned using the standard Silverlight 2 method of setting Styles in the App.xaml file of your Silverlight project.
You need to login to Download the default Main Menu styles, If you do not have a login you can register for free!
Example of how to Apply a Skin to the Main Menu
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:MainMenu">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MainMenu">
<Canvas x:Name="RootElement" Background="{TemplateBinding Background}">
<Canvas.Resources>
<Style x:Key="horizontalStyle" TargetType="local:Menu">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</Canvas.Resources>
<local:Menu x:Name="ElementMenu" CloseWhenOutOfFocus="False" Style="{StaticResource horizontalStyle}" BorderThickness="0" LeftBorderThickness="0" LeftBrush="#00ffffff" Background="#00ffffff" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:MainMenuItem">
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value="#00ffffff" />
<Setter Property="HoverBorderBrush" Value="#2999ff" />
<Setter Property="HoverBorderThickness" Value="1" />
<Setter Property="HoverBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#eaf7fc" Offset="0.0" />
<GradientStop Color="#92cae6" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="6 2 6 2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MainMenuItem">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle x:Name="ElementHover" Grid.Row="0" RadiusX="2" RadiusY="2" Visibility="Collapsed" Stroke="{TemplateBinding HoverBorderBrush}" StrokeThickness="{TemplateBinding HoverBorderThickness}" Fill="{TemplateBinding HoverBrush}" />
<TextBlock x:Name="ElementText" Grid.Row="0" Text="{TemplateBinding Text}" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="Left"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:MenuItem">
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="2" />
<Setter Property="HoverBorderBrush" Value="#96d9f9" />
<Setter Property="HoverBorderThickness" Value="1" />
<Setter Property="Background" Value="#00ffffff" />
<Setter Property="HoverBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#aaf1f8fb" Offset="0.0" />
<GradientStop Color="#aabae4f6" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="ContentMargin" Value="8 5 8 5" />
<Setter Property="CheckBoxVisibility" Value="Collapsed" />
<Setter Property="IsChecked" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MenuItem">
<Grid x:Name="RootElement" Background="#00ffffff">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="ElementHover" Grid.Column="0" Grid.ColumnSpan="4" Margin="2" RadiusX="4" RadiusY="4" Visibility="Collapsed" Stroke="{TemplateBinding HoverBorderBrush}" StrokeThickness="{TemplateBinding HoverBorderThickness}" Fill="{TemplateBinding HoverBrush}" />
<Image x:Name="ElementIcon" Grid.Column="0" Margin="4 0 0 0" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
<CheckBox x:Name="ElementCheckBox" Grid.Column="0" Margin="4 0 0 0" IsChecked="{TemplateBinding IsChecked}" Visibility="{TemplateBinding CheckBoxVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock x:Name="ElementText" Grid.Column="1" Text="{TemplateBinding Text}" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="Left"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding ContentMargin}" />
<TextBlock x:Name="ElementShortcut" Grid.Column="2" Text="{TemplateBinding Shortcut}" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="Right" VerticalAlignment="Center"
FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}" />
<Polygon x:Name="ElementChildren" Grid.Column="3" Points="0,0 3,3 0,6" Fill="#000000" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, styling is a powerful method of customizing the controls to suite the look and feel of your Silverlight application.