How to make a looped TranslateTransform? - silverlight

I have a scrolling text line, and I need to achieve effect that immediately after the end of the text, start of the same text will appear. Any ideas?
UPD text is static (doesn't change)
Current animation code is like this:
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="200" To="-200" Storyboard.TargetName="translate"
Storyboard.TargetProperty="Y" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
It works ok, but it jerks when reaches end (and jumps back to the start). I need to avoid this.

If the text length is static, the easiest way to do this is to create multiple copies of the text offscreen and have the copy/copies animate to the same position as the original. If you have an animation loop this way, there will be no "jerk"
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="SilverlightApplication3.MainPage"
Width="200" Height="480">
<UserControl.Resources>
<Storyboard x:Name="TextScrollStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="offscreenTextBlock" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<i:Interaction.Triggers>
<i:EventTrigger>
<ei:ControlStoryboardAction Storyboard="{StaticResource TextScrollStoryboard}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid x:Name="LayoutRoot" Background="#FFBBBBBB">
<TextBlock x:Name="textBlock" Text="This is some text" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="0"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="offscreenTextBlock" Text="This is some text" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="-200"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>

Check for a property "RepeatCount" (if memory serves me right), you can set it to infinity.

Related

WPF Storyboard animation unintended shaking

I'm trying to create an animated checkbox in WPF, similar to this one.
This question is NOT a duplicate of this one, because there is no problem with the framerate of the animation.
The animations and the storyboards are already in place, and working properly, but for some rason, while the animation is playing, it looks like the whole thing is shaking, as demonstrated here. The effect is best seen on the right border of the box.
The following is the XAML source code of the custom checkbox. I don't think that there is a need to post the code behind, since it doesn't contain anything other than the RoutedEvent definitions (FlatCheckBox.Checked and FlatCheckBox.Unchecked).
<UserControl x:Name="userControl" x:Class="Sync_Launcher.Controls.FlatCheckBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="clr-namespace:Sync_Launcher.Controls"
mc:Ignorable="d"
d:DesignHeight="30"
Background="Transparent" MouseLeftButtonDown="FlatCheckBox_OnMouseLeftButtonDown">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ActualHeight, ElementName=userControl}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Column="0">
<Grid Name="tickHolderGridRoot" Margin="4">
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform x:Name="rotationTransform" Angle="0"/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid Name="tickHolderGrid" Margin="0,0">
<Border Name="tickBorder" SnapsToDevicePixels="True" Opacity="0" BorderThickness="2,0,0,2" BorderBrush="#FF1CA36F" />
<Border Name="overlayBorder" SnapsToDevicePixels="True" Opacity="1" BorderThickness="2,2,2,2" BorderBrush="#FF404D61" />
</Grid>
</Grid>
</Grid>
<Label
Grid.Column="1"
Content="{Binding Text, ElementName=userControl}"
VerticalContentAlignment="Center"
FontSize="16"
Padding="5,0"
FontStyle="{Binding FontStyle, ElementName=userControl}"
FontWeight="{Binding FontWeight, ElementName=userControl}"/>
</Grid>
<UserControl.Resources>
<Duration x:Key="animationDuration">0:0:0.4</Duration>
<KeyTime x:Key="animationEnd">0:0:0.4</KeyTime>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger SourceName="userControl" RoutedEvent="controls:FlatCheckBox.Checked">
<BeginStoryboard>
<Storyboard Timeline.DesiredFrameRate="60">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotationTransform" Storyboard.TargetProperty="Angle" Duration="{StaticResource animationDuration}">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="{StaticResource animationEnd}" Value="-60">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="overlayBorder" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource animationDuration}"/>
<DoubleAnimation Storyboard.TargetName="tickBorder" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource animationDuration}"/>
<ThicknessAnimation Storyboard.TargetName="tickHolderGrid" Storyboard.TargetProperty="Margin" From="0,0" To="0,2" Duration="{StaticResource animationDuration}"/>
<ThicknessAnimation Storyboard.TargetName="tickHolderGridRoot" Storyboard.TargetProperty="Margin" From="4" To="2,0,2,4" Duration="{StaticResource animationDuration}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="userControl" RoutedEvent="controls:FlatCheckBox.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotationTransform" Storyboard.TargetProperty="Angle" Duration="{StaticResource animationDuration}">
<EasingDoubleKeyFrame KeyTime="0" Value="-60"/>
<EasingDoubleKeyFrame KeyTime="{StaticResource animationEnd}" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="overlayBorder" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource animationDuration}"/>
<DoubleAnimation Storyboard.TargetName="tickBorder" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource animationDuration}"/>
<ThicknessAnimation Storyboard.TargetName="tickHolderGrid" Storyboard.TargetProperty="Margin" From="0,2" To="0,0" Duration="{StaticResource animationDuration}"/>
<ThicknessAnimation Storyboard.TargetName="tickHolderGridRoot" Storyboard.TargetProperty="Margin" From="2" To="4" Duration="{StaticResource animationDuration}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
I have tried increasing the storyboard framerate by settings the Timeline.DesiredFrameRate to 60, as you can see in the code, but it had no effect on the shakyness of the animation.
I have also tried setting the SnapsToDevicePixels property to true hoping that it would improve the animation.
What might be the cause of this shaking effect, what can I do to eliminate it?

