Develop Reference

Expanding animation from center of grid

I am making an app where when it opens it expands.
But it is expanding from the side of the grid but I want it to expand from the center.
Here is the xaml code
<Window.Resources>
<Storyboard x:Key="ExpandingAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandingGrid" Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:03" Value="222"></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="ExpandingGrid"> </Grid>
And this is the c# code
public MainWindow()
{
InitializeComponent();
Storyboard ExpandingAnime = (Storyboard)TryFindResource("ExpandingAnimation");
ExpandingAnime.Begin();
}
Here is an example of how it looks like.

You could use a ScaleTransform and animate its ScaleX and ScaleY properties:
<Storyboard x:Key="ExpandingAnimation">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
From="0" To ="1" Duration="0:0:3"/>
<DoubleAnimation
Storyboard.TargetName="MyScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
From="0" To ="1" Duration="0:0:3"/>
</Storyboard>
</Storyboard>
...
<Grid x:Name="ExpandingGrid"
RenderTransformOrigin="0.5,0.5"
Height="222">
<Grid.RenderTransform>
<ScaleTransform x:Name="MyScaleTransform" ScaleX="0" ScaleY ="0" />
</Grid.RenderTransform>
</Grid>

WPF mouse click returns storyboard to previous state

This piece of code animates the movement of an ellipse if click on this. How can I return (in an animated way - as the storyboard does) the ellipse in the initial position by clicking again on its new position. Is that possible? (preferably only in XAML)
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>

An alternative is to use visual states and simply switch between them in code-behind. That might be more clearer approach compared to holding animations as resources.
xaml:
<Ellipse x:Name="circle_button"
HorizontalAlignment="Left"
Height="100"
Margin="30,40,0,0"
VerticalAlignment="Top"
Width="100"
Fill="#FF33D3A7"
MouseDown="circle_button_MouseDown">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="A">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="B">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Ellipse>
cs:
bool _isStateB;
void circle_button_MouseDown(object sender, MouseButtonEventArgs e)
{
_isStateB = !_isStateB;
VisualStateManager.GoToElementState(circle_button, _isStateB ? "B" : "A", true);
}
Demo:
Instead of Ellipse a Button can be used (with style containing such ellipse), then you'll have Click event and ability to focus and click element with keyboard.
P.S.: after writing the answer I suddenly have a though.. ToggleButton has 2 states, you can in fact use IsChecked to toggle between 2 positions (and run different animations)... until you add third, then solution with visual states is preferable.

