WPF: Can I add color animation to a style?

This is a simple WPF window in XAML:

<Window x:Class="AnimateTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
        x:Name="MainWindow"
        Style="{StaticResource TestStyle}">
    <Grid>
    </Grid>
</Window>

Please note that there is a style. What can we do with style? This App.xamlwhich gives it a light blue background

<Application x:Class="AnimateTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <Style x:Key="TestStyle">
            <Setter Property="Window.Background" Value="AliceBlue" />
        </Style>
    </Application.Resources>
</Application>

To complicate things, this is a background that gives it a blue gradient background:

<Application x:Class="AnimateTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <LinearGradientBrush x:Key="BackgroundBrush"
            EndPoint="0.6,0.6" StartPoint="0,0">
            <GradientStop Color="#FFFFFFFF" Offset="0" />
            <GradientStop Color="#FFD0D0F0" Offset="1" />
        </LinearGradientBrush>
        <Style x:Key="TestStyle">
            <Setter Property="Window.Background" Value="{StaticResource BackgroundBrush}" />
        </Style>
    </Application.Resources>
</Application>

The last step I want to take is to bring this color to life. I have

<Application x:Class="AnimateTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <LinearGradientBrush x:Key="BackgroundBrush"
            EndPoint="0.6,0.6" StartPoint="0,0">
            <GradientStop Color="#FFFFFFFF" Offset="0" />
            <GradientStop Color="#FFD0D0F0" Offset="1" />
        </LinearGradientBrush>
        <Style x:Key="TestStyle">
            <Setter Property="Window.Background" Value="{StaticResource BackgroundBrush}" />
        </Style>
        <Storyboard x:Key="ThemeAnimation">
            <ColorAnimationUsingKeyFrames
            Storyboard.TargetName="(UIElement)"
            Storyboard.TargetProperty="Background.GradientStops[1].Color"
            Duration="0:0:10"
            RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames.KeyFrames>
                    <LinearColorKeyFrame Value="#FFD0D0F0" KeyTime="0:0:0" />
                    <LinearColorKeyFrame Value="#FFF0D0F0" KeyTime="0:0:10" />
                </ColorAnimationUsingKeyFrames.KeyFrames>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Application.Resources>
</Application>

Therefore, I can do this in the Window constructor:

        object themeAnimationObject = this.FindResource("ThemeAnimation");
        Storyboard themeAnimation = themeAnimationObject as Storyboard;
        themeAnimation.Begin(this);

But I get an exception:

(UIElement)' name cannot be found in the name scope of 'AnimateTest.Window1'

I tried various combinations of values ​​for the animation properties Storyboard.TargetNameand Storyboard.TargetProperty, but they didn’t work, I just groped in the dark. The best result would be to apply style, animation, and everything in any window without any restrictions or with minimal C # code

Update: App.xaml is working here based on itowlson answer:

<Application x:Class="AnimateTest.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <LinearGradientBrush x:Key="BackgroundBrush"
            EndPoint="0.6,0.6" StartPoint="0,0">
            <GradientStop Color="#FFFFFFFF" Offset="0" />
            <GradientStop Color="#FFD0D0F0" Offset="1" />
        </LinearGradientBrush>
        <Style x:Key="TestStyle" TargetType="FrameworkElement">
            <Setter Property="Window.Background" Value="{StaticResource BackgroundBrush}" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames
                                Storyboard.TargetProperty="Background.GradientStops[1].Color"
                                Duration="0:0:10"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <ColorAnimationUsingKeyFrames.KeyFrames>
                                    <LinearColorKeyFrame Value="#FFD0D0F0" KeyTime="0:0:0" />
                                    <LinearColorKeyFrame Value="#FFF0D0F0" KeyTime="0:0:10" />
                                </ColorAnimationUsingKeyFrames.KeyFrames>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Application.Resources>
</Application>
+3
1

"(UIElement)", TargetName . Storyboard.Begin(FrameworkElement) : " TargetName containsObject", TargetName, Background.GradientStops [1]. , .

, , EventTrigger ? . EventTrigger MSDN .

+4

Source: https://habr.com/ru/post/1724828/


All Articles