How to make Animations in WPF C#? - c#

I am trying to create a similar project with what this guy has made Youtube Video
Of course, not that awesome, it is way beyond my skills. But what I am trying to make now is very simple (compared to the video)
this is what I have done so far
This is what I've made, With Drag and drop of course, cant figure out how to create a shape (Rectangle or any other shape) in a short distance from the specific button, and then connected with an other shape or something similar.
This what I've done is just when you press the button to show those two Rectangles.
Also, trying to make it in different Angles too. for example like in this pic
To give you a better understanding in the project I am making, please read bellow.
This is a school project I am making, I have some data in a database in SQL and want to demonstrate those not in a table or any label, but as in the photos I show you. For example. When the form loads, it gets the first row, and lists items like Name (will be the button) then the other rectangles will be created from the information listed. for example. When you click the Name of the person(button) it will show 2-3 Rectangles(the green rectangles) with the labels of Age, School, Gender or anything else.
How can I do this? Is it able to be done? I know its really hard, but can any one refer me in any tutorial for this? What I've searched on google, most of the tutorials are outdated, 6-7 years old.
Thanks for your Consideration


Ya I know what you're trying to accomplish, but like I said it's the type of reason places hire specialty front-end "devigner" guys to make that stuff.
So I apologize for the delayed response but I had to get my normal workday stuff out of the way first, and I spent about 15mins on this little example before I head off for the day soon to get you started with an idea or two.
I did however leave out the Exit actions for when Toggle IsChecked=False. There's also a lot of other ways I might do things if it was my project but something like this could eat up most of a day or more real easily (especially depending how cool you make it) so this is just a pseudo example but I hope it helps.
As a ToggleButton template (SUPER SIMPLE CONCEPT EXAMPLE);
<ToggleButton Content="Boaty McBoatFace" HorizontalAlignment="Center" VerticalAlignment="Center">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="bubbleAnim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="bubble6">
<EasingInt32KeyFrame KeyTime="0:0:0.7" Value="-5"/>
</Int32AnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.985"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border Height="300" Width="300">
<Canvas>
<Canvas.Resources>
<Style TargetType="Line">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<Style TargetType="Border">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="CornerRadius" Value="50"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Canvas.Resources>
<Line x:Name="line1" Opacity="0"
X1="75" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line2" Opacity="0"
X1="150" Y1="75"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line3" Opacity="0"
X1="225" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line4" Opacity="0"
X1="225" Y1="150"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line5" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="225"/>
<Line x:Name="line6" Opacity="0"
X1="150" Y1="150"
X2="150" Y2="225" Stroke="Blue"/>
<Line x:Name="line7" Opacity="0"
X1="150" Y1="150"
X2="225" Y2="225"/>
<Line x:Name="line8" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="150" Stroke="Blue"/>
<Border x:Name="bubble1" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="1"/>
</Border>
<Border x:Name="bubble2" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="2"/>
</Border>
<Border x:Name="bubble3" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="3"/>
</Border>
<Border x:Name="bubble4" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="4"/>
</Border>
<Border x:Name="bubble5" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="5"/>
</Border>
<Border x:Name="bubble6" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="6"/>
</Border>
<Border x:Name="bubble7" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="7"/>
</Border>
<Border x:Name="bubble8" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="8"/>
</Border>
<Border CornerRadius="3" Background="{TemplateBinding Background}"
Canvas.Left="95" Canvas.Top="138" Padding="1">
<ContentPresenter />
</Border>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource bubbleAnim}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>

Related

WPF Binding (Storyboard)