I think that one of possible ways is to define to storyboard and use some code behind to trigger animations.
Here is an example:
Xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ElipseStoryboard">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ElipseStoryboardReversed">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" MouseDown="Circle_button_OnMouseDown" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
</Ellipse>
</Grid>
</Window>
Code behind:
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private bool flag = false;
private void Circle_button_OnMouseDown(object sender, MouseButtonEventArgs e)
{
if (flag)
{
var storyboard = this.Resources["ElipseStoryboard"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
else
{
var storyboard = this.Resources["ElipseStoryboardReversed"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
flag = !flag;
}
}
}
Please try it.
Alternative only Xaml solution :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="1.0" To="0.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="0.0" To="1.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="circle_button2" Opacity="0" HorizontalAlignment="Left" Height="100" Margin="95,120,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00" Storyboard.TargetName="circle_button">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="1.0" To="0.0" Duration="0:0:0" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="0.0" To="1.0" Duration="0:0:0"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Window>

Need help applying animation in transform group in wpf

I have a piece of xaml that applies a scale transform and a rotatetransform.
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" x:Name="RotateTransform"/>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleX="2" ScaleY="2"/>
</TransformGroup>
</Image.RenderTransform>
I also have a storyboard that needs to accesss RotateTransform like so:
<Storyboard x:Key="Storyboard"
Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
Storyboard.TargetName="RotateTransform">
<DoubleAnimation From="0" To="360" RepeatBehavior="Forever" SpeedRatio="0.25" />
</Storyboard>
However I can not get the image to rotate, but it does scale up. Does anyone have suggestions to fix the problem?
Edit: I did figure out that i can use
<Storyboard x:Key="Storyboard"
Storyboard.TargetProperty="(Image.RenderTransform).Children[0].Angle"
Storyboard.TargetName="ContentImage">
<DoubleAnimation From="0" To="360" RepeatBehavior="Forever" SpeedRatio="0.25" />
</Storyboard>
And call the animation by the array position, but why is it not possible to actually call the transform property's angle property automatically by x:Name?

A RotateTransform does not have RenderTransform property, so you can't animate RenderTransform.Angle.
The animation would have to target the Angle property directly. Moreover, you would usually apply the TargetName and TargetProperty properties to the DoubleAnimation, not to the Storyboard. You would also set the Duration of the animation instead of applying a SpeedRatio for the default duration of one second.
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="RotateTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>
</Storyboard>

The RenderTransform and RotateTransform are associated properties and need parenthesis around them. This is the correct syntax.
<Storyboard x:Key="Storyboard"
TargetProperty="(RenderTransform).Children[0].(RotateTransform.Angle)"
TargetName="ContentImage">
<DoubleAnimation From="0" To="360" RepeatBehavior="Forever" SpeedRatio="0.25" />
</Storyboard>
as you pointed out in your edit you could also write this as
<Storyboard x:Key="Storyboard"
TargetProperty="(RenderTransform).Children[0].Angle"
TargetName="ContentImage">
<DoubleAnimation From="0" To="360" RepeatBehavior="Forever" SpeedRatio="0.25" />
</Storyboard>

Storyboard DoubleAnimation Does not work with StackPanel Height Property

I'm trying to use DoubleAnimation to change the Height property of a StackPanel. The code does not throw any exception. But the animation does not work.
<StackPanel x:Name="FlyoutContent">
<StackPanel.Resources>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<TextBlock Margin="0, 20, 0, 0" FontWeight="Bold" Text="Change Current Password" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" IsTapEnabled="True" Tapped="ChangePasswordHeader_Tapped"/>
<StackPanel x:Name="ChangePasswordPanel" Margin="0, 5, 0, 0" Height="0">
C# Event Handler
private void ChangePasswordHeader_Tapped(object sender, TappedRoutedEventArgs e)
{
if (ChangePasswordPanel.Height == 0)
{
ShowStackPanel.Begin();
}
else
{
HideStackPanel.Begin();
}
}
It does hit ChangePasswordHeader_Tapped event handler and execute ShowStackPanel.Begin or HideStackPanel.Begin statement as expected. But it does not have any impact on the output. The Height of the StackPanel just stays at 0.
Any idea on what's happening??

I figured it out myself. All I had to do was to Enable Dependent Animation (EnableDependentAnimation) on the DoubleAnimation as this animation affects the layout. And then it worked perfectly.
<Storyboard x:Name="HideChangePasswordPanel">
<DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="ShowChangePasswordPanel">
<DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
Hope it saves someone some time!

The easiest way to animate the size of a UI component generally in XAML (and Silverlight/WPF) is to use a RenderTransform. Depending on the layout, you may need to do a few tricks, but for a quick animation, it generally looks very nice.
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:2"
To="0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2"
To="0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
</Storyboard>

The stack panel takes its height from the combined height of its contents. Setting the height explicitly has no meaning.
You need to change the height/visibility of the stack panel's contents.

Programmatic state changes not working in Silverlight

I'm trying to get states to change with the visual state manager through code.
I am using:
Microsoft.Expression.Interactivity.Core.ExtendedVisualStateManager.GoToElementState(this.LayoutRoot, "stateRegistration", true);
But it doesn't seem to want to work, I have create an event handler and also a listener but it there's no state changed when using that code.
Can anyone help me out.
XAML CODE (Code Snippet):
<Grid x:Name="LayoutRoot" Width="897" Height="699">
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="stateRegistration">
<Storyboard>
<DoubleAnimation Duration="0" To="870" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="RegisterContent" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="880" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="HomeContent" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Thanks.

There is strange behavior with the VisualStateManager: its states must be situated not in the control, but in the child control.
It means, that the GoToState method should be called with the this parameter instead of the this.LayoutRoot parameter, but definitions of state groups must be situated inside the Grid:
VisualStateManager.GoToState(this, "stateRegistration", true);
I don't know where to get the ExtendedVisualStateManager class so I use the default one.
Also if any animation of the state storyboard fails - all animations are cancelled. So try this code sample with two animations, it must work:
<Grid x:Name="LayoutRoot" Width="897" Height="699">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="stateRegistration">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button x:Name="btnRegRegister" Content="Some button" Click="btnRegRegister_Click" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="0" />
</Button.RenderTransform>
</Button>
</Grid>