Анимация WPF DataGrid Строка Подробности - PullRequest
Новая
       25

Анимация WPF DataGrid Строка Подробности

10 голосов
/ 08 апреля 2011

Может ли кто-нибудь помочь мне анимировать детали строки WPF DataGrid, когда она открывается и закрывается (например, слайды открываются как аккордеон, когда строка выбрана, и скользят близко, когда строка не выбрана)? Мне нужно простое доказательство концепции.

Заранее спасибо за помощь:)

1 Ответ

12 голосов
/ 08 апреля 2011

Многословно, но работает: 

<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 очень весело.

...