从 Silverlight 业务应用程序自定义导航菜单的问题

Question

我正在使用 Silverlight 业务应用程序模板，但我需要自定义 MainPage 布局以匹配客户端现有的 ASP.NET 项目模式。我能够创建突出显示所选项目的导航菜单。但是当一个 MouseEnter 事件发生时，被选中的菜单项的样式就变成了 MouseOver VisualState 的样式。在 MouseLeave 上，选定的菜单项变为 Normal VisualState。此行为适用于解决方案的默认菜单，但我的修改可能缺少某些内容。代码定义如下。谢谢！

<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

如果事件是 MouseEnter，也许你可以尝试在 EventHandler 上设置按钮的 MouseOver VisualSatate，如果它是 MouseLeave 事件，则重置它。

我想我会设置两个事件处理程序，而不仅仅是一个用于两个事件，然后您也可以轻松设置 MouseOver 状态和 ActiveState。