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

发布于 2024-12-07 04:37:30 字数 5428 浏览 0 评论 0原文

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

<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);
    }

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);
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

风吹雪碎 2024-12-14 04:37:30

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

我想我应该设置两个事件处理程序,而不仅仅是为两个事件设置一个,然后您也可以轻松设置 MouseOver 状态和 ActiveState。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文