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!