Tuesday, 27 March 2012

Animation based on property of the control

This article is about sample animation of a button with the properties of height and width.Here it is the sample animation that we can apply on any controls based on their own properties.
Here i'm animating the button when the button is loaded.Simply i'm increasing the height and width using story board tags.
To work with story board , we have to mention the target name i.e. on which control we are applying the animation, time duration and target property i.e. based on which property we are animating the control.
Code :

<Button Content="Click Me" Height="25" HorizontalAlignment="Left" Margin="25,25,0,0" Name="button1" VerticalAlignment="Top" Width="100" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                        Storyboard.TargetName="button1" Storyboard.TargetProperty="Width"
                        From="100" To="135" Duration="0:0:0.2" AutoReverse="True" RepeatBehavior="Forever"/>
                            <DoubleAnimation Storyboard.TargetName="button1" Storyboard.TargetProperty="Height"
                        From="25" To="60" Duration="0:0:0.3" AutoReverse="True" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
</Button>
Here RepeatBehavior is set to Forever that means, the animation can be performed till we close the window/page( what ever we used).

This is the sample code to animate a button based on the properties of height and width.
Hope you understand this article..