<Window
x:Class="WpfApp5.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:local="clr-namespace:WpfApp5"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Name="UI"
Title="MainWindow"

Background="White"  
mc:Ignorable="d"    Height="350"  
    Width="525">  
<Window.Resources>

    <!-- Marching Ants -->  
    <Storyboard x:Key="MarchingAnts">  
        <DoubleAnimation BeginTime="00:00:00"  
                            Storyboard.TargetName="AlertBox"  
                            Storyboard.TargetProperty="StrokeThickness"  
                            To="4"  
                            Duration="0:0:0.25" />  
        <!-- If you want to run counter-clockwise, just swap the 'From' and 'To' values. -->  
        <DoubleAnimation BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="AlertBox" Storyboard.TargetProperty="StrokeDashOffset"  
                            Duration="0:3:0" From="1000" To="0"/>  
    </Storyboard>

    <!-- Pulse -->  
    <Storyboard x:Key="Pulse" RepeatBehavior="Forever">  
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[0\].(ScaleTransform.ScaleX)" Storyboard.TargetName="PulseBox">  
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>  
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>  
        </DoubleAnimationUsingKeyFrames>  
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[0\].(ScaleTransform.ScaleY)" Storyboard.TargetName="PulseBox">  
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.15"/>  
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>  
        </DoubleAnimationUsingKeyFrames>  
    </Storyboard>

    <!-- Flipper -->  
    <Storyboard x:Key="Flipper" RepeatBehavior="Forever">  
        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="FlipperBox">  
            <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>  
            <EasingPointKeyFrame KeyTime="0:0:2" Value="0.5,0.5"/>  
        </PointAnimationUsingKeyFrames>  
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[0\].(ScaleTransform.ScaleY)" Storyboard.TargetName="FlipperBox">  
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>  
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>  
        </DoubleAnimationUsingKeyFrames>  
    </Storyboard>

    <!-- Elasic Lines -->  
    <Storyboard x:Key="ElasticLines" RepeatBehavior="Forever" AutoReverse="True">  
        <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ElasticBox">  
            <EasingPointKeyFrame KeyTime="0:0:4" Value="12,8"/>  
        </PointAnimationUsingKeyFrames>  
    </Storyboard>

    <!-- Knight Rider -->  
    <Storyboard x:Key="KnightRider" RepeatBehavior="Forever" AutoReverse="True">  
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[3\].(TranslateTransform.X)" Storyboard.TargetName="KRBox">  
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-50"/>  
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="50"/>  
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>  
        </DoubleAnimationUsingKeyFrames>  
    </Storyboard>

</Window.Resources>  
<Window.Triggers>  
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">  
        <BeginStoryboard Storyboard="{StaticResource Pulse}"/>  
        <BeginStoryboard Storyboard="{StaticResource MarchingAnts}"/>  
        <BeginStoryboard Storyboard="{StaticResource Flipper}"/>  
        <BeginStoryboard Storyboard="{StaticResource ElasticLines}"/>  
        <BeginStoryboard Storyboard="{StaticResource KnightRider}"/>  
    </EventTrigger>  
</Window.Triggers>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">  
    <Grid.Resources>  
        <Style TargetType="{x:Type TextBlock}">  
            <Setter Property="Foreground" Value="White"/>  
            <Setter Property="FontWeight" Value="Bold"/>  
            <Setter Property="FontSize" Value="35"/>  
            <Setter Property="HorizontalAlignment" Value="Center"/>  
            <Setter Property="VerticalAlignment" Value="Center"/>  
            <Setter Property="Text" Value="ALERT"/>  
        </Style>  
        <Style TargetType="{x:Type Grid}">  
            <Setter Property="Margin" Value="0,10"/>  
        </Style>  
        <Style TargetType="{x:Type Rectangle}">  
            <Setter Property="Height" Value="50"/>  
            <Setter Property="Width" Value="150"/>  
        </Style>  
    </Grid.Resources>

    <StackPanel>

        <!-- Marching Ants -->  
        <Grid>

            <Rectangle x:Name="AlertBox"  
                  Stroke="Red"  
                   StrokeDashOffset="2" StrokeDashArray="5" Margin="5">  
                <Rectangle.Fill>  
                    <LinearGradientBrush StartPoint="0,0" EndPoint="6,4" MappingMode="Absolute" SpreadMethod="Repeat">  
                        <GradientStop Color="Red" Offset="0.25"/>  
                        <GradientStop Color="#00000000" Offset="0.15"/>  
                    </LinearGradientBrush>  
                </Rectangle.Fill>  
            </Rectangle>

            <TextBlock/>

        </Grid>  
        <!-- End Marching Ants -->

        <!-- Pulse : Will not skew other elements location like width/height animations would. -->  
        <Grid>  
            <Border x:Name="PulseBox"  
                    Background="Red" RenderTransformOrigin="0.5,0.5">  
                <Border.RenderTransform>  
                    <TransformGroup>  
                        <ScaleTransform/>  
                        <SkewTransform/>  
                        <RotateTransform/>  
                        <TranslateTransform/>  
                    </TransformGroup>  
                </Border.RenderTransform>

                <TextBlock/>

            </Border>  
        </Grid>  
        <!-- End Pulse -->

        <!-- Flipper -->  
        <Grid>  
            <Border x:Name="FlipperBox"  
                    Background="Red">  
                <Border.RenderTransform>  
                    <TransformGroup>  
                        <ScaleTransform/>  
                        <SkewTransform/>  
                        <RotateTransform/>  
                        <TranslateTransform/>  
                    </TransformGroup>  
                </Border.RenderTransform>

                <TextBlock/>

            </Border>  
        </Grid>  
        <!-- End Flipper -->

        <!-- Elastic Lines -->  
        <Grid>  
            <Rectangle x:Name="ElasticBox"  
                  Stroke="Red" StrokeThickness="5" Margin="5">  
                <Rectangle.Fill>  
                    <LinearGradientBrush StartPoint="0,0" EndPoint="6,4" MappingMode="Absolute" SpreadMethod="Repeat">  
                        <GradientStop Color="Red" Offset="0.25"/>  
                        <GradientStop Color="#00000000" Offset="0.15"/>  
                    </LinearGradientBrush>  
                </Rectangle.Fill>  
            </Rectangle>

            <TextBlock/>

        </Grid>  
        <!-- End Elastic Box -->

        <!-- Knight Rider -->  
        <Grid>  
            <Rectangle Fill="Red"/>  
            <Rectangle x:Name="KRBox" Width="50" Fill="White" RenderTransformOrigin="0.5,0.5">  
                <Rectangle.RenderTransform>  
                    <TransformGroup>  
                        <ScaleTransform/>  
                        <SkewTransform/>  
                        <RotateTransform/>  
                        <TranslateTransform/>  
                    </TransformGroup>  
                </Rectangle.RenderTransform>  
            </Rectangle>

            <TextBlock Foreground="Red"/>

        </Grid>  
        <!-- End Knight Rider -->

    </StackPanel>

</Grid>