C# - WPF Access elements in a DataTemplate from code behind - c#

I tried to create a card game in WPF.
My Problem is that I want to flip a card at a certain time.
I created two storyboards in a datatemplate, one for each flip (back and front). But when I tried to access and start it from the code behind I got an error, because it can't access the grid, which contains the new card image, inside the datatemplate.
So my question is, how can I access the grid inside the datatemplate from code behind, to get my storyboard run?
Here is my code:
XAML:
<Window x:Class="KartenQuartett.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:KartenQuartett"
mc:Ignorable="d"
ResizeMode="NoResize"
Title="{Binding Title}" Height="510" Width="670" WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="RotatingItemTemplate">
<DataTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="grid1">
<EasingInt32KeyFrame KeyTime="0" Value="0"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
</Int32AnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="image">
<EasingInt32KeyFrame KeyTime="0" Value="1"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard1_reversed">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<SplineDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="grid1">
<EasingInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<SplineInt32KeyFrame KeyTime="0:0:1" Value="0"/>
</Int32AnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="image">
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="0"/>
<SplineInt32KeyFrame KeyTime="0:0:0.5" Value="1"/>
<SplineInt32KeyFrame KeyTime="0:0:1" Value="1"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Grid x:Name="grid">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5"/>
<SkewTransform CenterX="0.5" CenterY="0.5"/>
<RotateTransform CenterX="0.5" CenterY="0.5"/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid x:Name="grid1">
<Image x:Name="image1" Source="{Binding ImageFront}" Stretch="Fill" />
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
<Image x:Name="image" Source="{Binding Image}" Stretch="Fill" />
<Button x:Name="Bdrehen" Content="Drehen" HorizontalAlignment="Left" Margin="119,407,0,0" VerticalAlignment="Top" Width="75" Click="Bdrehen_Click"/>
</Grid>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="Bdrehen">
<BeginStoryboard x:Name="Storyboard1_BeginStoryboard1" Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="grid1">
<StopStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard1"/>
<BeginStoryboard x:Name="Storyboard1_reversed_BeginStoryboard" Storyboard="{StaticResource Storyboard1_reversed}"/>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"></ColumnDefinition>
<ColumnDefinition Width=".5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="gridOne">
<Image x:Name="cardFront" Source="Bilder/card_front.png" Stretch="Fill">
</Image>
<StackPanel x:Name="stack1" Margin="25">
</StackPanel>
</Grid>
<Grid Grid.Column="1" x:Name="gridTwo">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ItemsControl ItemsSource="{Binding MyImages}"
ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
ItemTemplate="{DynamicResource RotatingItemTemplate}">
<ItemsControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.Resources>
</ItemsControl>
</ScrollViewer>
<StackPanel x:Name="stack2" Margin="25">
</StackPanel>
</Grid>
</Grid>
So "grid" and "grid1" are the elements, which can't accessed.
For tests i created a button "Bdrehen" to check, if I can access the flip from a button. This works perfect, it also works by left-clicking on it with the mouse. But not by code.
Heres the code, where I try to start it from code behind:
DataTemplate dt = (DataTemplate)FindResource("RotatingItemTemplate");
Storyboard sb = dt.Resources["Storyboard1_reversed"] as Storyboard;
BeginStoryboard(sb);
After starting I got an error, that the "grid" can't be found in the namespace of "KartenQuartett.MainWindow".
I can find my storyboards, but not my grids inside the datatemplate.
Anyone got an idea to fix it?


Here is your answer Calling Storyboard inside DataTemplate.
But keep in mind that doing that is not a good idea. Accessing any UI Element from your code behind is not a great idea, because it creates a tight coupling between your code and your UI.
I would suggest you to use MVVM instead, and to bind a boolean to run your storyboard as explained here: How to play Storyboard in ViewModel?

Related

How to put width value as percentage in storyboard animation in WPF

I want to make a drawer using storyboard.
There are 2 child grids in the base grid.
One is a 'MenuGrid', the other is a 'ContentGrid'.
So I wrote a storyboard like this(This is a storyboard that adjusts the width of the 'MenuGrid'.):
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="300"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Width="300" x:Name="MenuGrid" Grid.Column="0">
<StackPanel>
<Button x:Name="ButtonCloseMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="Right">
</Button>
<Button x:Name="ButtonOpenMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="left" >
</Button>
</StackPanel>
</Grid>
<Grid x:Name="ContentGrid" Grid.Column="1">
</Grid>
</Grid>
Every time I press a certain button it works very well.
However, when the Width of the MenuGrid decreases, I want the Width of the ContentGrid to increase as well.
In EasingDoubleKeyFrame KeyTime="0" Value="300", is there a way to express 'Value' as a percentage or ratio rather than an int value?

