- Back to Home »
- SLIIT , WPF »
- WPF Animations
Posted by : ජේ
Thursday, September 26, 2013
Windows Presentation Foundation (WPF) is a Computer Software graphical subsystem for rendering user interfaces in Windows-based applications by Microsoft. WPF attempts to provide a consistent programming model for building applications and separates the user interface from business logic. WPF use XAML to define and link various UI elements. WPF applications can also be deployed as standalone desktop programs, or hosted as an embedded object in a website. WPF aims to unify a number of common user interface elements, such as 2D/3D rendering, vector graphics, run time animation, and pre-rendered media.
In this blog post I am going to discuss two ways of doing WPF animations. So I am going to show how to do a fade in fade out animation to a Text Box by using its Opacity property.
1)
First we need to write an animation method to a given time period. My first approach I am going to implement it inside the window resources.
<Window.Resources>
<Style TargetType="FrameworkElement" x:Key="animatedTxt">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.6"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<TextBox Style="{StaticResource animatedTxt}" x:Name="txtAnimation" Height="23" Margin="10,27,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="142" />
C# code for Visibility change
XAML code for the Text Box
Run and see the animation.
private void mouseclick(object sender, RoutedEventArgs e)
{
txtAnimation.Visibility = Visibility.Visible;
}
2)
In my second approach I am going to implement an animation which is fire for a Button click. So I add a Button and a Text Box. Inside the Button XAML tag I am going to implement the animation method.
<Button x:Name="btnAnimation" Content="" Margin="565,3,212,8" Width="40" Height="40" Click="btnCrtCht_Click" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="txtAnimation"
Storyboard.TargetProperty="(Canvas.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0.0"/>
<SplineDoubleKeyFrame KeyTime="00:00:1.50" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<TextBox x:Name="txtAnimation" Height="23" Margin="10,27,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="142" />
good wrk..keep it up!
ReplyDeletegreat stuff thanks for this
ReplyDeletePatta macho... Keep It Up... Hope to see more stuff in future... :)
ReplyDelete