c# - Animation works on several buttons WPF

Question

I have style for my buttons and in this style I set animation. When I hover the mouse over the button, my animation starts on both buttons, but I want the animation starts only on the button that I hovered.

Code in UserControl

<StackPanel>
            <Button Style="{StaticResource ButtonAuthenticationStyle}"
                    Command="{Binding MainPageCommand}"
                    x:Name="ButtonLogin"
                    Content="Auth"
                    Foreground="{StaticResource button-main-foreground}"
                    Background="{StaticResource button-main-background}"
                    BorderBrush="{StaticResource gray-82}"
                    HorizontalContentAlignment="Center"/>

            <Button Style="{StaticResource ButtonAuthenticationStyle}"
                    Command="{Binding RegistrationPageCommand}"
                    x:Name="ButtonRegistration"
                    Content="Reg"
                    Padding="5 0"
                    FontSize="15"
                    Margin="20 2"
                    Foreground="{StaticResource button-main-foreground}"
                    Background="{StaticResource button-main-background}"
                    BorderBrush="{StaticResource gray-82}"
                    HorizontalContentAlignment="Center"/>
</StackPanel>

Code in ButtonDictionary

<Style x:Key="ButtonBaseStyle" TargetType="Button">

    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>

</Style>

<Style x:Key="ButtonAuthenticationStyle" TargetType="Button" BasedOn="{StaticResource ButtonBaseStyle}">

    <Setter Property="FontSize" Value="18"/>
    <Setter Property="FontFamily" Value="Calibri"/>
    <Setter Property="Padding" Value="10 5"/>
    <Setter Property="Margin" Value="20 10"/>
    <Setter Property="BorderThickness" Value="2"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>

                    <TextBlock IsHitTestVisible="False"
                               Text="{TemplateBinding Content}"
                               x:Name="Text"
                               FontFamily="{TemplateBinding FontFamily}"
                               Padding="{TemplateBinding Padding}"
                               VerticalAlignment="Center"
                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                               Foreground="{TemplateBinding Foreground}">
                    </TextBlock>

                </Grid>

                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="#a6a6a6" Duration="0:0:0.5"/>
                                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#c2daff" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush.Color" To="Gray" Duration="0:0:0.5"/>
                                <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="#abccff" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="#6ea7ff"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#595959"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

Other triggers works correctly, but eventtriggers works on each buttons, why does it work this way?

question from:https://stackoverflow.com/questions/66046194/animation-works-on-several-buttons-wpf

Answer 1

Waitting for answers