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

[Solved] custom expander header

1 Answer 212 Views

Expander

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

This question is locked. New answers and comments are not allowed.

1 Answer, 1 is accepted

answered on 23 Nov 2010, 09:47 AM

Hello neo e,

You can edit the style of RadExpander and put an invisible rectangle right on top of the text, leaving just the button exposed:

<UserControl x:Class="SilverlightApplication1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

<UserControl.Resources>

<SolidColorBrush x:Key="Expander_Background" Color="#00FFFFFF" />

<SolidColorBrush x:Key="Expander_BorderBrush" Color="#00FFFFFF" />

<Thickness x:Key="Expander_BorderThickness">0</Thickness>

<SolidColorBrush x:Key="BorderInnerBrush" Color="#FF979994" />

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

<CornerRadius x:Key="Expander_BorderRadius">3</CornerRadius>

<CornerRadius x:Key="Expander_HeaderBorderRadiusDown">2 2 0 0</CornerRadius>

<CornerRadius x:Key="Expander_HeaderBorderRadiusUp">0 0 2 2</CornerRadius>

<CornerRadius x:Key="Expander_HeaderBorderRadiusLeft">0 2 2 0</CornerRadius>

<CornerRadius x:Key="Expander_HeaderBorderRadiusRight">2 0 0 2</CornerRadius>

<ControlTemplate x:Key="ExpanderTemplate" TargetType="telerik:RadExpander">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStateGroup">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<VisualState x:Name="DirectionDown">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Row)"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="CornerRadius"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource Expander_HeaderBorderRadiusDown}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionUp">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Row)"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0" Value="2" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="CornerRadius"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource Expander_HeaderBorderRadiusUp}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Column)"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0" Value="2" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="CornerRadius"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource Expander_HeaderBorderRadiusLeft}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Column)"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="CornerRadius"

Storyboard.TargetName="HeaderButton">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource Expander_HeaderBorderRadiusRight}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{StaticResource Expander_BorderRadius}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Border BorderBrush="{StaticResource BorderInnerBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}" Grid.ColumnSpan="9"

CornerRadius="2" Grid.RowSpan="9" UseLayoutRounding="true" />

<telerik:RadExpanderHeader x:Name="HeaderButton"

ClickMode="{TemplateBinding ClickMode}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Content="{TemplateBinding Header}" Grid.Column="1"

DecoratorTemplate="{TemplateBinding DecoratorTemplate}"

ExpandDirection="{TemplateBinding ExpandDirection}"

FontWeight="{TemplateBinding FontWeight}"

FontStyle="{TemplateBinding FontStyle}"

FontStretch="{TemplateBinding FontStretch}"

FontSize="{TemplateBinding FontSize}"

FontFamily="{TemplateBinding FontFamily}" IsTabStop="True"

IsExpanded="{TemplateBinding IsExpanded}" Margin="1" Grid.Row="1"

Template="{TemplateBinding HeaderControlTemplate}" />

<Rectangle Fill="LightGreen" Opacity="0.3" Grid.Column="1" Margin="25 0 0 0" />

<Rectangle

x:Name="Fix_BlendNotToCrashOnBindingViaRelativeSourceAndConverter"

DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"

Visibility="{Binding IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}, Mode=TwoWay}" />

<ContentPresenter x:Name="Content"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}" Grid.Column="1"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}" Grid.Row="1"

Visibility="{Binding Visibility, ElementName=Fix_BlendNotToCrashOnBindingViaRelativeSourceAndConverter, Mode=TwoWay}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

<LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFFFF" Offset="0" />

<GradientStop Color="#FFDCDCDC" Offset="0.50" />

<GradientStop Color="#FFADADAD" Offset="0.50" />

<GradientStop Color="#FFD4D4D4" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlOuterBorder_Normal" Color="#FF848484" />

<SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF" />

<SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" />

<SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />

<SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" />

<SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />

<SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />

<SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" />

<SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF" />

<LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFBDA" Offset="0" />

<GradientStop Color="#FFFEEBAE" Offset="0.50" />

<GradientStop Color="#FFFFD25A" Offset="0.50" />

<GradientStop Color="#FFFFFBA3" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000" />

<LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF282828" />

<GradientStop Color="#FF5F5F5F" Offset="1" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="ControlInnerBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFB69A78" />

<GradientStop Color="#FFFFE17A" Offset="0.126" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFDCAB" Offset="0" />

<GradientStop Color="#FFFFD18F" Offset="0.5" />

<GradientStop Color="#FFFE9227" Offset="0.5" />

<GradientStop Color="#FFFFBA74" Offset="0" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF000000" />

<ControlTemplate x:Key="ExpanderDecoratorTemplate" TargetType="telerik:RadExpanderDecorator">

<Grid x:Name="root" Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="InnerCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="arrow">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource ControlElement_Disabled}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Highlighted">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="InnerCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="arrow">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource ControlElement_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="InnerCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="OuterCircle">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Fill"

Storyboard.TargetName="arrow">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource ControlElement_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsExpandedStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" To="Collapsed" />

<VisualTransition GeneratedDuration="0:0:0.2" To="Expanded" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Collapsed" />

<VisualState x:Name="Expanded">

<Storyboard>

<DoubleAnimation To="180" Storyboard.TargetProperty="Angle"

Storyboard.TargetName="expandRotation" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" To="DirectionUp" />

<VisualTransition GeneratedDuration="0:0:0.2" To="DirectionDown" />

<VisualTransition GeneratedDuration="0:0:0.2" To="DirectionLeft" />

<VisualTransition GeneratedDuration="0:0:0.2" To="DirectionRight" />

</VisualStateGroup.Transitions>

