How to do Animation in WPF
22-Apr-1111 Leave a comment
How to extract an animation to a resource by using style
Also How to perform a scale transform in XAML
<ResourceDictionary xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
<Style TargetType=”Button”>
<Style.Triggers>
<EventTrigger RoutedEvent=”Button.MouseEnter”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty=”(RenderTransform).ScaleTransform.ScaleX)” To=”1.1″ Duration=”0:0:0.15″ />
<!–AutoReverse=”True” RepeatBehavior=”2x”–>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty=”(RenderTransform).(ScaleTransform.ScaleY)” To=”1.1″ Duration=”0:0:0.15″ />
<!–<DoubleAnimation
Storyboard.TargetName=”GrowingButton”
Storyboard.TargetProperty=”Button.Height” To=”80″ Duration=”0:0:0.2″ />–>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent=”Button.MouseLeave”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty=”(RenderTransform).(ScaleTransform.ScaleX)” To=”1.0″Duration=”0:0:0.15″ />
<!–AutoReverse=”True” RepeatBehavior=”2x”–></Storyboard></BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty=”(RenderTransform).(ScaleTransform.ScaleY)” To=”1.0″ Duration=”0:0:0.15″ />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
<Setter Property=”RenderTransform”>
<Setter.Value>
<ScaleTransform
ScaleX=”1″ ScaleY=”1″
CenterX=”50″CenterY=”10″
/>
<!–CenterX=”{Binding Path=ActualWidth, ElementName=Button,Converter=}”–>
</Setter.Value>
</Setter>
</Style>
How to override a global style
Use Style=”{x:Null}”
How to perform a procedurally animated growing buttons using a scale transform
See Wrox VB2010 p214
How to perform XAML animation: First Success
<Button Content=”Load” HorizontalAlignment=”Left” Name=”LoadButton” VerticalAlignment=”Top” Width=”75″ >
<Button.Triggers>
<EventTrigger RoutedEvent=”Button.MouseEnter”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName=”LoadButton”
Storyboard.TargetProperty=”Opacity” From=”1.0″ To=”0.0″ Duration=”0:0:1″ AutoReverse=”True” RepeatBehavior=”Forever” />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Content=”Growing” HorizontalAlignment=”Left” Margin=”479,4,0,0″ Name=”GrowingButton” VerticalAlignment=”Top” Width=”75″ >
<Button.Triggers>
<EventTrigger RoutedEvent=”Button.MouseEnter”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName=”GrowingButton”
Storyboard.TargetProperty=”Width” To=”80″ Duration=”0:0:0.5″ AutoReverse=”True” RepeatBehavior=”2x” />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>>