Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is something that I was working on just recently in order to create a loading animation. This xaml will produce an animated ring of circles. </p> <p>My initial idea was to create an adorner and use this animation as it's content, then to display the loading animation in the adorners layer and grey out the content underneath.</p> <p>Haven't had the chance to finish it yet, so I thought I would just post the animation for your reference.</p> <pre><code>&lt;Window x:Class="WpfApplication2.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" &gt; &lt;Window.Resources&gt; &lt;Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/&gt; &lt;Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/&gt; &lt;Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever"&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"&gt; &lt;SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/&gt; &lt;SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/Window.Resources&gt; &lt;Window.Triggers&gt; &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation0}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation1}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation2}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation3}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation4}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation5}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation6}"/&gt; &lt;BeginStoryboard Storyboard="{StaticResource Animation7}"/&gt; &lt;/EventTrigger&gt; &lt;/Window.Triggers&gt; &lt;Canvas&gt; &lt;Canvas Canvas.Left="21.75" Canvas.Top="14" Height="81.302" Width="80.197"&gt; &lt;Canvas.Resources&gt; &lt;Style TargetType="Ellipse"&gt; &lt;Setter Property="Width" Value="15"/&gt; &lt;Setter Property="Height" Value="15" /&gt; &lt;Setter Property="Fill" Value="#FFFFFFFF" /&gt; &lt;/Style&gt; &lt;/Canvas.Resources&gt; &lt;Ellipse x:Name="_00" Canvas.Left="24.75" Canvas.Top="50"/&gt; &lt;Ellipse x:Name="_01" Canvas.Top="36" Canvas.Left="29.5"/&gt; &lt;Ellipse x:Name="_02" Canvas.Left="43.5" Canvas.Top="29.75"/&gt; &lt;Ellipse x:Name="_03" Canvas.Left="57.75" Canvas.Top="35.75"/&gt; &lt;Ellipse x:Name="_04" Canvas.Left="63.5" Canvas.Top="49.75" /&gt; &lt;Ellipse x:Name="_05" Canvas.Left="57.75" Canvas.Top="63.5"/&gt; &lt;Ellipse x:Name="_06" Canvas.Left="43.75" Canvas.Top="68.75"/&gt; &lt;Ellipse x:Name="_07" Canvas.Top="63.25" Canvas.Left="30" /&gt; &lt;Ellipse Stroke="{x:Null}" Width="39.5" Height="39.5" Canvas.Left="31.75" Canvas.Top="37" Fill="{x:Null}"/&gt; &lt;/Canvas&gt; &lt;/Canvas&gt; &lt;/Window&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload