I want to make an image flash a set number of times, when I set its Visibility to Visible. And when it's finished flashing, I want it to make itself Collapsed again.
Here's a simple version of what I'm trying to do:
<Image Visibility="Collapsed"
Margin="0,0,3,0"
Width="24"
Source="blah"
Height="24">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="Visibility"
Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="5x"
x:Name="flashingStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Duration="0:0:1"
FillBehavior="Stop">
<DiscreteDoubleKeyFrame Value="0"
KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="1"
KeyTime="0:0:0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Can I do this in XAML?
If you know how many times it will be flashed then you can set BeginTime correspondingly the number of times your flashing comes along.
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames RepeatBehavior="5x" Storyboard.TargetProperty="Opacity" Duration="0:0:1">
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0.5" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:5" Duration="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
I've set a storyboard to enlarge and shrink a window. These work fine in the Blend editor, but when actually running, they just don't work at all.
The window is supposed to expand/shrink at the same rate horizontally as vertically.
What's the fix to this?
Here's my XAML.
<Window x:Name="window" x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="32" Width="32" ResizeMode="NoResize" WindowStyle="None">
<Window.Resources>
<Storyboard x:Key="GrowFrame">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="32"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.25"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="32"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.25"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.25"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window">
<EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="White">
<EasingColorKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</EasingColorKeyFrame.EasingFunction>
</EasingColorKeyFrame>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ShrinkFrame">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="256"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="256"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="window">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="Transparent">
<EasingColorKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingColorKeyFrame.EasingFunction>
</EasingColorKeyFrame>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource GrowFrame}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="ShrinkFrame_BeginStoryboard" Storyboard="{StaticResource ShrinkFrame}"/>
</EventTrigger>
</Window.Triggers>
</Window>
WPF does support both synchronized animations (as you attempted) and overlapping animations where you supply a HandoffBehavior. You might try that to see if it works as a workaround. However I think this is a known bug (https://connect.microsoft.com/VisualStudio/feedback/details/715415/window-width-height-animation-in-wpf-got-broken-on-net-framework-4-0). I'm shocked it has not been fixed by now.
Alternatively, just use a fixed sized transparent window as a workaround:
<Window x:Name="window" x:Class="RectangleWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RectangleWindow" Height="300" Width="300" ResizeMode="NoResize" WindowStyle="None"
Background="Transparent" AllowsTransparency="True">
<Window.Resources>
<Storyboard x:Key="GrowFrame">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="insideRectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="32"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.25"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="insideRectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="32"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="256">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.25"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ShrinkFrame">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="insideRectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="256"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="insideRectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="256"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="32">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource GrowFrame}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="ShrinkFrame_BeginStoryboard" Storyboard="{StaticResource ShrinkFrame}"/>
</EventTrigger>
</Window.Triggers>
<Rectangle x:Name="insideRectangle" Fill="White"
Width="50" Height="50"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect/>
</Rectangle.BitmapEffect>
</Rectangle>
</Window>
As others have pointed out, there's a bug in the new framework releases that prevents synchronous animation. However, here's a quick little solution that works very well for me. It's beyond simple, so I don't think any explanation is in order. It works, and that's all that matters:
XAML:
<Window x:Class="App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="32" Width="32" ResizeMode="NoResize" WindowStyle="None"
MouseEnter="MouseEntered" MouseLeave="MouseLeft">
</Window>
Code-Behind:
using System.Windows;
using System.Windows.Input;
namespace App
{
public partial class MainWindow : Window
{
private const int MAX_WINDOW_SIZE = 256;
private const int MIN_WINDOW_SIZE = 32;
private const int ANIMATION_SPEED = 10;
public MainWindow()
{
InitializeComponent();
}
private void MouseEntered(object sender, MouseEventArgs e)
{
while (this.Width <= MAX_WINDOW_SIZE)
{
this.Width += ANIMATION_SPEED;
this.Height += ANIMATION_SPEED;
}
}
private void MouseLeft(object sender, MouseEventArgs e)
{
while (this.Width >= MIN_WINDOW_SIZE)
{
this.Width -= ANIMATION_SPEED;
this.Height -= ANIMATION_SPEED;
}
}
}
}
i am trying to create an animation in Expression blend for a Windows Store App.
I want the animation to represent rainfall. The animations consists of 2 pictures and im trying to have 3 scenarions.
1) Lite rainfall: animate with a cloud and 1 drop as in picture 1. This works fine
2) Medium rainfall: Here i want to use the same cloud but add 1 more drop
3) Heavy rain: here i want to use the same cloud but add a third drop
My problem is when i trye to create the two last scenarios it effects the first 1 and the new objects will also show on the first 1. So i cannot have these 3 scenarios at the same storyboard it seems like. Is there anyway i can split the storyboard up to multiple layers, so i can hide some of the objects when ever i want? From the msdn website i found i article saying i can create layers by clicking tools => create new layer.
However i dont have that option in my expression blend, and im using the last version.
Animation 1
Animation 2
Animation 3
I would create three separate storyboards, one for each scenario. This would allow you more control over when to do what.
In each Storyboard you can then handle and animate your objects after your need.
You can then use different easings to achieve different speeds of the falling raindrops.
I've created a solution in Expression Blend demonstrating this for you and placed it on my Skydrive: http://sdrv.ms/12IbxrR and there's a blogpost covering how it's done here.
Example code with each button stopping and starting the right animation.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Storyboard
x:Name="MediumRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="StrongRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="SlowRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Path
x:Name="path"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,0,100,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
x:Name="path1"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
x:Name="path2"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,0,-100,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
Data="F1M207.885,33.885C202.225,33.885 196.732,34.596 191.485,35.924 184.27,15.299 164.651,0.5 141.564,0.5 117.399,0.5 97.034,16.714 90.718,38.852 82.291,34.586 72.771,32.167 62.679,32.167 28.339,32.167 0.5,60.006 0.5,94.346 0.5,128.687 28.339,156.526 62.679,156.526 72.489,156.526 81.764,154.246 90.015,150.2 94.9,169.883 112.678,184.474 133.872,184.474 151.986,184.474 167.603,173.812 174.811,158.426 184.56,164.01 195.844,167.218 207.885,167.218 244.704,167.218 274.552,137.37 274.552,100.552 274.552,63.733 244.704,33.885 207.885,33.885"
Fill="White"
Height="184.974"
Width="275.052"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<StackPanel>
<Button
Tapped="Button_Tapped">Play slow rain</Button>
<Button
Tapped="Button_Tapped_1">Play Medium rain</Button>
<Button
Tapped="Button_Tapped_2">Play Strong rain</Button>
</StackPanel>
</Grid>
</Page>
I have a combobox, which is bound to an enumeration of animations. We have the requirement such that if an animation style is selected in the combo box, the corresponding animation should be triggered on a textblock. i have 3 animations, namely fade, scale and blink. While blink is working fine, fade and scale doesnt work. it works only for the first time when the screen loads and then thereafter, even if the selection is changed to fade/scale, teh animation is not triggered. As if now, i have triggered the animation using a data trigger, and that is when this issue started coming, but the animation was triggered perfectly when we tried to use an event trigger. My code is as below. Could someone help me as to what is it that I am doing wrong and how it can be rectified.
Animations:
<Storyboard x:Key="Fade">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Scale">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Blink">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames RepeatBehavior="3x" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
The combobox, textblock and data triggers used to trigger the animation:
<telerik:RadComboBox x:Name="animationTypeComboBox"
Foreground="White"
Width="180"
ItemsSource="{Binding Source={StaticResource AnimationTypeEnumValues}}"
SelectedItem="{Binding SelectedAnimationType, Mode=TwoWay, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center" >
</telerik:RadComboBox>
<TextBlock x:Name="testMsg" Text="Test message" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource Subheading}">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Fade}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Fade}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Scale}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Scale}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Blink}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Blink}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
I made few changes in your code to make it work in my local system.... here is a solution to your problem..
<TextBlock x:Name="testMsg" Text="Test message" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Fade">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Scale"/>
<RemoveStoryboard BeginStoryboardName="Blink"/>
<BeginStoryboard Name="Fade">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Scale">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Fade"/>
<RemoveStoryboard BeginStoryboardName="Blink"/>
<BeginStoryboard Name="Scale">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Blink">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Fade"/>
<RemoveStoryboard BeginStoryboardName="Scale"/>
<BeginStoryboard Name="Blink">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames RepeatBehavior="3x" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
In the above code instead of taking story boards in resources i am taking then in line... and removing the other storyboards before starting the actual storyboard...
This means what ever be the behavior effected by the previous Storyboards will be removed and every time animation works as like a new one..
I've created a button which changes its appearance when in different states, the way I do this (as a single example) when the button is being clicked down on:
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
Is there a way I could accomplish this using less code? I Just want the scale and colour to both instantly change to green when pressed, is there a way to do it without using keyframes?
Thanks for any help!
This can be written so:
<ColorAnimation Duration="0" To="Green" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)" />
<DoubleAnimation Duration="0" To="0.94" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />
<DoubleAnimation Duration="0" To="0.94" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />
General animations are easier to understand and to use, and there is very few cases when frame animations can be used isnted of general animations.