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>    

Add a alternate color to ListView rows in WPF using XAML


Using Alteration count you can add Datagrid like alternate background for ListViewItems. There is no alternate background property for ListView control in WPF, instead we can made this possible with style triggers.

Style triggers work with property and we can track the change with trigger value value.

Styles

The alternate color we want to apply is for ListViewItems , so we have to create a Itemcontainer style for ListView as follows.

    <Style TargetType="ListViewItem" x:Key="gridview_itemcontainer1" >
        <Setter Property="Foreground" Value="DarkBlue"/>
        <Setter Property="FontSize" Value="13.5"/>       
    </Style>

You can define the style as resource file or can define as ListView.Resources in your xaml portion of UI.

As ListViewResource

<ListView AlternationCount=2 >
  <ListView.Resources>
   <Style TargetType="ListViewItem" >
        <Setter Property="Foreground" Value="DarkBlue"/>
        <Setter Property="FontSize" Value="13.5"/>       
    </Style>
  </ListView.Resources>

<ListView/>

In our style we are define background and font using Setter. Likewise we can add some Style Triggers. We want to change the color of ListViewItems according to the AlternationIndex value.

Style.Triggers

Add the following style trigger section in our style.

<Style.Triggers>
    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
       <Setter Property="Background" Value="LightBlue"></Setter>
    </Trigger>
    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
       <Setter Property="Background" Value="LightYellow"></Setter>
    </Trigger>
 </Style.Triggers>

We had added two trigger for checking the alternationIndex value and a associated setter for setting background property of ListViewItem.

Our style is finished and purpose is served.

If you are use resource file you can assign the style to Item container as ItemContainerStyle=”{DynamicResource <RESOURCEKEY>}”. Replace the RESOURCE KEY with your own style key.