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

Question

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

Long story short : 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

Thanks

May related link:

.

Update Full XAML Code:

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

is there any way ? please give advice – Mojtabah Nov 16 '22 at 12:09 — Mojtabah, Nov 16 '22 at 12:09

score 0 · Answer 1 · answered Nov 16 '22 at 15:07

0

If you set the TargetType of the Style to FrameworkElement, you can apply it to any FrameworkElement including a Grid and a Border:

<Style x:Key="Atash" TargetType="FrameworkElement">
...

Obviously you cannot animate the BorderThickness of anything else than a Border though.

Your animation also assumes that the Background of the element to be animated is set to a SolidColorBrush and that it has a DropShadowEffect applied.

answered Nov 16 '22 at 15:07

mm8

163,881
10
57
88

I have updated my question may I ask you to please check, I need to run storyboard on others control's events – Mojtabah Nov 16 '22 at 15:28
1

I know all engineers work hard and try to help everyone with their question, but it's rare that the experts see your question, is there any way to contact you? – Mojtabah Nov 16 '22 at 15:28
1

For your animation to work, you need to set the `BorderBrush` property to a `SolidColorBrush`, e.g.: ``. – mm8 Nov 16 '22 at 15:30
I am not sure I understand the question. You specify the event to start the storyboard using the `RoutedEvent` property of the `EventTrigger`. – mm8 Nov 16 '22 at 15:37
Because I couldn't set a style using it to set the grid element so that the mouse that came on the animation grid related to the border doesn't fall into that grid, I got here. – Mojtabah Nov 16 '22 at 15:42
1

As mentioned, it makes no sense to try to animate the `BorderThickness` property of anything else than a `Border`. So you should probably use a specific `Border` style if you want to animate this property as part of the style. – mm8 Nov 16 '22 at 15:44
I am making a button using grid-textblock-border so that I can apply a blur effect only on the border without affecting the text. – Mojtabah Nov 16 '22 at 15:45

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

1 Answers1