How to do Animation in WPF

 

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”&gt;

<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>>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: