动画WPF DataGrid行详细信息

Question

任何人都可以帮助我动画WPF DataGrid行的详细信息，当它打开和关闭（例如，幻灯片打开时像一个手风琴，当行选择和幻灯片关闭时，行未被选中）？我需要一个简单的概念证明。

在此先感谢您的帮助:)

Answer 1

冗长，但工作原理：

<DataGrid.RowStyle> 
    <Style TargetType="{x:Type DataGridRow}"> 
     <Setter Property="DetailsVisibility" Value="Collapsed"/> 
     <Style.Triggers> 
      <Trigger Property="IsSelected" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="DetailsVisibility"> 
           <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="DetailsVisibility"> 
           <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Collapsed}"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </Trigger.ExitActions> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</DataGrid.RowStyle> 
<DataGrid.RowDetailsTemplate> 
    <DataTemplate> 
     <Grid> 
      <Grid.LayoutTransform> 
       <ScaleTransform ScaleY="0"/> 
      </Grid.LayoutTransform> 
      <Grid.Style> 
       <Style TargetType="Grid"> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}" 
            Value="True"> 
          <DataTrigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform.ScaleY"> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <CubicEase EasingMode="EaseInOut" /> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </BeginStoryboard> 
          </DataTrigger.EnterActions> 
          <DataTrigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform.ScaleY"> 
              <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"> 
               <EasingDoubleKeyFrame.EasingFunction> 
                <CubicEase EasingMode="EaseInOut" /> 
               </EasingDoubleKeyFrame.EasingFunction> 
              </EasingDoubleKeyFrame> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </BeginStoryboard> 
          </DataTrigger.ExitActions> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </Grid.Style> 
      <Grid.Children> 
       <TextBlock Text="Lorem ipsum dolor sit"/> 
      </Grid.Children> 
     </Grid> 
    </DataTemplate> 
</DataGrid.RowDetailsTemplate> 

编辑：通过照顾DetailsVisibility在RowStyle返回动画现在工作太多手动。

请注意，一旦细节被折叠，DataGrid的高度不会缩小，这可能有点问题。这是VirtualizingStackPanel的一个已知问题，如果你能负担得起，你可以将DataGrid.ItemsPanel更改为正常的StackPanel（如果你有很多数据，这将大大减慢应用程序，因为每一行都将立即创建，即使不是可见）。

另外：按Ctrl + A非常有趣。