How to apply double animation on a control from another xaml?

I have a button that should cause fade-in animation on some other controls(Studio, Animation, Record...) which are located in ANOTHER xaml:
<Button x:Name ="MainButton" Grid.Row="87" Grid.Column="150" Grid.ColumnSpan="2" Grid.RowSpan="2" Command="{Binding AutoClickFadeinButtonCommand}">
<Button.Triggers>
<EventTrigger RoutedEvent="PreviewMouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="info_content" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
How to reference these controls in my current xaml? Just to mention that I use mvvm, and I would like not to reference button control inside ViewModel class.
Create an event inside your ViewModel and attach an event trigger to your XAML (e.g. ControlStoryboardAction) that starts the animation as soon as the event has been triggered.
Edit:
You could put something like that inside your VM:
public event EventHandler AnimationCalled;
protected virtual void OnAnimationCalled()
{
AnimationCalled?.Invoke(this, EventArgs.Empty);
}
As soon as anything will call OnAnimationCalled (any method that is triggered by your button or a command) the event will be raised.
You can subscribe to this event inside XAML by using a trigger (the SourceObject has to be the VM containing your event) in combination with the ControlStoryboardAction:
<i:Interaction.Triggers>
<i:EventTrigger SourceObject="{Binding Mode=OneWay}" EventName="AnimationCalled">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
Edit 2: Complete Example
The MainViewModel:
using System;
namespace StoryboardTriggerExample
{
public class MainViewModel
{
//Only needed to have a target for our CallMethodAction
//In real world it´d be easier to make the call to OnAnimationCalled(); via command
public void CallAnimation()
{
OnAnimationCalled();
}
public event EventHandler AnimationCalled;
protected virtual void OnAnimationCalled()
{
AnimationCalled?.Invoke(this, EventArgs.Empty);
}
}
}
An UserControl that will contain our Storyboard:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:StoryboardTriggerExample"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="StoryboardTriggerExample.UserControlContainingStoryboard"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FF101085"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle1">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FF6BFF63"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<StackPanel>
<i:Interaction.Triggers>
<i:EventTrigger EventName="AnimationCalled" SourceObject="{Binding Mode=OneWay}">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Rectangle x:Name="rectangle1" Fill="#FFF4F4F5" Height="30" Stroke="Black" Width="30" HorizontalAlignment="Left" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</StackPanel>
And our MainWindow:
<Window
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:StoryboardTriggerExample"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="StoryboardTriggerExample.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<StackPanel>
<Button x:Name="button" Content="Button">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding Mode=OneWay}" MethodName="CallAnimation"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<local:UserControlContainingStoryboard/>
</StackPanel>
Should look like this:
Should move animated via storyboard to this, by clicking the button:
You can download the solution on GitHub

MouseEnter and MouseLeave

