....
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnChecking">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="slider"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame x:Name="SplineValue"
KeyTime="00:00:00.3000000"
Value="25" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnUnchecking">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="slider"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="slider"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<SplineThicknessKeyFrame KeyTime="00:00:00.3000000"
Value="1,1,1,1" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
....
I can get the Resource "OnChecking" in the code behind using the below statement.
Storyboard stb1 = this.Template.Resources["OnChecking"] as Storyboard;
But How can i get the "SplineValue" SplineDoubleKeyFrame inside the Storyboard?
This should work
Storyboard stb1 = chk.Template.Resources["OnChecking"] as Storyboard;
DoubleAnimationUsingKeyFrames animation =
(DoubleAnimationUsingKeyFrames)stb1.Children[0];
var val = ((SplineDoubleKeyFrame)animation.KeyFrames[0]).Value;
Related
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 am new to WPF. I come from a C# and ASP.NET background.
I am attempting to create a very basic WPF application with 2 storyboards that are started programmatically through the interactive Begin overload .Begin(this,true).
When the OnCompleted event is raised the status of the other storyboard is checked. If the status is that the storyboard is not running it should begin the storyboard.
I receive the following error inthe Completed handler:
Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
I believe I used the correct .Begin(this,true) overload for interactive control.
I've included the MainWindow.cs and MainWindow.xaml code below. I am purposely not starting the animations through a Trigger in Xaml. I need to start the animations dynamically and check states of other multiple animations. Example stripped down to focus on main issue.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace StoryboardExample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public Storyboard Storyboard1 { get; set; }
public Storyboard Storyboard2 { get; set; }
public MainWindow()
{
InitializeComponent();
Storyboard1 = (System.Windows.Media.Animation.Storyboard)FindResource("Storyboard1");
Storyboard1.Name = "MegatronStoryboard";
Storyboard1.Completed +=new EventHandler(Storyboard1_Completed);
Storyboard2 = (System.Windows.Media.Animation.Storyboard)FindResource("Storyboard2");
Storyboard2.Name = "TransformerStoryboard";
Storyboard2.Completed += new EventHandler(Storyboard2_Completed);
Storyboard2.Begin(this, true);
}
void Storyboard1_Completed(object sender, EventArgs e)
{
if (Storyboard2.GetCurrentState() == ClockState.Stopped)
{
Storyboard2.Begin(this, true);
//Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
//I thought I was calling the Begin overload with the correct params for interactive control
//I thought I was calling the Begin overload with the correct params for interactive control .Begin(this,true)
}
}
void Storyboard2_Completed(object sender, EventArgs e)
{
if (Storyboard1.GetCurrentState() == ClockState.Stopped)
{
Storyboard1.Begin(this, true);
//Throws: Cannot perform action because the specified Storyboard was not applied to this object for interactive control.
//I thought I was calling the Begin overload with the correct params for interactive control .Begin(this,true)
}
}
}
}
<Window x:Name="MainWindow1" x:Class="StoryboardExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="18"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="cnvsStoryboard1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="353"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="353"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-230"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-230"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="137"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="cnvsStoryboard2">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="-13"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Canvas x:Name="LayoutRoot">
<Canvas x:Name="cnvsStoryboard1"
Height="203" Canvas.Left="223"
Canvas.Top="-284" Width="253"
Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.2" ScaleY="0.2"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Image x:Name="imgTransformer" Height="148"
Canvas.Left="42" Source="Images/transformer.png"
Stretch="Fill" Canvas.Top="8" Width="176"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="1" Y="1"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Label x:Name="lblTank" Content="Tank" Canvas.Left="101" Canvas.Top="160" FontSize="21.333">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFCA2828" Offset="1"/>
<GradientStop Color="#FE412424" Offset="0.003"/>
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Canvas>
<Canvas x:Name="cnvsStoryboard2" Height="318"
Canvas.Left="41" Canvas.Top="229"
Width="215" Opacity="0"
RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.2" ScaleY="0.2"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Image x:Name="imgMegatron" Height="264" Canvas.Left="33"
Source="Images/Megatron.png"
Stretch="Fill" Canvas.Top="8"
Width="153"/>
<Label x:Name="lblMegatron"
Content="Megatron"
Canvas.Left="56"
Canvas.Top="278"
FontSize="21.333"
Width="107.707"
RenderTransformOrigin="0.696,0.599" Height="40">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFCA2828" Offset="1"/>
<GradientStop Color="#FE412424" Offset="0.003"/>
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Canvas>
</Canvas>
</Window>
I've been looking into this and I think that my first parameter in the storyboard.Begin(this,true) overload may be incorrect?
Any help is greatly appreciated.
-Aaron
Does it work if you use .GetCurrentState(this)? Alternately, perhaps call .Stop(this); immediately prior to calling .Start(this, true)?
Also, Make sure the Storyboard is controllable. From MSDN: "To make a storyboard controllable in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable."
More info: http://msdn.microsoft.com/en-us/library/cc672521.aspx
i want to know how to change target name dynamicaly with same animation
Please find Below is my code of WPF for xaml and c# code
XAML code
<Storyboard x:Key="deepanshu">
<DoubleAnimationUsingKeyFrames x:Name="gupta"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.641"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.689"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
c#
Storyboard sb = (Storyboard)FindResource("deepanshu");
Now how to change storyboaname from image1 to image2?
Thanks
Regards,
Deepanshu
Storyboard sb = (Storyboard)FindResource("deepanshu");
foreach (var animation in sb.Children)
{
Storyboard.SetTargetName(animation, "image2");
}
What H.B. said is working perfectly fine. In XAML put storyboard without specifying TargetName like this
<Storyboard x:Key="OpacityUpAnim">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
for C# I wrote a custom function to call Animation.
private void RunStoryBoardFromName(string animName, string targetName = null)
{
Storyboard storyBoard = (Storyboard)this.Resources[animName];
if (targetName != null)
{
foreach (var anim in storyBoard.Children)
{
Storyboard.SetTargetName(anim, targetName);
}
}
storyBoard.Begin();
}
then I called it in C# like
RunStoryBoardFromName("OpacityUpAnim", "PopupGrid");
In my Silverlight application, I want different texts to repeatedly fly in from the right changing colors and getting smaller. The animation works the first time through the loop but not subsequent times.
Here's what I did:
(1) I went into Expression blend, used the "Create Storyboard" tool to create the animation.
then (2) copied the StoryBoard block to my XAML:
<UserControl x:Class="TestWeb124.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600">
<UserControl.Resources>
<Storyboard x:Key="FadeTextIn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
<SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="20">
<TextBlock Height="57" Margin="190,90,133,0" VerticalAlignment="Top" Text="This is a test." TextWrapping="Wrap" FontSize="36" RenderTransformOrigin="0.5,0.5" x:Name="OutputText" Foreground="#FF000000">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
</UserControl>
Then (3) in my code behind I run through a timer loop. The animation works great the first time, but subsequent times there is no animation:
public void Each_Tick(object o, EventArgs sender)
{
if (_secondsElapsed % 5 == 0 || _secondsElapsed == 0)
{
OutputText.Text = String.Format("{0}", _customerFirstNames.ElementAt(_customerNodeIndex));
Storyboard fadeTextIn = (Storyboard)Resources["FadeTextIn"];
fadeTextIn.Begin();
_customerNodeIndex++;
if (_customerNodeIndex > _customerFirstNames.Count() - 1) _customerNodeIndex = 0;
}
_secondsElapsed++;
}
It seems that I need to reset the position of the new piece next piece of text that is supposed to fly it. How do I do that?
<Storyboard x:Name="FadeTextIn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-111" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="0,0,0,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-88" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="36" KeySpline="0,0,0,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="14" KeySpline="0,0,0,1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="OutputText" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC24343"/>
<SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FF000000" KeySpline="0,0,0,1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
What the Storyboard is doing is to take an Element and then animate the manipulation of it's properties. That's why the second time it runs the Element already has the target properties, so by adding a keyframe for the start of the animation that sets the values to the initial values your animation will repeat nicely.