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

时间:2011-09-26 18:39:47

标签: c# silverlight xaml menu navigation

我正在使用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);
    }

1 个答案:

答案 0 :(得分:0)

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

我想我会设置两个事件处理程序,而不仅仅是两个事件处理器,然后你可以轻松设置MouseOver状态和ActiveState。