wpf - 动画 WPF DataGrid 行详细信息

Question

Can anyone help me animating the WPF DataGrid row details when it's opened and closed (eg slides open like an accordion when the row selected and slides close when the row is not selected)? 我需要一个简单的概念证明。

在此先感谢您的帮助 ：）

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非常有趣。