Storyboard animation in WPF C#

WPF allows you to customize the look and feel using XAML and Styles, it allow capable of create some cool animation which is a way of interacting with user and UI. You can use Storyboard with EvenTrigger.

Let’s create a style for a textbox control, which add some color, align text etc ,then add a Style trigger and Event trigger which also add some font animation , want to play while the textbox has focus and lost it’s focus.

The Style

It is a simple style, add font, alignment etc Name the style as NuberTex.

 <Style x:Key="NumberText" TargetType="TextBox">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="TextAlignment" Value="Right"/>   
        

  </Style>    

To use this style add the following lines to the TextBox control (xaml).

 <TextBox  Style="{DynamicResource NumberText}" />

Storyboard

Now we can add a Event trigger and a story board to the above style. First we create a style trigger and then we want to add some style based on Events, namely Gotfocus and Lostfocus.

<Style.Triggers >
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Foreground" Value="IndianRed"/>
            </Trigger>
            <EventTrigger RoutedEvent="GotFocus">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0:1" To="20" Storyboard.TargetProperty="FontSize" From="18"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
            <EventTrigger RoutedEvent="LostFocus">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0:1" From="20" Storyboard.TargetProperty="FontSize" To="18"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
        </Style.Triggers>

The storyboard is added within the trigger action. We used a double animation which increase the font from range of values specified using To and From, you can specify what event property you want to play using Target property.

Complete Style

Here is the full style

<Style x:Key="NumberText" TargetType="TextBox">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="TextAlignment" Value="Right"/>         
        
        <Style.Triggers >
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Foreground" Value="IndianRed"/>
            </Trigger>
            <EventTrigger RoutedEvent="GotFocus">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0:1" To="20" Storyboard.TargetProperty="FontSize" From="18"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
            <EventTrigger RoutedEvent="LostFocus">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0:1" From="20" Storyboard.TargetProperty="FontSize" To="18"  />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
        </Style.Triggers>

    </Style>