动画 WPF DataGrid 行详细信息 [英] Animating WPF DataGrid Row Details

问题描述

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

Can anyone help me animating the WPF DataGrid row details when it's opened and closed (e.g. slides open like an accordion when the row selected and slides close when the row is not selected)? I need a simple proof of concept.

预先感谢您的帮助:)

推荐答案

冗长但有效:

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

通过在 RowStyle 中手动处理 DetailsVisibility，现在返回动画也可以工作了.

By taking care of the DetailsVisibility manually in the RowStyle the return animation now works too.

注意，DataGrid 的高度在细节折叠后不会收缩，这可能有点问题.这是 VirtualizingStackPanel 的一个已知问题，如果您负担得起，您可以将 DataGrid.ItemsPanel 更改为普通的 StackPanel(如果您有大量数据，这将大大降低应用程序的速度，因为每一行将立即创建，即使不可见).

Note that the DataGrid's height does not shrink back once the details are collapsed, which might be a bit problematic. This is a known problem of the VirtualizingStackPanel, if you can afford it you could change the DataGrid.ItemsPanel to a normal StackPanel (If you have a lot of data this will greatly slow down the application since every row will be created right away, even if not visible).

另外:按 Ctrl + A 非常有趣.

Also: Pressing Ctrl + A is great fun.

这篇关于动画 WPF DataGrid 行详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！