Question

I’m using the Silverlight Business Application Template but I need to customize the MainPage layout to match the client’s existing ASP.NET projects pattern. I was able to create the Navigation menu which highlights the selected item. But when a MouseEnter event occurs, the selected menu item’s style becomes that of MouseOver VisualState. And on MouseLeave, the selected menu item turns to Normal VisualState. This behavior worked for the solution’s default menu but something may be missing from my modification. The code definition are as follows. Thanks!

<Style x:Key="NavMenuItem" TargetType="HyperlinkButton">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Padding" Value="20,10,20,10" />
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="MinHeight" Value="40"/>
    <Setter Property="MinWidth" Value="150"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Grid Margin="20,20,0,0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0" To="1" Duration="00:00:00.01" 
                                                     Storyboard.TargetName="MenuItemBorder" 
                                                     Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation BeginTime="0" To="1" Duration="00:00:00.01" 
                                                     Storyboard.TargetName="MenuItemBorder" 
                                                     Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0" To="1" Duration="00:00:00.01" 
                                                     Storyboard.TargetName="MenuItemBorder" 
                                                     Storyboard.TargetProperty="Opacity" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="LinkStates">
                            <VisualState x:Name="InactiveLink"/>
                            <VisualState x:Name="ActiveLink">
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0" To="1" Duration="00:00:00.01" 
                                                     Storyboard.TargetName="MenuItemBorder" 
                                                     Storyboard.TargetProperty="Opacity" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Name="MenuItemBorder" CornerRadius="10,0,0,10" Opacity="0" 
                            MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}">
                        <!--BorderBrush="Silver" BorderThickness="1"-->
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                                <GradientStop Color="White" Offset="0.6"/>
                                <GradientStop Color="Silver" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <Border.Effect>
                            <DropShadowEffect x:Name="BorderShadow" ShadowDepth="5" Color="#FF484848" Opacity="0.5" BlurRadius="5"/>
                        </Border.Effect>
                    </Border>
                    <ContentPresenter x:Name="ContentPresenter" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

            <HyperlinkButton Style="{StaticResource NavMenuItem}" NavigateUri="/Home" TargetName="ContentFrame" 
                             MouseEnter="HyperlinkButton_MouseEnterLeave" MouseLeave="HyperlinkButton_MouseEnterLeave" />

    private void HyperlinkButton_MouseEnterLeave(object sender, MouseEventArgs e) {
        HyperlinkButton hb = sender as HyperlinkButton;
        if (hb.NavigateUri.ToString() == ContentFrame.CurrentSource.ToString())
            VisualStateManager.GoToState(hb, "ActiveLink", true);
    }

Answer 1

Maybe you could try to set the MouseOver VisualSatate of your button on the EventHandler if it Event is MouseEnter and reset it if it is a MouseLeave Event.

And i think i would set up two event handlers and not only one for both events, then you can easily set the MouseOver state and the ActiveState too.