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

问题描述

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

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>

编辑：通过照顾 DetailsVisibility 在 RowStyle 中手动返回动画现在也可以工作。

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