I want to make a kind of custom ListView in WPF. It consists of a Header and a stack panel which contains all entries.
I want to be able to minimize the ListView, so I added a little Triangle before the header that triggers an Storyboard. This should minimize/maximize the Listview.
Anything works well except that I don't have a static height. So in my Storyboard I can't set a Keyframe with a specific static Value. I tried a Binding with a custom converter that adds to the height of the stack panel the height of the header. But it seems like it always returns "0".
My current code:
<UserControl
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:GenericWPF="clr-namespace:GenericWPF"
mc:Ignorable="d"
x:Class="Vertretungsplan.UserElements.VertretungsPlan"
x:Name="UserControl" Width="824" SizeChanged="VertretungsPlan_OnSizeChanged" Height="40">
<UserControl.Resources>
<GenericWPF:AddValueConverter x:Key="AddConverter"/>
<Style x:Key="HeaderTextBlockLinkStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF3C66C1"/>
</Trigger>
</Style.Triggers>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
</Style>
<Storyboard x:Key="Maximize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.995"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Minimize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="40"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="NotExpandedTriangle">
<BeginStoryboard x:Name="Maximize_BeginStoryboard" Storyboard="{StaticResource Maximize}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="ExpandedTriangle">
<BeginStoryboard x:Name="Minimize_BeginStoryboard" Storyboard="{StaticResource Minimize}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Height="Auto">
<TextBlock x:Name="Header" TextWrapping="Wrap" VerticalAlignment="Top" Margin="60,10,10,0" TextAlignment="Center" FontSize="20" FontWeight="Bold" MouseDown="Header_MouseDown" Style="{DynamicResource HeaderTextBlockLinkStyle}" Cursor="Hand"><Run Text="XX.XX.XXXX XXXXXXX, Woche X"/></TextBlock>
<StackPanel x:Name="RowStackPanel" Margin="0,41.6,0,0" MinHeight="100"/>
<Path x:Name="NotExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-134.855"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="ExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" Opacity="0" Visibility="Hidden" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-44.898"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</UserControl>
Please help me out how I can get a dynamic Value for the Keyframe that represents the total Heigth of the stackPanel + the Header + Spacing. Thanks!

It's possible to set the value of that key frame from code.
At a point you feel is best, possibly via the SizeChanged event, search for the storyboard in the resources. I have code that looks something like the following...
maximizeStoryboard = (Storyboard)FindResource("Maximize");
After you have that you can grab the timeline collection from its Children. And the first child in your case will be
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
Once you have that, you can gain access to the key frames via the DoubleAnimationUsingKeyFrames property KeyFrames. Which again is a collection. As you only have one EasingDoubleKeyFrame, grab a hold of that one frame and from that you can set its value via its Value property.
Hope this helps.

WPF animate button Image

I have a button on which I am adding 2 images. Later on I have to put animation on these images of button.
In below Xaml code I am using button template but after applying the templates button original behavior is lost like there is no border, no change on mouse cursor when hover etc. It is just apear as plan image.
How can I put back the button default behaviour?
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" Click="buttonStart_Click" HorizontalAlignment="Right" Width="133" >
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid>
<Image x:Name="Normal" Source="/TFSCheckinReportGenerator;component/Resource/generate.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="/TFSCheckinReportGenerator;component/Resource/waiting.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
</ControlTemplate>
</Button.Template>
</Button>

Instead of Template and ControlTemplate use ContentTemplate and DataTemplate and it will helps to show button original behavior like border and change button appearance on mouse hover etc.
Template defines the appearance of the control. ContentTemplate specifies how the content contained in/displayed by a ContentControl is to be displayed.
<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" HorizontalAlignment="Right" Width="133" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Image x:Name="Normal" Source="catalogscreen.png" Height="80" Width="80" Opacity="1"></Image>
<Image x:Name="Waiting" Source="catalogscreen.png" Height="80" Width="80" Opacity="0"></Image>
</Grid>
<DataTemplate.Resources>
<Storyboard x:Key="ChangeImageToWaiting">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Progress" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True">
<SplineDoubleKeyFrame Value="40"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
</DataTemplate>
</Button.ContentTemplate>
</Button>

my storyboard skips some keyframes

