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!