<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>

</Window>