Question

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

分组是基于其中一个单元格的内容完成的，因此当用户更改内容时，该行将移至新组。这是一些显示网格的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似乎没有做任何事情。另请注意，移动行向上工作正常 - 移动行显示在其他行上。我也试过从除TextChanged以外的事件中解除动画（我希望最终我还是需要这样做）但是我没有发现任何看似重要的事情。

感谢。

Answer 1

我想出了一个问题的答案。我需要的提示来自这个Silverlight post。特别是，“如果你想将它们分层排列，那么所有列表项都必须是兄弟姐妹”。我发生的事情是，由于分组，行不是彼此的兄弟姐妹 - 他们不是共同父母的直接孩子。相反，它是 GroupItem 包含作为兄弟姐妹的行。所以我需要在代码中添加 Animate（）方法：

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

其中元素是要移动的 DataGridRow 。

我仍然需要为动画设置更好的触发器，但至少行会沿着路径移动到其他行的前面。

动画移动数据网格

1 个答案: