Ok amigo, so I took about 15-20mins this morning to go ahead and throw together a few random examples of styles I’ve used in the past for notification type stuff. I’m guessing the mock you show is just a real rough example, so without knowing more precisely what it looks like it’s difficult to match the style like a designer would want to.
However, I imagine you could use these examples to get the creative juices flowing on how/what route to go, and just a taste of some of the things you can do real quick and easily. If you want a prettier/more precise example you’ll have to share the real screens etc. The animations and stuff could apply to other objects like the icon and stuff but for this example I just threw them at some boxes.
These are from my own bag of tricks, use them freely, I have tons more different techniques I could show you if ya want also but if we get too involved, well this sort of in depth advice is how I make a living, so may have to at least charge ya a case of beer or something 😉
Anyhow, throw this in a window, I just did it with a fresh quick wpf proj. so you’ll just paste them in and run it, they’re set to start on load.
Main thing I’ve found to avoid, is messing heavily with gradients and the various pixel shader stuff like that in mass animations. However stuff like this seems to do fine.
OUTPUT (In choppy .gif animated style anyway for visual example.):
AND THE MAGIC:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="MainWindow"
Title="MainWindow" Height="450" Width="250">
<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>