I would like to swing an ellipse to one place and then shrink it. After the first storyboard stops, I intend to stretch the ellipse with the ellipse. However the shrinking process doesn't work at all. Hard to firgure out why~ Any help or tips will be appreciated. Thanks~
<Window.Resources>
<Storyboard x:Key="Swing" Duration="0:0:7">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Leg" AutoReverse="True" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="27.081"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-25.783"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="489.676"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:7" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Swing2" BeginTime="0:0:7">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="Swing_BeginStoryboard" Storyboard="{StaticResource Swing}"/>
<BeginStoryboard x:Name="Swing_BeginStoryboard1" Storyboard="{StaticResource Swing2}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Ellipse x:Name="Leg" Fill="#FFF4F4F5" HorizontalAlignment="Left" Margin="156,204,0,147" Stroke="Black" Width="33" RenderTransformOrigin="0.464,-0.014">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="27.081"/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
If I change the second storyboard as below, the ellipse will be shinking from the beginning.
<Storyboard x:Key="Swing2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:7" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Animated split-flap display

I'd like to create an animated split-flap display using c# / wpf. I want it to look similar to the one, that can be seen in this video, but without the 3D effect. As I don't have a lot experience with wpf, I'd like to know how I can implement a UserControl for a single animated letter.

Without 3d, you could do this with multiple images.
Idea #1 Think animated gif. Only, you would have a one set of images to flip from 1 to 2. Another set of images to flip from 2 to 3, etc...
See Option 2 at this site:
http://www.wpfsharp.com/2011/05/11/wpf-replacement-options-for-an-animated-gif
Then you would have the click start the storyboard, then end at a new image instead of the same image. The more images you have, the less choppy it will be.
Idea #2
My other idea would use a top and bottom image for each number. Bend the images with RenderTransform changes.
Give this a look. I got it halfway there for you:
<Window.Resources>
<Storyboard x:Key="FlipNumberStoryBoard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="35"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="88"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-2.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-3.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-5.55"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-8.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-9.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="-8.25"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.01"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="22.6"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="24.9"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="Img2Bottom">
<EasingInt32KeyFrame KeyTime="0:0:0.8" Value="1"/>
</Int32AnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img1Top">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-88"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-75"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-35"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-9.121"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-8.87"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-8.564"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-5.438"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-3.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.001"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-24.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-22.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-20.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-15.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-5.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.562"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img2Bottom">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image x:Name="Img2Top" Source="Images/02top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0"/>
<Image x:Name="Img1Top" Source="Images/01top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img2Bottom" Source="Images/02.png" Grid.Row="2" Width="70" Height="50" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img1Bottom" Source="Images/01.png" Grid.Row="2" Width="70" Height="50" RenderTransformOrigin="0.5,0.5"/>
<Button Content="Next" HorizontalAlignment="Left" Margin="223.5,5,0,0" Grid.Row="3" VerticalAlignment="Top" Width="70" Click="Button_Click" />
</Grid>
And then on click of the button, you can see the flip.
using System.Windows;
using System.Windows.Media.Animation;
namespace RenderTransformExample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
var storyboard = (Storyboard)this.Resources["FlipNumberStoryBoard"];
storyboard.Begin();
}
}
}
Now hooking that up so it just loops through images is up to you.

