XAML的鼠标悬停触发的进入/退出操作触摸UI元素的边缘时，无限循环

Question

我试图创建XAML按钮用鼠标触发，轮流其0保证金0,0,0,5但最近发现一个问题，当我离开光标在边缘的大部分按钮。开始和结束动作不断被触发，我结束了一个按钮，上上下下无限。

一些额外的信息：

1. 我使用Visual Studio 2017年
2. 该项目是WPF

我想，如果我申请一个布尔值的要求，我可以在C＃中解决这个问题这对于如果输入动作完成或进入上述的默认值中数字的退出动作只运行。我会做到这一点在此期间，但是，如果你们有什么具体的XAML的解决方案，我将非常感激，因为我想离开这个动画XAML尽可能。

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                            From="0"
                                            To="0.4"
                                            Duration="0:0:0.2"
                                            Storyboard.TargetProperty="Effect.Opacity"/>
                            <ThicknessAnimation 
                                            From="0"
                                            To="0,0,0,5"
                                            Duration="0:0:0.2"
                                            Storyboard.TargetProperty="Margin"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                            From="0.4"
                                            To="0"
                                            Duration="0:0:0.2"
                                            Storyboard.TargetProperty="Effect.Opacity"/>
                            <ThicknessAnimation 
                                            From="0,0,0,5"
                                            To="0"
                                            Duration="0:0:0.2"
                                            Storyboard.TargetProperty="Margin"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>

Answer 1

你需要额外的容器和转变预留了空间。

• 包装用透明网格动画边框
• 指定名称边境
• 此举动画触发器的ControlTemplate水平
• 加边境额外保证金，这将作为自由空间上移
• 调整从/到ThicknessAnimation属性来使用保留margin属性
• 添加Storyboard.TargetName =“{}边境”为故事板件（其中{}边境实际是边界名）

完成按钮的例子

<Button Width="100" Height="50">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid Background="Transparent">
                                <Border x:Name="Border" BorderThickness="5" BorderBrush="Black" Margin="0,5,0,0" Background="Red">
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Setter Property="Effect">
                                                <Setter.Value>
                                                    <DropShadowEffect ShadowDepth="0" BlurRadius="8" Color="#FFB0E9EF"/>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Border.Style>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger  Property="IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard >
                                            <Storyboard>
                                                <DoubleAnimation From="0" To="0.4" Duration="0:0:0.2" Storyboard.TargetName="Border" 
                                                                 Storyboard.TargetProperty="Effect.Opacity"/>
                                                <ThicknessAnimation From="0,5,0,0" To="0,0,0,5" Duration="0:0:0.2" Storyboard.TargetName="Border" 
                                                                    Storyboard.TargetProperty="Margin"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0.4" To="0" Duration="0:0:0.2" Storyboard.TargetName="Border" 
                                                                 Storyboard.TargetProperty="Effect.Opacity"/>
                                                <ThicknessAnimation From="0,0,0,5" To="0,5,0,0" Duration="0:0:0.2" Storyboard.TargetName="Border" 
                                                                    Storyboard.TargetProperty="Margin"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>