主页 / 问题 / 937836
Accepted
petuch
Asked:2020-01-29 00:21:14 +0800 CST2020-01-29 00:21:14 +0800 CST

折叠垂直菜单

  • 772

将鼠标悬停在按钮上时菜单会展开，并在网格上的 MouseLeave 事件上折叠。如果菜单没有展开并且光标从网格中移除，菜单将打开和关闭。看到代码后，我想你会明白我在说什么。使用 MouseLeave 可以通过哪些其他方式完成此操作？

菜单折叠/展开动画。

<Window.Resources>        
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" 
                                       Storyboard.TargetName="GridHeaderMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="80"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CloseMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" 
                                       Storyboard.TargetName="GridHeaderMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="80"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

触发器：

<Window.Triggers>        
    <EventTrigger RoutedEvent="Image.MouseEnter" SourceName="imgOpenMenu">
        <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Grid.MouseLeave" SourceName="GridHeaderMenu">
        <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
    </EventTrigger>        
</Window.Triggers>

菜单：去掉了代码中的冗余代码，以求简洁。

            <Grid Name="GridHeaderMenu" Grid.RowSpan="2" Background="#FFEEE9E8" VerticalAlignment="Top"
                  Height="30" Width="150"
                  HorizontalAlignment="Right"
                  Margin=" 0, 50,10,0">
                <StackPanel Orientation="Vertical">

                    <StackPanel Orientation="Horizontal">
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal" Height="30" Margin="0, 10">
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/> 
                    </StackPanel>

                </StackPanel>
            </Grid>
c#

1 个回答

  1. Best Answer

    如果菜单没有展开并且光标从网格中移除，菜单将打开和关闭。

    这一切都是因为你明确写了起点的高度，去掉所有零帧（<EasingDoubleKeyFrame KeyTime="0" Value="..."/>），然后你的动画将从当前值开始Height。

    一般来说，你以一种奇怪的方式编写动画，也许值得将它重写为这样的东西？

    <DoubleAnimation Storyboard.TargetProperty="Height"
                 Storyboard.TargetName="GridHeaderMenu" 
                 Duration="0:0:0.3" To="30" />

    正如您所看到的，这里也没有任何From价值，只是To.

    • 1

相关问题