WPF C#/VB
Animation with Storyboards

<!-- AZUL CODING --------------------------------------- -->
<!-- WPF C#/VB - Animation with Storyboards -->
<!-- https://youtu.be/eMyKDbMnExw -->


<Window x:Class="StoryboardAnimation.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"
        mc:Ignorable="d"
        Title="Azul Coding - Animations" Height="235" Width="525" Background="AliceBlue" ResizeMode="NoResize">
    <Window.Resources>
        <Storyboard x:Key="MovingSquares">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="GreenRect" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <EasingThicknessKeyFrame KeyTime="00:00:01" Value="40,40,0,0">
                    <EasingThicknessKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingThicknessKeyFrame.EasingFunction>
                </EasingThicknessKeyFrame>
            </ThicknessAnimationUsingKeyFrames>
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="BlueRect" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                <EasingThicknessKeyFrame KeyTime="00:00:01" Value="80,80,0,0">
                    <EasingThicknessKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingThicknessKeyFrame.EasingFunction>
                </EasingThicknessKeyFrame>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FadeAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HelpTxt" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FadeAnimationReverse">
            <DoubleAnimation Storyboard.TargetName="HelpTxt" To="0" Duration="00:00:00.5000000" Storyboard.TargetProperty="(UIElement.Opacity)"/>
        </Storyboard>
        <Storyboard x:Key="ColourAnimation" Completed="ColourAnimation_Completed">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="GreenRect" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF2C88A0"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BlueRect" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF3C9E5C"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource MovingSquares}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseEnter" SourceName="FadeBtn">
            <BeginStoryboard Storyboard="{StaticResource FadeAnimation}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave" SourceName="FadeBtn">
            <BeginStoryboard Storyboard="{StaticResource FadeAnimationReverse}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Rectangle x:Name="GreenRect" HorizontalAlignment="Left" Height="75" Margin="60,60,0,0" VerticalAlignment="Top" Width="75" Fill="#FF3C9E5C" Stroke="AliceBlue" StrokeThickness="3"/>
        <Rectangle x:Name="BlueRect" HorizontalAlignment="Left" Height="75" Margin="60,60,0,0" VerticalAlignment="Top" Width="75" Fill="#FF2C88A0" Stroke="AliceBlue" StrokeThickness="3"/>

        <TextBlock x:Name="HelpTxt" HorizontalAlignment="Left" Opacity="0" Margin="231,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="16" Text="This is some help text" FontWeight="SemiBold"/>
        <Button x:Name="FadeBtn" Content="Show help text" HorizontalAlignment="Left" Margin="231,98,0,0" VerticalAlignment="Top" FontSize="14" Padding="10,5"/>
        <Button x:Name="ColourBtn" Click="ColourBtn_Click" Content="Change colour" HorizontalAlignment="Left" Margin="358,98,0,0" VerticalAlignment="Top" FontSize="14" Padding="10,5"/>
    </Grid>
</Window>

// AZUL CODING ---------------------------------------
// WPF C#/VB - Animation with Storyboards
// https://youtu.be/eMyKDbMnExw


using System.Windows;
using System.Windows.Media.Animation;

namespace StoryboardAnimation
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Call CreateStoryboard() here to use the code-behind version
        }

        private void ColourBtn_Click(object sender, RoutedEventArgs e)
        {
            BeginStoryboard((Storyboard)FindResource("ColourAnimation"));
        }

        private void ColourAnimation_Completed(object sender, EventArgs e)
        {
            ColourBtn.Visibility = Visibility.Collapsed;
        }

        private void CreateStoryboard()
        {
            Storyboard colourAnimation = new();

            ColourBtn.Click += (object sender, RoutedEventArgs e) => colourAnimation.Begin(this);
            colourAnimation.Completed += ColourAnimation_Completed;

            ColorAnimationUsingKeyFrames greenAnimation = new();
            Storyboard.SetTargetName(greenAnimation, nameof(GreenRect));
            Storyboard.SetTargetProperty(greenAnimation, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));

            EasingColorKeyFrame greenKeyFrame = new()
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)),
                Value = (Color)ColorConverter.ConvertFromString("#FF2C88A0")
            };
            greenAnimation.KeyFrames.Add(greenKeyFrame);

            ColorAnimationUsingKeyFrames blueAnimation = new();
            Storyboard.SetTargetName(blueAnimation, nameof(BlueRect));
            Storyboard.SetTargetProperty(blueAnimation, new("(Shape.Fill).(SolidColorBrush.Color)"));

            EasingColorKeyFrame blueKeyFrame = new()
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)),
                Value = (Color)ColorConverter.ConvertFromString("#FF3C9E5C")
            };
            blueAnimation.KeyFrames.Add(blueKeyFrame);

            colourAnimation.Children.Add(greenAnimation);
            colourAnimation.Children.Add(blueAnimation);
        }
    }
}

' AZUL CODING ---------------------------------------
' WPF C#/VB - Animation with Storyboards
' https://youtu.be/eMyKDbMnExw


Imports System.Windows
Imports System.Windows.Media.Animation

Class MainWindow

    Public Sub New()
        InitializeComponent()

        ' Call CreateStoryboard() here to use the code-behind version
    End Sub

    Private Sub ColourBtn_Click(sender As Object, e As RoutedEventArgs)
        BeginStoryboard(FindResource("ColourAnimation"))
    End Sub

    Private Sub ColourAnimation_Completed(sender As Object, e As EventArgs)
        ColourBtn.Visibility = Visibility.Collapsed
    End Sub

    Private Sub CreateStoryboard()
        Dim colourAnimation As New Storyboard()

        AddHandler ColourBtn.Click, Sub(sender As Object, e As RoutedEventArgs) colourAnimation.Begin(Me)
        AddHandler colourAnimation.Completed, AddressOf ColourAnimation_Completed

        Dim greenAnimation As New ColorAnimationUsingKeyFrames()
        Storyboard.SetTargetName(greenAnimation, NameOf(GreenRect))
        Storyboard.SetTargetProperty(greenAnimation, New PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"))

        Dim greenKeyFrame As New EasingColorKeyFrame() With {
            .KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)),
            .Value = ColorConverter.ConvertFromString("#FF2C88A0")
        }
        greenAnimation.KeyFrames.Add(greenKeyFrame)

        Dim blueAnimation As New ColorAnimationUsingKeyFrames()
        Storyboard.SetTargetName(blueAnimation, NameOf(BlueRect))
        Storyboard.SetTargetProperty(blueAnimation, New PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"))

        Dim blueKeyFrame As New EasingColorKeyFrame() With {
            .KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)),
            .Value = ColorConverter.ConvertFromString("#FF3C9E5C")
        }
        blueAnimation.KeyFrames.Add(blueKeyFrame)

        colourAnimation.Children.Add(greenAnimation)
        colourAnimation.Children.Add(blueAnimation)
    End Sub
End Class