Animate moving a datagridrow - wpf

Question

I'm having an issue using animation to show the translation of a row in a grouped datagrid from one group to another. The animation happens, but the row moves behind other rows on it's way to the new position.
The grouping is done based on the content of one of the cells, so when a user changes the content, the row moves to the new group. Here's some XAML that shows the grid:
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}"/>
<DataGridTextColumn Header="Email" Binding="{Binding Email}"/>
<DataGridTemplateColumn Header="Country">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Country}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding Country, UpdateSourceTrigger=PropertyChanged}" TextChanged="TextBoxBase_OnTextChanged"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
To show the animation, I'm firing it off in the TextChanged event handler. The code there locates the DataGridRow and a target point in the new group, and calls a method to do the animation:
private void Animate(FrameworkElement element, Point target)
{
if (element != null)
{
Point sourcePoint = element.PointToScreen(new Point(0, 0));
double yOffset = target.Y - sourcePoint.Y;
element.SetValue(Panel.ZIndexProperty, 10); // this doesn't help
TranslateTransform translateTransform = new TranslateTransform();
element.RenderTransform = translateTransform;
Duration duration = new Duration(TimeSpan.FromSeconds(3));
DoubleAnimation anim = new DoubleAnimation(0, yOffset, duration);
translateTransform.BeginAnimation(TranslateTransform.YProperty, anim);
}
}
This works, but a row moving down to another group is shown going behind the other rows; i.e. the moving row is below and hidden by the other rows along the way. Setting ZIndex on the DataGridRow doesn't seem to do anything. Also note that moving a row up works fine -- the moving row is shown over the other rows. I've also tried firing the animation off of events other than TextChanged (which I expect I'll need to do eventually anyway) but I haven't found any that seem to matter.
Thanks.

Answer 1

I've come up with an answer for my question. The hint I needed came from this Silverlight post. In particular, the line "All the list items must be siblings if you want to lay them out in layers." What was going on for me was that because of the grouping, the rows weren't siblings of each other -- they were not direct children of a common parent. Instead, it was the GroupItems containing the rows that were the siblings. So I needed to add to my Animate() method the code:
GroupItem groupItem = TryFindParent<GroupItem>(element);
groupItem.SetValue(Panel.ZIndexProperty, 10);
where element is the DataGridRow to be moved.
I still need to come up with a better trigger for the animation, but at least the row is moving in front of the other rows along the path.