You can use ScaleTransform to achieve the animation, and some dependency properties to make the UserControl easy to use.
First, you have to display your letter in two halves, which can be done using these styles :
<Style x:Key="UpperHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="RenderTransformOrigin" Value="0.5,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
CornerRadius="10,10,0,0"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style x:Key="LowerHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="RenderTransformOrigin" Value="0.5,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}"
CornerRadius="0,0,10,10"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock VerticalAlignment="Bottom" Text="{Binding}" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Then to display two overlapping letters (the old one and the new one) :
<Grid>
<!-- Hidden textblock, only used for measurement purpose -->
<!-- The border is here to set the total height of the display so that we can have a small space between the two halves -->
<Border Margin="0,1" Visibility="Hidden">
<TextBlock Name="SizeRef"
Margin="10,0"
FontFamily="Courier New"
Text="{Binding ElementName=Root,
Path=Letter}" />
</Border>
<ContentControl Name="Letter1Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter1Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
</Grid>
The properties used above are created in code behind :
public partial class SplitFlapLetter
{
public SplitFlapLetter()
{
InitializeComponent();
}
public char Letter
{
get { return (char)GetValue(LetterProperty); }
set { SetValue(LetterProperty, value); }
}
public static readonly DependencyProperty LetterProperty =
DependencyProperty.Register("Letter", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(OnLetterChanged));
private char Letter1
{
get { return (char)GetValue(Letter1Property); }
set { SetValue(Letter1Property, value); }
}
public static readonly DependencyProperty Letter1Property =
DependencyProperty.Register("Letter1", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private char Letter2
{
get { return (char)GetValue(Letter2Property); }
set { SetValue(Letter2Property, value); }
}
public static readonly DependencyProperty Letter2Property =
DependencyProperty.Register("Letter2", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private bool _isLetter1Active;
private static void OnLetterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var uc = d as SplitFlapLetter;
if (uc == null) return;
if (uc._isLetter1Active)
uc.Letter2 = uc.Letter;
else
uc.Letter1 = uc.Letter;
var sb = uc.FindResource(uc._isLetter1Active ? "GotoLetter2Animation" : "GotoLetter1Animation") as Storyboard;
if (sb != null) sb.Begin();
uc._isLetter1Active = !uc._isLetter1Active;
}
private readonly List<char> _letters = new List<char> { 'A', 'B', 'C', 'D', 'E' };
private void OnClick(object sender, MouseButtonEventArgs e)
{
Letter = _letters[(_letters.IndexOf(Letter) + 1) % _letters.Count];
}
}
The Letter property is the only public one and there is a listener on its changes.
This listener sets Letter1 or Letter2 to the new value, changing at every run, so that the other property is still set to the old value.
It then starts one of the two storyboard defined in the UserControl resources :
<Storyboard x:Key="GotoLetter1Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
<Storyboard x:Key="GotoLetter2Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
There's probably some way to reduce this xaml and use only one storyboard that would uses the appropriate targets.

I think that this project could really give you a base for what you want to do.
Unfortunately, I don't see how this split-flap display could look well without 3D.
Good luck !

InvalidOperationException was unhandled - WPF Path

Here is my UserControl
<Grid x:Name="Grid">
<Path Name="Path1" Data="M0.5,0.5 L179.5,0.5 L179.5,249.5 L0.5,249.5 z" Stretch="Fill" Stroke="Purple" StrokeThickness="1">
<Path.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Path.Fill>
</Path>
<Grid.Resources>
<Storyboard x:Key="Path_Ani">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-58.515"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-129.167"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.544"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.806"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="5.628"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="Path1">
<EasingPointKeyFrame KeyTime="0" Value="100.5,140.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.2" Value="104.175476605516,140.5"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
</Grid>
And i call the StoryBoard like that:
private void MyTest_MouseDown(object sender, MouseButtonEventArgs e)
{
Storyboard sbdCardAnim = (Storyboard)MyTest.Grid.Resources["Path_Ani"];
sbdCardAnim.Begin();
}
And i get this error when i click:
'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[3].(2)'.
How do I solve the problem that is causing this error?

Your animation expects the path to have a bunch of transformations defined as the RenderTransform, however your path's actual RenderTransform seems to be null (as it is not defined).
<!-- The RenderTransform which is expected looks something like this
(while no animation targets the third and therefore unknown transform
it only makes sense for it to be a RotateTransform) -->
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
The path in the PointAnimation also does not seem to fit the actual data in the path as there will still be an error if the RenderTransform is defined as expected.

Categories