Need to only fire EventTrigger one time

So I have an ItemsControl in which I'm animating newly added items with the following code:
EDIT, I have added more code as requested.
<ItemsControl Name="taskBox" ItemsSource="{Binding TaskList, Mode=OneWay}">
<ItemsControl.Resources>
<Storyboard x:Key="ItemEnterAnimation" AutoReverse="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.3" Storyboard.TargetName="container" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" From="-30" To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</ItemsControl.Resources>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" >
<BeginStoryboard Storyboard="{StaticResource ItemEnterAnimation}" />
</EventTrigger>
</DataTemplate.Triggers>
<Grid Name="container">
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The problem is that there are certain things that can cause the underlying ObservableCollection (TaskList in the sample) to send a CollectionChanged(Reset) event, which causes all of the elements to reload. As a result, the enter animation will get called for every single item again.
Is there a way to only perform this animation one time when the item is first loaded?

TargetName property cannot be set on a Style Setter, so how is it set?

I've spent this past week exploring WPF so it's still very new to me. One of the things I'm working on is simple animations. In this case a bouncing smiley face.
My plan of attack is:
Make a smiley face. I've done this.
Work out the bouncing animation on a simple object. I've done this.
Abstract that animation so it can be used in several places (the elements of the smiley face). I'm stuck here.
Apply the abstracted animation style to all the elements of the smiley face.
After step #2 I had the the following working XAML:
<Window x:Class="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="Test Window" Height="350" Width="620">
<Grid>
<Canvas Margin="0,180,0,0">
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Aqua" />
<Ellipse Canvas.Left="30" Canvas.Top="12" Width="60" Height="30">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.45,0" EndPoint="0.5, 0.9">
<GradientStop Offset="0.2" Color="DarkMagenta" />
<GradientStop Offset="0.7" Color="Transparent" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="33" Canvas.Top="35" Width="20" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White" />
<Ellipse Canvas.Left="40" Canvas.Top="43" Width="6" Height="5" Fill="Black" />
<Ellipse Canvas.Left="68" Canvas.Top="35" Width="20" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White" />
<Ellipse Canvas.Left="75" Canvas.Top="43" Width="6" Height="5" Fill="Black" />
<Path Name="mouth" Stroke="Blue" StrokeThickness="4" Data="M 35,75 Q 55,90 80,75 " />
</Canvas>
<Grid Margin="100,5,0,0" Width="75" Height="300">
<Canvas>
<Ellipse Height="40" Width="40" x:Name="theBall" Canvas.Left="16">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="aniSquash"/>
<TranslateTransform x:Name="aniBounce"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard SpeedRatio="2.0">
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniBounce" Storyboard.TargetProperty="Y" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="120" KeyTime="0:0:0"/>
<SplineDoubleKeyFrame Value="260" KeyTime="0:0:2.2" KeySpline="0, 0, 0.5, 0"/>
<LinearDoubleKeyFrame Value="260" KeyTime="0:0:2.25"/>
<SplineDoubleKeyFrame Value="120" KeyTime="0:0:4.5" KeySpline="0, 0, 0, 0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleX" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleY" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="0.7" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Rectangle Height="5" Canvas.Left="10" Canvas.Top="285" Width="55" Fill="Black"/>
</Canvas>
</Grid>
</Grid>
</Window>
While altering the above, working, XAML for step #3 I introduced an error I don't really understand. Here is the altered XAML that doesn't work:
<Window x:Class="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="Test Window" Height="350" Width="620">
<Window.Resources>
<TransformGroup x:Key="aniBounceAndSquash">
<ScaleTransform x:Name="aniSquash"/>
<TranslateTransform x:Name="aniBounce"/>
</TransformGroup>
<Style x:Key="styleBounceAndSquash" TargetType="FrameworkElement">
<Setter Property="RenderTransform" Value="{StaticResource aniBounceAndSquash}" />
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard SpeedRatio="2.0">
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniBounce" Storyboard.TargetProperty="Y" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="120" KeyTime="0:0:0"/>
<SplineDoubleKeyFrame Value="260" KeyTime="0:0:2.2" KeySpline="0, 0, 0.5, 0"/>
<LinearDoubleKeyFrame Value="260" KeyTime="0:0:2.25"/>
<SplineDoubleKeyFrame Value="120" KeyTime="0:0:4.5" KeySpline="0, 0, 0, 0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleX" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleY" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="0.7" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Canvas Margin="0,180,0,0">
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Aqua" />
<Ellipse Canvas.Left="30" Canvas.Top="12" Width="60" Height="30">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.45,0" EndPoint="0.5, 0.9">
<GradientStop Offset="0.2" Color="DarkMagenta" />
<GradientStop Offset="0.7" Color="Transparent" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="33" Canvas.Top="35" Width="20" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White" />
<Ellipse Canvas.Left="40" Canvas.Top="43" Width="6" Height="5" Fill="Black" />
<Ellipse Canvas.Left="68" Canvas.Top="35" Width="20" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White" />
<Ellipse Canvas.Left="75" Canvas.Top="43" Width="6" Height="5" Fill="Black" />
<Path Name="mouth" Stroke="Blue" StrokeThickness="4" Data="M 35,75 Q 55,90 80,75 " />
</Canvas>
<Grid Margin="100,5,0,0" Width="75" Height="300">
<Canvas>
<Ellipse Height="40" Width="40" x:Name="theBall" Canvas.Left="16" Style="{StaticResource styleBounceAndSquash}">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Rectangle Height="5" Canvas.Left="10" Canvas.Top="285" Width="55" Fill="Black"/>
</Canvas>
</Grid>
</Grid>
</Window>
The error "TargetName property cannot be set on a Style Setter. Line 20 Position 79."
If I can't set it in the style how do I set it?

