How to call a Storyboard of the events of any control in xaml in WPF?

Question

I want to do the animation on any event in any control that I want to call, but only in XAML. I don't want to use code behind

I'm using C# WPF and have a Animation Style for the Border that is inside of a Grid that raise on MouseEnter event

  <Style x:Key="Atash" TargetType="Border">  
        <Style.Triggers>  
            <EventTrigger RoutedEvent="UIElement.MouseEnter">  
                <BeginStoryboard>  
                    <Storyboard>  
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" >  
                            <EasingDoubleKeyFrame KeyTime="0" Value="12">  
                                <EasingDoubleKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingDoubleKeyFrame.EasingFunction>  
                            </EasingDoubleKeyFrame>  
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="37">  
                                <EasingDoubleKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingDoubleKeyFrame.EasingFunction>  
                            </EasingDoubleKeyFrame>  
                        </DoubleAnimationUsingKeyFrames>  
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" >  
                            <EasingThicknessKeyFrame KeyTime="0" Value="5,3">  
                                <EasingThicknessKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingThicknessKeyFrame.EasingFunction>  
                            </EasingThicknessKeyFrame>  
                        </ThicknessAnimationUsingKeyFrames>  
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" >  
                            <EasingColorKeyFrame KeyTime="0" Value="#FF4CAF50">  
                                <EasingColorKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingColorKeyFrame.EasingFunction>  
                            </EasingColorKeyFrame>  
                            <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF4CAF50"/>  
                        </ColorAnimationUsingKeyFrames>  
                    </Storyboard>  
                </BeginStoryboard>  
           </EventTrigger>  
        </Style>  

What I need:

when I set the Style of my Border to Border x:Name="border2" Style="{StaticResource Atash}" The animation starts when the MouseEnter event occurs on the Border itself (mouse on the border). But I want my animation to be executed in all the events that I want according to several specified controls.

I mean that I can set this style on the grid as well : Grid Style="{StaticResource Atash}"

Why, because I want this animation to run when the mouse is on the grid, not just for the border

Update:

Full XAML:

<Window x:Class="WpfApp11.MainWindow"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    xmlns:local="clr-namespace:WpfApp11"  
    mc:Ignorable="d"  
    Title="MainWindow" Height="450" Width="800">  
<Window.Resources>  
  
    <Style x:Key="Atash" TargetType="FrameworkElement">  
        <Style.Triggers>  
            <EventTrigger RoutedEvent="MouseEnter">  
                <BeginStoryboard>  
                    <Storyboard>  
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)">  
                            <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="1,1,10,1">  
                                <EasingThicknessKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingThicknessKeyFrame.EasingFunction>  
                            </EasingThicknessKeyFrame>  
                        </ThicknessAnimationUsingKeyFrames>  
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">  
                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF23A232">  
                                <EasingColorKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingColorKeyFrame.EasingFunction>  
                            </EasingColorKeyFrame>  
                        </ColorAnimationUsingKeyFrames>  
                    </Storyboard>  
                </BeginStoryboard>  
            </EventTrigger>  
  
            <EventTrigger RoutedEvent="MouseLeave">  
                <BeginStoryboard>  
                    <Storyboard x:Name="DoOnOut">  
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)">  
                            <SplineThicknessKeyFrame KeyTime="0" Value="1,1,10,1"/>  
                            <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="1">  
                                <EasingThicknessKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingThicknessKeyFrame.EasingFunction>  
                            </EasingThicknessKeyFrame>  
                        </ThicknessAnimationUsingKeyFrames>  
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">  
                            <SplineColorKeyFrame KeyTime="0" Value="#FF23A232"/>  
                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="White">  
                                <EasingColorKeyFrame.EasingFunction>  
                                    <ExponentialEase EasingMode="EaseInOut"/>  
                                </EasingColorKeyFrame.EasingFunction>  
                            </EasingColorKeyFrame>  
                        </ColorAnimationUsingKeyFrames>  
                    </Storyboard>  
                </BeginStoryboard>  
            </EventTrigger>  
        </Style.Triggers>  
    </Style>  
  
</Window.Resources>  
<Grid Background="#FF1B1B1C">  
      
    <Grid x:Name="GrdBtn2" Style="{StaticResource Atash}" Margin="323,167,345,135">  
        <Border x:Name="border2"  Visibility="Visible" BorderBrush="White" BorderThickness="5,3" CornerRadius="80" Cursor="Hand" Width="auto" Height="auto" Background="#FF4CAF50">  
            <Border.Effect>  
                <DropShadowEffect Color="White" BlurRadius="12" ShadowDepth="0"/>  
            </Border.Effect>  
        </Border>  
        <TextBlock  Text=" Automasion"  LineStackingStrategy="MaxHeight" LineHeight="20" TextAlignment="Center" Width="auto" Height="auto" TextWrapping="Wrap" Margin="25,22,27,21" Foreground="White" Background="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center"/>  
    </Grid>  
</Grid>  

Error On MouseEnter of Grid:

System.InvalidOperationException: ''BorderBrush' property does not point to a DependencyObject in path '(0).(1)'.'

Answer 1

You could effect all elements that inherited from control. But you can't apply style for Grid and Border with the same style. For the common properties of controls, they can be inherited and used. The code below is working.

<Style x:Key="DefaultStyle" TargetType="{x:Type FrameworkElement}">  
    <Setter Property="Control.Margin" Value="50"/>  
</Style>  
<Style TargetType="Grid" BasedOn="{StaticResource DefaultStyle}"/>  
<Style TargetType="Border" BasedOn="{StaticResource DefaultStyle}"/>  

But BorderBrush and BorderThickness are Border-specific properties, which are not available in other controls. So styles with BorderThickness and BorderBrush applied to controls that don't match won't work.

----------------------------------------------------------------------------

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.