Silverlight Menu4U

<navigation:Page x:Class="Menu4UDemo.Views.Templating"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:ctrl="clr-namespace:Silverlight.Controls;assembly=Silverlight.Controls"
    xmlns:converters="clr-namespace:Silverlight.Controls.Converters;assembly=Silverlight.Controls"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Templating"
    Style="{StaticResource PageStyle}">

    <navigation:Page.Resources>

        <converters:HasItemsToVisibilityConverter x:Key="hasItemsToVis"/>

        <DataTemplate x:Key="firstLevelMenuItemTemplate">
            <Grid Margin="0,0,0,0">
                <TextBlock Margin="32,16,7,0" VerticalAlignment="Center" FontFamily="AR BLANCA" FontSize="32" Text="{Binding Text}"/>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="secondLevelMenuItemTemplate">
            <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="2" Width="300" Margin="32,0,32,0">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" HorizontalAlignment="Left" Source="{Binding IconUrl}" VerticalAlignment="Top"/>
                    <StackPanel Grid.Column="1">
                        <TextBlock Margin="8,0,0,0" Text="{Binding Text}" FontSize="16" FontWeight="Bold" HorizontalAlignment="Left"/>
                        <TextBlock Margin="8,0,0,0" Text="{Binding Description}" FontSize="11" TextWrapping="Wrap" HorizontalAlignment="Left" />
                    </StackPanel>
                    <Path Grid.Column="2" Data="M1,1 L0,0 L0,2 L1,1" Width="10" Height="10" Stretch="Fill" Fill="Black"/>
                </Grid>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="secondLevelHeaderTopTemplate">
        </DataTemplate>

        <DataTemplate x:Key="headerTemplate">
            <Grid Width="380" Height="80">
                <Image Source="/Images/ScrollTop.png" Stretch="UniformToFill"/>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="footerTemplate">
            <Grid Width="380" Height="59">
                <Image Source="/Images/ScrollBottom.png" Stretch="UniformToFill"/>
            </Grid>
        </DataTemplate>
        
        <DataTemplate x:Key="secondLevelHeaderLeftTemplate">
            <Grid Margin="0,-2,0,-2" Background="White" Height="25" Width="61">
                <Path Data="M1,0 L0,0 L0,1 L1,1" Stretch="Fill" Stroke="Gray"/>
                <TextBlock Margin="3,0,3,0" VerticalAlignment="Center">
                    <ctrl:BindingHelper.Binding>
                        <ctrl:BindingProperties TargetProperty="Text" SourceProperty="SecondLevelHeaderText"
                                    RelativeSourceAncestorType="SLMenu" RelativeSourceAncestorLevel="1"/>
                    </ctrl:BindingHelper.Binding>
                </TextBlock>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="secondLevelHeaderRightTemplate">
            <Grid Margin="0,-2,0,-2" Background="White" Height="25" Width="67">
                <Path Data="M0,0 L1,0 L1,1 L0,1" Stretch="Fill" Stroke="Gray"/>
                <TextBlock Margin="3,0,3,0" VerticalAlignment="Center">
                    <ctrl:BindingHelper.Binding>
                        <ctrl:BindingProperties TargetProperty="Text" SourceProperty="SecondLevelHeaderText"
                                    RelativeSourceAncestorType="SLMenu" RelativeSourceAncestorLevel="1"/>
                    </ctrl:BindingHelper.Binding>
                </TextBlock>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="secondLevelHeaderBottomTemplate">
            <Grid Margin="-2,0,-2,0" Background="White" Height="25">
                <Path Data="M0,0 L0,1 L1,1 L1,0" Stretch="Fill" Stroke="Gray"/>
                <TextBlock Margin="8,3,7,0" VerticalAlignment="Center">
                    <ctrl:BindingHelper.Binding>
                        <ctrl:BindingProperties TargetProperty="Text" SourceProperty="SecondLevelHeaderText"
                                    RelativeSourceAncestorType="SLMenu" RelativeSourceAncestorLevel="1"/>
                    </ctrl:BindingHelper.Binding>
                </TextBlock>
            </Grid>
        </DataTemplate>

        <Style x:Key="menuBorderStyle" TargetType="Border">
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="25" Direction="315" ShadowDepth="3" Color="#ccc" />
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="itemSelectionStyle" TargetType="Border">
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="#ffffffff" Offset="0"/>
                        <GradientStop Color="#40ffffff" Offset="0.6"/>
                        <GradientStop Color="#00ffffff" Offset="1"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="CornerRadius" Value="2"/>
            <Setter Property="Margin" Value="2,1,2,1"/>
        </Style>

        <Style x:Key="slMenuStyle" TargetType="ctrl:SLMenu">
            <Setter Property="FirstLevelItemsPanelBrush">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Transparent" Offset="0"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="SecondLevelItemsPanelBrush">
                <Setter.Value>
                    <ImageBrush ImageSource="/Images/ScrollBody.png"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="Segoe Script"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Margin" Value="32"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="MenuBorderStyle" Value="{StaticResource menuBorderStyle}"/>
            <Setter Property="ItemSelectionStyle" Value="{StaticResource itemSelectionStyle}"/>
            <Setter Property="HeaderTemplate" Value="{StaticResource headerTemplate}"/>
            <Setter Property="FooterTemplate" Value="{StaticResource footerTemplate}"/>
        </Style>


    </navigation:Page.Resources>

    <Grid x:Name="LayoutRoot">

        <Grid.Background>
            <ImageBrush ImageSource="/Images/Hogwarts.png" Stretch="UniformToFill"/>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="28"/>
            <RowDefinition/>
            <RowDefinition Height="28"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>

        <Grid 
            Grid.Row="0"
            Grid.RowSpan="3"
            Grid.Column="0"
            Grid.ColumnSpan="3"
            Background="Transparent" MouseLeftButtonDown="Grid_MouseLeftButtonDown"/>
        
        <ctrl:SLMenu 
            x:Name="mnu" 
            Grid.Row="0"
            Grid.RowSpan="3"
            Grid.Column="1"
            Grid.ColumnSpan="1"
            FirstLevelMenuItemTemplate="{StaticResource firstLevelMenuItemTemplate}"
            SecondLevelMenuItemTemplate="{StaticResource secondLevelMenuItemTemplate}"
            TabTemplate="{StaticResource secondLevelHeaderTopTemplate}"
            DataSource="{Binding MenuRoot}"
            VerticalAlignment="Top"
            HorizontalAlignment="Stretch"
            Style="{StaticResource slMenuStyle}">
            
        </ctrl:SLMenu>

    </Grid>
</navigation:Page>