HOW TO: Animations

This post is not about to teach you how to do animations, but to give you info about features, changes and limitations of Empty Keys UI compared to standard WPF. You can find info about WPF animations on http://msdn.microsoft.com/en-us/lib...10%29.aspx

Empty Keys UI supports animations directly on control, in style and in control template. See Basic UI example on GitHub.- https://github.com/EmptyKeys/UI_Examples You can use only simple path for Storyboard.TargetProperty so (UIElement.Opacity) or Opacity. For example

<DoubleAnimation
       Storyboard.TargetName="animBorder2" 
       Storyboard.TargetProperty="Opacity"                                
       From="1" To="0" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
 </DoubleAnimation>

3 types are supported - DoubleAnimation, ThicknessAnimation and custom SolidColorBrushAnimation (see BasicUI example). I will keep adding more in future. On each animation there are From, To, By, Duration, AutoReverse, RepeatBehavior, EasingFunction and IsAdditive properties. Supported easing functions - BackEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase and SineEase.

You need routed event for EventTrigger, standard WPF are supported (not all of them) and 3 custom - VisibleEvent, HiddenEvent and CollapsedEvent. You can use custom events in XAML this way:

<EventTrigger RoutedEvent="{x:Static ek:RoutedEvents.VisibleEvent}">

ek: is designer namespace - xmlns:ek="clr-namespace:EmptyKeys.UserInterface.Designer;assembly=EmptyKeys.UserInterface.Designer"

You can use AnimatedImage control for image animation. To be able to use this control in XAML you have to define namespace (XAML root attribute) then you use control.

xmlns:ek="clr-namespace:EmptyKeys.UserInterface.Designer;assembly=EmptyKeys.UserInterface.Designer"

<ek:AnimatedImage FrameHeight="128" FrameWidth="128" FramesPerSecond="50" Width="128" Height="128">
  <ek:AnimatedImage.Source>
    <BitmapImage UriSource="Images\LoadingIcon.png" />
  </ek:AnimatedImage.Source>
</ek:AnimatedImage>

and for ImageBrush

<ImageBrush ek:AnimatedImageBrush.Animate="True" ek:AnimatedImageBrush.FrameHeight="128" ek:AnimatedImageBrush.FrameWidth="128" ek:AnimatedImageBrush.FramesPerSecond="50">
    <ImageBrush.ImageSource>
        <BitmapImage UriSource="Images\LoadingIcon.png" />
    </ImageBrush.ImageSource>
</ImageBrush>

You have to set values for FrameHeight and FrameWidth. FramesPerSecond is optional and default is 60. Image with animation must follow this:

• Every frame of the animation needs to be the same size. No padding pixels between animations.
• Top-Left corner (0,0) is the first frame, bottom-right corner is the last frame
• Frames goes from left to right, to next row and left to right again. Each row must have same number of frames