I have a user control in WPF. I have a button control within the control. I want the control to fade in and out when the mouse enters and leaves the control. The problem is when the mouse enters the button and leaves the control, it fades. Below is the code.
<UserControl x:Class="WpfPresentationEditor.PresentationWindowControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="68" d:DesignWidth="793">
<UserControl.Resources>
<Storyboard x:Key="onMouseEnter">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="onMouseLeave">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="onMouseEnter_BeginStoryBoard" Storyboard="{StaticResource onMouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="onMouseLeave_BeginStoryBoard" Storyboard="{StaticResource onMouseLeave}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard Storyboard="{StaticResource onMouseLeave}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Opacity=".5">
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"></Canvas>
<Button Click="btnClose_Click" Height="44" HorizontalAlignment="Left" Name="btnClose" VerticalAlignment="Center" Width="44" Margin="12,12,0,12">
<Button.Background>
<ImageBrush ImageSource="images/exit.png" />
</Button.Background>
</Button>
</Grid>
This is what I ended up doing to make this work as desired.
I changed the RoutedEvent to UserControl.MouseEnter rather than Mouse.MouseEnter.
Then I created my own user control and created an Image button like this http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx.
So my altered code now looks like this....
<UserControl x:Class="WpfPresentationEditor.PresentationWindowControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="68" d:DesignWidth="793" xmlns:my="clr-namespace:WpfPresentationEditor">
<UserControl.Resources>
<ImageBrush x:Key="exitImage" ImageSource="images/exit.png"/>
<!--These are the story boards for the control-->
<Storyboard x:Key="onMouseEnter">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="onMouseLeave">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UserControl.MouseEnter">
<BeginStoryboard x:Name="onMouseEnter_BeginStoryBoard" Storyboard="{StaticResource onMouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UserControl.MouseLeave">
<BeginStoryboard x:Name="onMouseLeave_BeginStoryBoard" Storyboard="{StaticResource onMouseLeave}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard Storyboard="{StaticResource onMouseLeave}" />
</EventTrigger>
</UserControl.Triggers>
<StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal" Background="Black">
<my:ImageButtonControl ButtonBase.Click="btnClose_Click" x:Name="imageButtonControl1" Width="44" Image="images/exit.png" Height="44"/>
</StackPanel>
I would make 2 controls, one containing everything but your button and another one with just the button.
Then put them both in a grid so they will stack upon each other, and voila.

picture in wpf (only click in circle not in squre, the circle is inside of square)

I have a picture in my program
In this picture, there is a square and a circle in the square
In my program, when user click on the circle, my animation will execute.(only click in circle Not in square, the circle is inside of square). please help me to write this code
Thanks in advance
Using the Blend SDK you could write this fully in Xaml using a ControlStoryboardAction
<Window ...
xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
>
<Window.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.75"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.75"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Canvas Margin="56,104,114,248">
<Rectangle Fill="#FFF4F4F5" Height="157" Canvas.Left="60" Stroke="Black" Canvas.Top="51" Width="170"/>
<Ellipse x:Name="ellipse" Fill="#FFE48A06" Height="115" Canvas.Left="89" Stroke="Black" Canvas.Top="76" Width="119" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<CompositeTransform/>
</Ellipse.RenderTransform>
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="MouseLeftButtonDown">
<im:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</Ellipse>
</Canvas>
</Window>
BTW: I made this for Windows Phone so it might need a little adjustment for WPF.

Animate UserControl in WPF?

I have two xaml file one is MainWindow.xaml and other is userControl EditTaskView.xaml.
In MainWindow.xaml it consists of listbox and when double clicked any item of listbox, it displays other window (edit window) from EditView userControl. I am trying to animate this userControl everytime whenever any item from the listbox is double clicked. I added some animation in userControl however the animation only gets run once. How can i make my animation run everytime whenever any item from the listbox is clicked?
MainWindow.xaml
<ListBox x:Name="lstBxTask" Style="{StaticResource ListBoxItems}" MouseDoubleClick="lstBxTask_MouseDoubleClick">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Rectangle Style="{StaticResource LineBetweenListBox}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Taskname}" Style="{StaticResource TextInListBox}"/>
<Button Name="btnDelete" Style="{StaticResource DeleteButton}" Click="btnDelete_Click"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ToDoTask:EditTaskView x:Name="EditTask" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Visibility="Collapsed"/>
In the MainWindow code, there is mouse double click event, which changes the visibility of EditTaskView to Visible.
Suggestions?
You haven't shown us your animation. Usually the animation does play everytime the event is triggered:
<UserControl.Resources>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0" Value="#FFB62A2A"/>
<EasingColorKeyFrame KeyTime="0:0:4" Value="#FF2A32B6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Control.MouseDoubleClick">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</UserControl.Triggers>
Thanks bitbonk, your code really help.
I think i figure out what was my problem. I had EventTrigger as FrameworkElement.Loaded instead of Control.MouseDoubleClick.
anyway the code looks like this:
<Storyboard x:Key="AnimateEditView">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="EditTask">
<EasingThicknessKeyFrame KeyTime="0" Value="0">
<EasingThicknessKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut"/>
</EasingThicknessKeyFrame.EasingFunction>
</EasingThicknessKeyFrame>
<EasingThicknessKeyFrame KeyTime="0:0:1.6" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EditTask">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource headerAnimation}"/>
<BeginStoryboard Storyboard="{StaticResource textBxAnimation}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseDoubleClick">
<BeginStoryboard Storyboard="{StaticResource AnimateEditView}"/>
</EventTrigger>
</Window.Triggers>

Resources