Expression blend Animating multiple objects - silverlight
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>
Related
Blinking/Flashing without fade
I have problems to flash a border on/off/on/off... without fading. It should be 2s on and 2s off. That's what I have: <BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <DoubleAnimation Storyboard.TargetProperty="Opacity"> <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="0.1" /> <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="1" /> </DoubleAnimation> </Storyboard> </BeginStoryboard>
<BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"> <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" /> <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="1" /> <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard>
Dynamic double animation end - XAML
I have a progress bar that I have styled to look like the indeterminate windows ui progress bar, with the 5 ellipses going from side to side,
the animation is based inside of a canvas, the problem is my application is resolution and size independent, thus the canvas's width property is dynamic, I want to make the animation's end property (Canvas.Left) to dynamically change to the width of the canvas minus the with of the ellipse. I have tried to bind it somehow (I am still a beginner at binding) so I always get a runtime error...
Can someone please help?
Canvas:
<Canvas Name="canvas" Height="9" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="{TemplateBinding Width}">
<Ellipse Name="ellipse" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse1" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse2" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse3" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse4" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
</Canvas>
And The Story Board:
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,1,1,0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse1">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.8,1,0.2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse2">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.6,1,0.4" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse3">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.4,1,0.6" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse4">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.2,1,0.8" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse4">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
I want to change the storyboard values that are 1260 to the value of the canvas width minus the width of the ellipse
WPF and Blend: Resizing window doesn't work
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;
}
}
}
}
VisualStateManager doesn't skip 'non-generated' transitions
The VisualState tools in Blend / WPF / Silverlight are great but I think we can all agree that that are trés buggy on occasion. Here is an example and I would like some clarification / a workaround / fix. Consider a bunch of visual states defined like this: <VisualState x:Name="Hidden"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Revealed"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> Now create a series of trigger to kick switch to these states but select to ignore transition. The transitions still play. It seems that the visual state manager sees storyboard with more than one contiguous keyframe and plays the whole thing rather than skipping-to-fill when transitions are not used. The effect I am going for is a 2 stage hide/reveal where the content is faded out and then shrunk. Unfortunately, this means that the state 'transition' will always be played, regardless of my decision to ignore transitions. Am I being stupid or is this a bug? Is there a workaround? EDIT - is it better in this case to use an acute easing function to "delay" a transition?
The Storyboard declared inside a VisualState is the Storyboard that plays while the VSM is in that state. The transitions you're talking about ignoring are Storyboards that play while transitioning from VisualState to VisualState. These are specified separately in a VisualStateGroup.Transitions section. So, something like: <VisualStateGroup x:Name="Something"> <VisualState x:Name="Hidden"> <VisualState x:Name="Revealed"> <VisualStateGroup.Transitions> <VisualTransition From="Hidden" To="Revealed"> <Storyboard> ... <Storyboard> </VisualTransition> <VisualTransition From="Revealed" To="Hidden"> <Storyboard> ... <Storyboard> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> And fill in the appropriate animations inside the Storyboards. After this, when you pass in false to the useTransitions parameter of the VisualStateManager's GoToState or GoToElementState methods, you won't see the transitions.
How to get the animation resource inside a ControlTemplate?
....
<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;