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

Mojtaba_Hakim 281 Reputation points
2022-11-16T10:56:33.06+00:00

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)'.'

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,708 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,599 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
789 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Hui Liu-MSFT 47,176 Reputation points Microsoft Vendor
    2022-11-17T06:58:14.013+00:00

    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.

    1 person found this answer helpful.