动画移动数据网格答案

【问题标题】：Animate moving a datagridrow动画移动数据网格
【发布时间】：2017-04-04 23:16:06
【问题描述】：

我在使用动画来显示分组数据网格中的一行从一个组到另一个组的翻译时遇到问题。动画发生了，但该行将在其他行之后移动到新位置。

分组是根据其中一个单元格的内容完成的，因此当用户更改内容时，该行将移至新组。下面是一些显示网格的 XAML：

<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>

为了显示动画，我在 TextChanged 事件处理程序中将其触发。那里的代码在新组中定位 DataGridRow 和一个目标点，并调用一个方法来做动画：

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);
  }
}

这可行，但是向下移动到另一个组的一行显示在其他行的后面；即移动的行在下方并被沿途的其他行隐藏。在 DataGridRow 上设置 ZIndex 似乎没有任何作用。另请注意，移动一行 up 效果很好——移动的行显示在其他行之上。我也尝试过触发除 TextChanged 以外的事件的动画（我希望我最终还是需要这样做），但我没有发现任何似乎重要的事情。

谢谢。

【问题讨论】：

标签： wpf animation wpfdatagrid

【解决方案1】：

我已经为我的问题想出了一个答案。我需要的提示来自此 Silverlight post。特别是，“如果您想将它们分层放置，所有列表项都必须是同级的”。对我来说发生的事情是，由于分组，行不是彼此的兄弟姐妹——他们不是共同父母的直系子女。相反，它是包含作为兄弟的行的 GroupItem。所以我需要在我的 Animate() 方法中添加代码：

    GroupItem groupItem = TryFindParent<GroupItem>(element);
    groupItem.SetValue(Panel.ZIndexProperty, 10);

其中 element 是要移动的 DataGridRow。

我仍然需要为动画想出一个更好的触发器，但至少该行沿路径移动到其他行的前面。

【讨论】：