My previous post was xamlless so I thought I'd give some basic examples to get you started if you're not familiar with animations.

First I'll show you how to create this smooth translate and opacity animation and how to tweak it to what you want. Here's the storyboard I declared in my project resources :

<Storyboard x:Key="showItemsStoryboard">

  <DoubleAnimation

      Storyboard.TargetProperty="Opacity"

                              DecelerationRatio="0.5"

                              To="1"

                              Duration="00:00:00.400"/>         

  <DoubleAnimation

      Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"

                              To="0"

                              DecelerationRatio="0.5"

                              Duration="00:00:00.400"/>

</Storyboard>

There are various ways you can do this but I prefer using a more generic approach where I will not be dependent on the type of object I will be animating, hence the UIElement.RenderTransform. You could also set this explicitly by using the Storyboard.TargetName property and naming (x:Name) your TranslateTransform, which would look like this : 

 <DoubleAnimation

  

Either way, it does not really change anything for the current example. Now, the only thing left is to make sure the object you will be animating has a TranslateTransform attached and its opacity set to 0 :

<TextBlock Opacity="0">

 <TextBlock.RenderTransform>

    <TranslateTransform X="-15"/>

 </TextBlock.RenderTransform>

</TextBlock>

Your control is now ready to be animated, for testing purposes you can just add the following code in your xaml :

 <TextBlock.Triggers>

    <EventTrigger RoutedEvent="TextBlock.Loaded">

       <EventTrigger.Actions>

        <BeginStoryboard Storyboard="{StaticResource showItemsStoryboard}"/>

       </EventTrigger.Actions>

    </EventTrigger>

 </TextBlock.Triggers>

There are various elements you can play with to get the effect you want, at this point it's just a matter of changing the duration along with the Acceleration or DecelerationRatio and the TranslateTransform X value. Keep in mind that in a lot of cases a simple Opacity animation should be enough without adding the translate. The key is to not over do it .

 

Another fun yet dangerous (in a design point of view) thing to play with when working with animation, is the ScaleTransform. If you read my previous post you will understand why. ScaleTransform animation surfs on the thin line between corny and cool. Scaling elements can be intresting in splash screens or when you initially layout your elements. Here is an example :

 <DoubleAnimation Storyboard.TargetProperty="Opacity"

                          To="1"

                          Duration="00:00:00.400"/>         

         <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

                          To="1"

                          Duration="00:00:00.400"/>

         <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

                          To="1"

                          Duration="00:00:00.400"/>

Make sure your element has both the opacity set to 0 and has a ScaleTransform attached : 

<TextBlock Text="Hello World"

  Opacity="0">

 <TextBlock.RenderTransform>

   <ScaleTransform ScaleX="0.75" ScaleY="0.75"/>

 </TextBlock.RenderTransform>

</TextBlock>

I would advise against starting with a ScaleX and ScaleY at 0 as the effect will be too drastic. You can try it out and see what I mean. 

Just to demonstrate what you could do :

 

So how does that all tie in the datagrid? Well, it's really up to you and your creativity. An easy example would be to use an animation like a scaleTransform in a cell's error style. If some data is invalid, you could then scale it to bring the information to the user's attention. 

If you want to try this out, create a new Style with TargetType xcdg:DataCell (assuming you added Xceed's namespace with xcdg) give it a key like : myCellErrorStyle

In this style you can add something like this (tweak it to what you want) :

 <Setter Property="RenderTransformOrigin"

              Value="0.5,0.5"/>

      

      <Setter Property="RenderTransform">

         <Setter.Value>

            <ScaleTransform ScaleX="1" ScaleY="1"/>

         </Setter.Value>

      </Setter>

        <Style.Triggers>

            <Trigger Property="IsValidationErrorRestrictive"

                     Value="True">

                <Setter Property="Background"

                        Value="Red">

            </Trigger>

            <Trigger Property="IsValidationErrorRestrictive"

                     Value="False">

                <Setter Property="Background"

                        Value="Orange">

<Trigger.EnterActions>

               <BeginStoryboard>

                  <Storyboard AutoReverse="True">

                     <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

                                      To="1.1"

                                      Duration="00:00:00.25"/>

                     <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

                                      To="1.1"

                                      Duration="00:00:00.25"/>                                      

                  </Storyboard>                     

               </BeginStoryboard>

            </Trigger.EnterActions>

            </Trigger>

        </Style.Triggers>

Now, on the datagrid you have a property named CellErrorStyle, you can set it to your myCellErrorStyle and voila!

Questions? Comments? Please feel free to share :).