<VisualState x:Name="DirectionDown" />

<VisualState x:Name="DirectionUp">

<Storyboard>

<DoubleAnimation To="180" Storyboard.TargetProperty="Angle"

Storyboard.TargetName="directionRotation" />

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionLeft">

<Storyboard>

<DoubleAnimation To="90" Storyboard.TargetProperty="Angle"

Storyboard.TargetName="directionRotation" />

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionRight">

<Storyboard>

<DoubleAnimation To="-90" Storyboard.TargetProperty="Angle"

Storyboard.TargetName="directionRotation" />

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Ellipse x:Name="OuterCircle" Fill="{StaticResource ControlBackground_Normal}"

HorizontalAlignment="Center" Height="20"

Stroke="{StaticResource ControlOuterBorder_Normal}"

VerticalAlignment="Center" Width="20" />

<Ellipse x:Name="InnerCircle" HorizontalAlignment="Center" Height="18"

Stroke="{StaticResource ControlInnerBorder_Normal}"

VerticalAlignment="Center" Width="18" />

<Grid x:Name="arrowHolder" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center">

<Grid.RenderTransform>

<RotateTransform x:Name="expandRotation" Angle="0" />

</Grid.RenderTransform>

<Path x:Name="arrow" Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z"

Fill="{StaticResource ControlElement_Normal}" Height="4"

RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">

<Path.RenderTransform>

<RotateTransform x:Name="directionRotation" Angle="0" />

</Path.RenderTransform>

</Path>

</Grid>

</ControlTemplate>

<SolidColorBrush x:Key="FocusBrush" Color="#ffbd69" />

<ControlTemplate x:Key="ExpanderHeaderTemplate" TargetType="telerik:RadExpanderHeader">

<Grid Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="FocusStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2" To="Focused" />

<VisualTransition GeneratedDuration="0:0:0.2" To="Unfocused" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimation To="1" Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="FocusDecorator" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

<VisualState x:Name="Pressed" />

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="0.5"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="content" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsExpandedStates">

<VisualState x:Name="Collapsed" />

<VisualState x:Name="Expanded" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandDirectionStates">

<VisualState x:Name="DirectionDown">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Column)"

Storyboard.TargetName="decorator">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"

Storyboard.TargetName="content">

<DiscreteObjectKeyFrame KeyTime="0" Value="4,2,2,2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionUp">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Column)"

Storyboard.TargetName="decorator">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"

Storyboard.TargetName="content">

<DiscreteObjectKeyFrame KeyTime="0" Value="4,2,2,2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Row)"

Storyboard.TargetName="decorator">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"

Storyboard.TargetName="content">

<DiscreteObjectKeyFrame KeyTime="0" Value="2,4,2,2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DirectionRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="(Grid.Row)"

Storyboard.TargetName="decorator">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"

Storyboard.TargetName="content">

<DiscreteObjectKeyFrame KeyTime="0" Value="2,4,2,2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}"

CornerRadius="{TemplateBinding CornerRadius}"

Padding="{TemplateBinding Padding}">

<Grid Background="Transparent" UseLayoutRounding="False">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<telerik:RadExpanderDecorator x:Name="decorator" Grid.Column="1"

ExpandDirection="{TemplateBinding ExpandDirection}"

IsPressed="{TemplateBinding IsPressed}"

IsHighlighted="{TemplateBinding IsMouseOver}"

IsExpanded="{TemplateBinding IsExpanded}" Margin="0" Grid.Row="1"

Template="{TemplateBinding DecoratorTemplate}" />

<ContentPresenter x:Name="content"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}" Grid.Column="1"

HorizontalAlignment="Stretch" Margin="2" Grid.Row="1"

VerticalAlignment="Stretch" />

</Grid>

</Border>

<Rectangle x:Name="FocusDecorator" IsHitTestVisible="false" Opacity="0"

Stroke="{StaticResource FocusBrush}" StrokeThickness="1"

StrokeDashArray="1 2" />

</Grid>

</ControlTemplate>

<Style x:Key="RadExpanderStyle1" TargetType="telerik:RadExpander">

<Setter Property="IsTabStop" Value="false" />

<Setter Property="IsExpanded" Value="false" />

<Setter Property="ExpandDirection" Value="Down" />

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

<Setter Property="VerticalContentAlignment" Value="Stretch" />

<Setter Property="Background" Value="{StaticResource Expander_Background}" />

<Setter Property="BorderBrush" Value="{StaticResource Expander_BorderBrush}" />

<Setter Property="BorderThickness" Value="{StaticResource Expander_BorderThickness}" />

<Setter Property="Padding" Value="2" />

<Setter Property="Template" Value="{StaticResource ExpanderTemplate}" />

<Setter Property="DecoratorTemplate" Value="{StaticResource ExpanderDecoratorTemplate}" />

<Setter Property="HeaderControlTemplate" Value="{StaticResource ExpanderHeaderTemplate}" />

<Setter Property="telerik:AnimationManager.AnimationSelector">

<Setter.Value>

<telerik:AnimationSelector>

<telerik:ExpanderExpandCollapseAnimation AnimationName="Expand"

Direction="In" TargetElementName="Content" />

<telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse"

Direction="Out" TargetElementName="Content" />

</telerik:AnimationSelector>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadExpander Header="Expander" Width="200" Height="200"

Style="{StaticResource RadExpanderStyle1}">

<StackPanel>

<Button Content="Item 0" />

<Button Content="Item 1" />

<Button Content="Item 2" />

</StackPanel>

</telerik:RadExpander>

</Grid>

</UserControl>

Give it a try and let me know if it helps.

Greetings,
Kiril Stanoev
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight