WPF Storyboard Elements in VB.NET
In this article, we will see how to use Storyboard Elements in WPF.
In this article, we will see how to use Storyboard Elements in WPF.
Storyboard Elements:-The Storyboard elements is a type of container timeline. The Storyboard elements can be declared to contain animations. The Storyboard elements is the parent element of the BeginStoryboard. You can declare several Storyboard elements for different animations within a BeginStoryboard element.
A storyboard element has two important attributes:
-
Storyboard.Targetname:- This is the target element name.
-
Storyboard.TargetProperty:- The attribute that should be affected for the element that is specified in Storyboard.Targetname attribute.
There are two common types of animations: ColorAnimation and DoubleAnimation.
We will use five common attributes to set.
-
From:- The value of the attribute at the start of animation.
-
To:- The value of the attribute when animation ends.
-
By:- The intermediate value of the attribute between the first and last values.
-
Duration:- The duration of the animation.
-
RepeatBehavior:- Specifies the behavior of animation. It will be discussed in more detail later.
Example:- We will use 'BeginStoryboard', 'Storyboard' and 'DoubleAnimation' in this example. Throw this example we can change the size of your button.
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSend"
Storyboard.TargetProperty="Width">
<DoubleAnimation From="100"
To="200"
Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="btnSend" Width="120" Height="40" Margin="40"
Background="Pink" Foreground="Red" FontSize="15">
My StoryBoard
</Button>
</StackPanel>
</Grid>
</Window>
Deign:-
Output:-We will click the button and change the size of button.
Example:-We will use 'BeginStoryboard', 'Storyboard' and 'ColorAnimation' in this example. Throw this example we can change the color of your button.
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="btnSend" Storyboard.TargetProperty="(Background). (SolidColorBrush.Color)">
<ColorAnimation From="Pink"
To="Purple"
By="Beige"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="btnSend"
Width="120"
Height="40"
Margin="40"
Background="Pink" Foreground="Red" FontSize="15">
My StoryBoard
</Button>
</StackPanel>
</Grid>
</Window>
Deign:-
Output:-We will click the button change the color of button.
I hope this article code help you.