2017-03-09 91 views
0

我有一個問題,使用動畫來顯示從一個組到另一個分組數據網格中的行的翻譯。動畫發生,但該行在後面移動,並將其他行移動到新位置。動畫移動一個datagridrow

分組是根據其中一個單元格的內容完成的,因此當用戶更改內容時,該行將移至新組。下面是一些顯示網格的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以外的其他事件中解放出來(我希望我最終還是需要這樣做),但是我沒有發現任何似乎很重要的事情。

感謝。

回答

0

我已經想出了我的問題的答案。我需要的提示來自Silverlight post。特別是,如果你想將它們放在圖層中,「所有列表項必須是兄弟姐妹」。發生在我身上的是由於分組,行不是彼此的兄弟姐妹 - 他們不是共同父母的直接子女。相反,它是包含作爲同胞的行的GroupItem。所以,我需要添加到我的動畫()方法的代碼:

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

其中元素DataGridRow移動。

我仍然需要爲動畫提供更好的觸發器,但是至少該行正沿着路徑移動到其他行的前面。