1 Answer, 1 is accepted
0
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:
Give it a try and let me know if it helps.
Greetings,
Kiril Stanoev
the Telerik team
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: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}"
/>
<!--COVER PAD-->
<
Rectangle
Fill
=
"LightGreen"
Opacity
=
"0.3"
Grid.Column
=
"1"
Margin
=
"25 0 0 0"
/>
<!--COVER PAD-->
<
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
>
</
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