Row Details - Animation

4 posts, 0 answers
  1. Ron
    Ron avatar
    9 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    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
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 28 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. Ron
    Ron avatar
    9 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    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>
  4. Remco
    Remco avatar
    13 posts
    Member since:
    Jan 2012

    Posted 21 Feb 2012 Link to this post

    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

Back to Top