This is a migrated thread and some comments may be shown as answers.

Row Details - Animation

3 Answers 115 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 28 Jul 2011, 01:51 PM
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

3 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 28 Jul 2011, 02:47 PM
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!

0
Ron
Top achievements
Rank 1
answered on 28 Jul 2011, 03:51 PM
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>
0
Remco
Top achievements
Rank 1
answered on 21 Feb 2012, 01:36 PM
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

Tags
GridView
Asked by
Ron
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Ron
Top achievements
Rank 1
Remco
Top achievements
Rank 1
Share this question
or