May 31, 2011

Code Sample to animate the button using Storyboard elemnets in WPF

Below is the sample code to Animate the button (Change the width,Change the Background color,Change the border color ) on Mouse Over



<PageFunction
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib" 
    x:Class="TestWPF.ExAnimation1"
    x:TypeArguments="sys:String"
    Title="ExAnimation1">
    <StackPanel>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="Width">
                            <DoubleAnimation From="120"
                               To="180" 
                               Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="orange"
                              To="Blue"
                              By="Beige" 
                              Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>


                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="BorderBrush.Color">
                            <ColorAnimation From="Black"
                              To="Orange"
                              By="Red" 
                              Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>


                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
        <Button Name="btnAnimate" 
            Width="120"
            Height="50"
            Margin="40"
            Background="OrangeRed" BorderBrush="Cyan">
          ANIMATE
            
        </Button>
        
    </StackPanel>
    
</PageFunction>

No comments:

Post a Comment