Well it turns out that you can't set Storyboard.TargetName in a Style.Setter because it's a style and is abstracted. Hence a reference via name is not allowed as "there is no spoon". So I dropped Storyboard.TargetName and looked for another way.
I did find that in Storyboard.TargetProperty you can use the object structure, sort of like walking the DOM, to reference the object you want. In that way you bypass the need for Storyboard.TargetName. It took longer to work out referencing the object by structure because I was using a TransformGroup and MS docs are not the most friendly of docs. Finally, I got it and here it is for anyone else that has the same problem.
<Style x:Key="buttonSmiley" TargetType="{x:Type Button}">
<Style.Resources>
<Storyboard x:Key="OnVisibleStoryboard">
<DoubleAnimationUsingKeyFrames Duration="0:0:2.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" >
<LinearDoubleKeyFrame Value="75" KeyTime="0:0:0"/>
<SplineDoubleKeyFrame Value="25" KeyTime="0:0:0.75" KeySpline="0, 0, 0.5, 0"/>
<LinearDoubleKeyFrame Value="-25" KeyTime="0:0:1.2"/>
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:2.25" KeySpline="0, 0, 0, 0.5"/>
<LinearDoubleKeyFrame Value="175" KeyTime="0:0:2.4" />
<SplineDoubleKeyFrame Value="150" KeyTime="0:0:2.75" KeySpline="0, 0, 0, 0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:5.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" >
<LinearDoubleKeyFrame Value="0.01" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:1.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.05"/>
<LinearDoubleKeyFrame Value="1.15" KeyTime="0:0:2.15"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.4"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.75"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:5.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" >
<LinearDoubleKeyFrame Value="0.01" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:1.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.05"/>
<LinearDoubleKeyFrame Value="0.75" KeyTime="0:0:2.2"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.4"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.75"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="OnLoadStoryboard_BeginStoryboard"/>
<BeginStoryboard x:Name="OnVisibleStoryboard_BeginStoryboard" Storyboard="{StaticResource OnVisibleStoryboard}"/>
</Trigger.EnterActions>
</Trigger>
<EventTrigger RoutedEvent="Button.Loaded">
<RemoveStoryboard BeginStoryboardName="OnVisibleStoryboard_BeginStoryboard"/>
<BeginStoryboard x:Name="OnLoadStoryboard_BeginStoryboard" Storyboard="{StaticResource OnVisibleStoryboard}"/>
</EventTrigger>
</Style.Triggers>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Canvas Margin="-35,-35,0,0">
<Ellipse Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" Stroke="Blue" StrokeThickness="2" Fill="#FFD8CF15" />
<Ellipse Canvas.Left="18" Canvas.Top="12" Width="33" Height="15">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.45,0" EndPoint="0.5, 0.9">
<GradientStop Offset="0.2" Color="DarkMagenta" />
<GradientStop Offset="0.7" Color="Transparent" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="17" Canvas.Top="25" Width="10" Height="10" Stroke="Blue" StrokeThickness="2" Fill="White" />
<Ellipse Canvas.Left="20" Canvas.Top="28" Width="3" Height="3" Fill="Black" />
<Ellipse Canvas.Left="34" Canvas.Top="25" Width="10" Height="10" Stroke="Blue" StrokeThickness="2" Fill="White" />
<Ellipse Canvas.Left="37" Canvas.Top="28" Width="3" Height="3" Fill="Black" />
<Path Name="mouth" Stroke="Blue" StrokeThickness="2" Data="M 20,43 Q 27,53 40,44" />
</Canvas>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TranslateTransform />
<ScaleTransform />
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
Of course I would have given up on the style altogether if Button.Triggers would have allowed normal triggers and not JUST event triggers in the collection, thank you MS for making life painful, er um I mean fun. Because I needed both I had to work this out.

