WPF 中的 SliderMenu 功能答案

【问题标题】：SliderMenu feature in WPFWPF 中的 SliderMenu 功能
【发布时间】：2018-05-03 13:39:55
【问题描述】：

我不能做类似这个视频的事情，动画没有停止，菜单总是闪烁。这是我的 XAML：

<StackPanel.Style>
    <Style TargetType="StackPanel">
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" 
                              From="-70,0,0,0" To="15,0,15,0" 
                              DecelerationRatio=".8" Duration="0:0:0.7"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" 
                              From="15,0,15,0" To="-70,0,0,0" 
                              DecelerationRatio=".8" Duration="0:0:0.7"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</StackPanel.Style>

它有什么问题？

【问题讨论】：

这是一个 33 分钟的视频，使用土耳其语。您可能想在视频中提及要跳到的时间。

标签： c# wpf animation storyboard slider

【解决方案1】：

闪烁发生是因为 StackPanel 开始动画时，它会将自身移开（鼠标光标），从而导致其他动画开始。我没有看到完整的代码，所以这里有一些改进代码的建议。

确保整个菜单都是最热门的可见（例如通过设置背景）
不要使用两个触发器，将一个触发器与进入和退出触发器一起使用
避开左边的边距 - 它会再次导致同样的闪烁。

<StackPanel Background="Blue" Width="100" HorizontalAlignment="Left">
    <StackPanel.Style>
        <Style TargetType="StackPanel">
            <Setter Property="Margin" Value="-70,0,0,0"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" 
                                  From="-70,0,0,0" To="0,0,0,0" 
                                  DecelerationRatio=".8" Duration="0:0:0.7"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" 
                                  From="0,0,0,0" To="-70,0,0,0" 
                                  DecelerationRatio=".8" Duration="0:0:0.7"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Style>
    <Button Width="100" Height="25"></Button>
</StackPanel>

结果：

【讨论】：

我忘记张贴Image(ICON)的边距，当我删除它时，它会起作用，
@You-shengLiang 您仍然应该使用单个触发器而不是两个 EventTrigger。