I have the following XAML Code:
<Window.Resources>
<Storyboard x:Key="IconFileChangeColor">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="colorFile" Storyboard.TargetProperty="Color" RepeatBehavior="Forever" AutoReverse="True">
<EasingColorKeyFrame KeyTime="0" Value="#FF690000"/>
<EasingColorKeyFrame KeyTime="0:0:1.5" Value="#FFC33939"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent= "FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource IconFileChangeColor}" />
</EventTrigger>
</Window.Triggers>
C# Code that should stop the animation:
Storyboard fileAnimation = (Storyboard)TryFindResource("IconFileChangeColor");
fileAnimation.Stop();
The Animation starts up fine. However if I execute the C# Code it does not stop the animation... Does anybody know why?
Related
I have 2 DataTrigger that animates the background color of a button (with reverse), this part works fine.
The problem is that when the 2 triggers are fired in overlapping times, the first trigger fired does not reverse the color, when the second trigger stops it reverses the color to whatever was the color when the previous animation stopped.
What should I do?
This is the example code:
<DataTrigger Binding="{Binding IsUp}" Value="True">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="isDownStoryBoard"/>
<BeginStoryboard Name="isUpStoryBoard">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#61c419" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsDown}" Value="True">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="isUpStoryBoard"/>
<BeginStoryboard Name="isDownStoryBoard">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#efc5ca" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#d24b5a" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#ba2737" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#f18e99" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
There is a StopStoryboard Class that you can use to stop a running Storyboard with, but there is no ReverseStoryboard class. However, you can just create another Storyboard that runs in reverse to your original one that you start when you stop the original one. You can use the StopStoryboard class like this (from the linked page on MSDN):
<!-- Begin the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Width"
Duration="0:0:5" From="100" To="500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
...
<!-- Stop the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
<StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
Also, please see the Timeline.FillBehavior Property that you can set on the Storyboard which Gets or sets a value that specifies how the Timeline behaves after it reaches the end of its active period. You can set it to the FillBehavior.HoldEnd enumeration to get the Storyboard to keep it's last value when it ends.
Hey all I am pretty new at creating a WPF in VS 2013. I am wanting this box to bounce & ease in/out.
The current code i have:
<BeginStoryboard x:Name="FadeInStoryBoard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.01" To="0.85" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="5" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.85" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8" BeginTime="0:0:20" Name="boxFader">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
It currently looks very odd when showing due to it fading in/out. How can i take off the fading and just have it fade in when bouncing in/out?
Please try this,
<Rectangle Width="100"
Height="100"
VerticalAlignment="Bottom"
Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:1"
Value="-200">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
I want to show all my windows except Main page from right to left transition style.
I tried this
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" FillBehavior="HoldEnd" />
</Storyboard>-->
<Storyboard >
<ThicknessAnimation Duration="0:0:.8" Storyboard.TargetProperty="Margin" To="-1200,0,-100,0" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
The same if i put stackpanel trigger it's coming from left to right inside the window.
Like wise i need for showing window itself.
How to achieve this ?
A DoubleAnimation on the Left property should do the trick
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:.8" Storyboard.TargetProperty="Left" From="1920" To="0" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
I like to use this ColorAnimationUsingKeyFrames
<Color x:Key="HighlightedColor">Yellow</Color>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
multiple times.
At the moment I had this workaround
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
Fill="Green"
StrokeThickness="2"
CentrePoint="181.0, 181.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
StrokeThickness="2"
Fill="Green"
CentrePoint="181.0, 181.0"
OffsetAngle="45.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush2"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
I like to move the animation into the resources and just want to bind it to any object (at the end there will be 40 MirrorTile's).
I'm not sure which ResourceDictionary you mean, but you should be able to write something like this. Note that there is no Storyboard.TargetName any more.
<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
<ColorAnimationUsingKeyFrames Duration="0:0:0.1"
Storyboard.TargetProperty="Stroke.Color">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
KeyTime="0:0:0.5"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
and then use it like this (without binding):
<shapes:MirrorTile.Stroke>
<SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard
Storyboard="{StaticResource HighlightedColorStoryboard}"/>
</EventTrigger>
...
</shapes:MirrorTile.Triggers>
I have been trying to animate the opening of a UserControl with no luck and was wondering if anyone could help?
I have a UserControl which simply holds information about a record. It opens up as a box on an existing page, however I would like the box to open with a simple animation. I'm trying to get the box to open with an expanding animation instead of the box just appearing.
Below is the code I have been working on.
<UserControl Name="RecordViewerUserControl"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
x:Class="VisionWare.MasterDataServices.Silverlight.UI.Common.RecordViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:conv="clr-namespace:VisionWare.MasterDataServices.Silverlight.UI.Converters"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Height="490"
Width="600"
Margin="0,0,0,0">
<UserControl.Resources>
<conv:DateConverter x:Key="dateConverter" />
<conv:BoolToVisibilityConverter x:Key="visibilityConverter" />
<conv:EntityIdToUrlConverter x:Key="urlConverter"/>
<conv:FileConverter x:Key="fileConverter"/>
<conv:AlertImageURLConverter x:Key="alertConverter"/>
<Style TargetType="UserControl" x:Key="CustomUserControlStyle">
<Setter Property="Effect">
<Setter.Value>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
I have changed my code according to #jrb 's advice...]
<UserControl.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Width" To="600"/>
<DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Height" To="490"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
I have inserted this just after the initial UserControl opening tag.
It is not complaining anymore when the app is run, however it doesn't seem to be having an effect.
Any ideas? Am I missing something in the code behind?
I think your animation values are wrong, in the end you should have a value of 1 (100% size) not 0.
Why do you animate on the first child of LayoutRoot? You should have RecordViewerUserControl as animation target instead.
I suggest you test setting the size on the usercontrol to 1 then use event trigger loaded (i think) and a simple doubleanimation to increase the size of the control.
<EventTrigger RoutedEvent="Loaded">
This is a working example, you can test it in kaxaml.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1"
Height="1"
Background="Black">
<Page.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
To="200"/>
<DoubleAnimation
Storyboard.TargetProperty="Height"
To="200"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Page.Triggers>
<Grid>
</Grid>
</Page>