Row Details - Animation

[Ron]

Is there a way to animate the RowDetails section, so that it smoothly slides down when expanding, and smoothly slide up when collapsing?

Thanks,
Ron

[Vanya Pavlova]

Hi Ron,

 
You may predefine the template of DetailsPresenter and create an astonishing animation with a few lines of code.

The following is an example which demonstrates how this can be achieved:

<UserControl.Resources>

        <SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>
        <ControlTemplate x:Key="DetailsPresenterTemplate" TargetType="telerik:DetailsPresenter">
            <Border x:Name="DetailsBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,1">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="DetailsStates">
                        <VisualState x:Name="DetailsVisible">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:02" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DetailsBorder">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="00:00:3" From="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="bd" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DetailsCollapsed"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="bd" Opacity="0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="PART_ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </Border>
        </ControlTemplate>
        <LinearGradientBrush x:Key="GridView_RowDetailsBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC2C2C2"/>
            <GradientStop Color="#FFF0F0F0" Offset="0.3"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlInnerBorder" Color="White"/>
        <Style  TargetType="telerik:DetailsPresenter">
            <Setter Property="Template" Value="{StaticResource DetailsPresenterTemplate}"/>
            <Setter Property="Visibility" Value="Collapsed"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Background" Value="{StaticResource GridView_RowDetailsBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ControlInnerBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <telerik:RadGridView x:Name="gridView" Margin="40,32,32,120" RowDetailsVisibilityMode="VisibleWhenSelected" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>

                        <TextBlock Text="Button"  FontSize="36"/>

                    </DataTemplate>
                </telerik:RadGridView.RowDetailsTemplate>
            </telerik:RadGridView>


    </Grid>

Hope this helps!

All the best,
Vanya Pavlova
the Telerik team

[Ron]

This worked great Vanya. I just had to add a few spaces that were missing in the code (between attributes) and I updated the timing a bit...see below. I highly recommend adding this to the Row Details sample in the demos (QSF).

Thanks,
Ron

<Storyboard>
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:02" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OuterContainer">
        <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Visible"/>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimation Duration="00:00:00.8" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="bd"/>
</Storyboard>

[Remco]

I'm new to animations. With the help of some other examples I changed the controltemplate to animate the y scale as follows:

<ControlTemplate x:Key="DetailsPresenterTemplate" TargetType="telerik:DetailsPresenter">
    <Border x:Name="DetailsBorder" BorderThickness="0,1" BorderBrush="{StaticResource ControlOuterBorder}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="DetailsStates">
                <VisualState x:Name="DetailsVisible">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="bd">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailsBorder" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00.4">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DetailsCollapsed"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="bd" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0">
            <Border.RenderTransform>
                <CompositeTransform ScaleX="1" ScaleY="0"/>
            </Border.RenderTransform>
            <ContentPresenter x:Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
        </Border>
    </Border>
</ControlTemplate>

My question is, is there a way to also animate the reverse, i.e. the transition to the DetailsCollapsed state? I've tried some things but I could not get it to work and I don't really know what I'm doing. Can anybody help please?

Remco