I had this issue because I was building a custom resource (a button).
This was my problem, and its solution:
<Style x:Key="MyButton" TargetType="{x:Type Button}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
...
<ControlTemplate.Triggers>
==> should have put triggers here <==
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
==> not here <==
</Style.Triggers>
</Style>

Here is an example of your animation applied to a Button. Its probably not quite the answer you're looking for as it does not have reusable resources. I have just moved the TransformGroup, Trigger and Storyboard into the control. I will take another look...
<Button Style="{StaticResource styleBounceAndSquash}">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="aniSquash"/>
<TranslateTransform x:Name="aniBounce"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard SpeedRatio="2.0">
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniBounce" Storyboard.TargetProperty="Y" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="120" KeyTime="0:0:0"/>
<SplineDoubleKeyFrame Value="260" KeyTime="0:0:2.2" KeySpline="0, 0, 0.5, 0"/>
<LinearDoubleKeyFrame Value="260" KeyTime="0:0:2.25"/>
<SplineDoubleKeyFrame Value="120" KeyTime="0:0:4.5" KeySpline="0, 0, 0, 0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleX" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="aniSquash" Storyboard.TargetProperty="ScaleY" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
<LinearDoubleKeyFrame Value="0.7" KeyTime="0:0:2.25"/>
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

Icon blending animation in WPF

I love the whole concept of Material Design, and especially its animations! And on my phones Musicplayer when pressing the Play/Pause button a relly neat animation starts blending between the two icons like this:
How can you do something like this in WPF? Maybe with Paths?
Tips would be really appreciated!! thanks

I have done something similar in Material Design in XAML Toolkit which replicates the menu 'burger' transitioning into a back arrow, using paths.
Essentially the menu is three horizontal line paths. To convert to a back arrow the two outer (above/below lines) are angled, scaled, and slightly moved using DoubleAnimationUsingKeyFrames.
On top of that the entire canvas is rotated 180 degrees.
This was made a lot easier by doing in blend.
The full XAML file is on GitHub here, you are looking for the MaterialDesignHamburgerToggleButton style. (I tried posting a large snippet, but Stack Overflow errored.)

<Window x:Class="Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="650" Width="500"
xmlns:local="clr-namespace:Demo">
<Grid>
<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="pause.png" />
<Image Name="Hover" Source="play.png" Opacity="0"/>
<Image Name="Pressed" Source="pause.png" Opacity="0" />
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseDownTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseUpTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseEnterTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseExitTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>

WPF Flip Animation

I'm trying to create a control in WPF, similar to a card, that will have bound data on both "sides". Using the following code I can get it to flip from FIRST NAME to LAST NAME, just not back. Once it flips to LAST NAME and I click it just flashes like it's performing the same animation and not running the reverse. Any insight into this problem would be greatly appreciated.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>

The problem with the code is that first time when animation is run, the grid named "back" becomes visible to the user and grid named "front" becomes transparent. But still it is on the top of "Back" grid and capturing all the mouse hit.
So, when user again left click the mouse, it is captured by front grid not the back grid.
To solve this problem, You need to IsHitTestVisible to false when grid is transparent.
See the below code.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid.Resources>
<Style TargetType="Grid">
<Setter Property="IsHitTestVisible" Value="True" />
<Style.Triggers>
<Trigger Property="Opacity" Value="0">
<Setter Property="IsHitTestVisible" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>

Categories

Resources