wpf animation fade in freeze and fade out
I want to show some data on a form. The form should fade in for 5 sec and display data with full opacity for 10 sec and then start fade out in 3 sec. I have do this programatically in c#.
Please give suggestions or sa开发者_运维问答mple code.
Thanks Raju
You would use a DoubleAnimationUsingKeyFrames (see c# usage example in the msdn docs here) and animate the Opacity property of your control.
You can define a storyboard in XAML that manipulates the Opacity. The following complete XAML example illustrates this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
<Button Name="BeginButton">Begin</Button>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="1.0" To="0.0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Page>
Running the animation from C#, per your requirements, is also possible:
public void DoAnimation()
{
Storyboard opacityStoryboard = FindResource("MyBeginStoryboard") as Storyboard;
opacityStoryboard.Begin(this);
}
A combination of the two approaches is to define the animation in XAML and activate it in C#.
Using this pattern, you can define two storyboards:
- A storyboard that changes the form's Opacity property from 0.0 to 1.0 over five seconds
- A storyboard that changes the form's Opacity property from 1.0 to 0.0 over three seconds
You can modify the example above to do this as a standalone sample:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
<Button Name="FadeInButton">Fade In</Button>
<Button Name="FadeOutButton">Fade Out</Button>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="FadeInButton">
<BeginStoryboard Name="FadeInStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="0.0" To="1.0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="FadeOutButton">
<BeginStoryboard Name="FadeOutStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="1.0" To="0.0" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Page>
Using the "run storyboard from C#" pattern shown above, you can run each of the storyboards at the proper time in your C# code.
精彩评论