Действия XAML MouseOver Trigger действия Enter / Exit бесконечно зацикливаются при касании края элемента пользовательского интерфейса

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

Вам нужен дополнительный контейнер и зарезервированное пространство для смены.

• оберните вашу анимацию Граница с прозрачной сеткой
• назначьте имя границе
• переместите триггеры анимации в ControlTemplatelevel
• добавить дополнительное поле для рамки, которое будет использоваться в качестве свободного пространства для перемещения вверх
• настроить свойства From / To ThicknessAnimation для использования свойства зарезервированного поля
• add 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>