WPF Datagrid Animate RowDetailsTemplate MVVM

Sep 25, 2009 at 6:01 PM


I am using a WPF Toolkit datagrid and I was wondering if it was possible to animate when a row gets clicked (or moused over in my case).  Currently, when a row is selected, the rowdetails becomes visible for the respective row, but I would like to make it so that the row details slides out instead of just being displayed immediately.  Is this possible?



                    <StackPanel Style="{StaticResource desc}" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left">
                        <StackPanel Style="{StaticResource descItem}" Orientation="Horizontal">
                            <TextBlock Text="Home Phone: "></TextBlock>
                            <TextBlock Text="{Binding Path=HomePhone}"></TextBlock>
                        <StackPanel Style="{StaticResource descItem}" Orientation="Horizontal">
                            <TextBlock Text="Work Phone: "></TextBlock>
                            <TextBlock Text="{Binding Path=WorkPhone}"></TextBlock>
                        <StackPanel Style="{StaticResource descItem}" Orientation="Horizontal">
                            <TextBlock Text="Mobile Phone: "></TextBlock>
                            <TextBlock Text="{Binding Path=MobilePhone}"></TextBlock>
                        <StackPanel HorizontalAlignment="Right" Orientation="Vertical">
                            <Image Source="/ATS3.Resources;component/Images/delete2.png" DockPanel.Dock="Right" Height="16" Width="16" />
                            <TextBlock Text="Reject" />
                        <EventTrigger RoutedEvent="UIElement.MouseEnter">


                    <StackPanel Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Home Phone: "></TextBlock>


I am guessing i may have to hook into the DataTemplate.Triggers but I am not sure if that would even work.  Any ideas?



Sep 25, 2009 at 9:37 PM

I believe this can be done from code using a combination of LoadingRow/UnloadingRow/LoadingRowDetails/UnloadingRowDetails on datagrid.  Things do get a bit complicated because of virtualization & container recycling.


Sep 28, 2009 at 6:29 PM
Edited Sep 28, 2009 at 9:34 PM

The LoadingRowDetails event only fires the first time I select a row, if I select a different row then select the previous row again, it does not fire.  The UnloadingRowDetails event never fires for me.  I am able to animate the the RowDetails through the RowDetailsVisibilityChanged event.

I set the RowDetailsVisibilityMode in XAML for my DataGrid:



Then I create a RowDetailsTemplate for my Datagrid in XAML.

        <TextBlock x:Name="tbRowDetail" Text="Further Details..." Height="0"/>

 I then create the animations for the RowDetails and place them in a resource for the DataGrid.


<DoubleAnimationUsingKeyFrames x:Key="RowDetailOpen" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="100"/>

<DoubleAnimationUsingKeyFrames x:Key="RowDetailClose" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>

My code behind looks like this.

Private Sub myDataGrid_RowDetailsVisibilityChanged(ByVal sender As System.Object, ByVal e As Microsoft.Windows.Controls.DataGridRowDetailsEventArgs)
        Dim dgRow = TryCast(e.Row, Microsoft.Windows.Controls.DataGridRow)
        Dim DE = TryCast(e.DetailsElement, TextBlock)
        If DGRow.DetailsVisibility = Windows.Visibility.Visible Then
            DE.BeginAnimation(FrameworkElement.HeightProperty, CType(FindResource("RowDetailOpen"), AnimationTimeline))
            DE.BeginAnimation(FrameworkElement.HeightProperty, CType(FindResource("RowDetailClose"), AnimationTimeline))
        End If
End Sub

Please note that in this scenario you won't see the close animation actually occur since the Visiblity on the RowDetails is being set to "collapsed" before this animation fires, but it does give a nice "slide out" animation when the RowDetails open.

Hope this helps,


Sep 28, 2009 at 11:10 PM

That's great! it worked for me!! 

thanks LT!

If anyone knows a way to make it slide up before the "collapsed" is set, that would be great!!