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

custom expander header

1 Answer 153 Views
Expander
This is a migrated thread and some comments may be shown as answers.
neo e
Top achievements
Rank 1
neo e asked on 17 Nov 2010, 09:08 PM
hi I want to create a custom expander header where it only expand when click on the round button. how easy is it to do that?

thanks

Kevin

1 Answer, 1 is accepted

Sort by
0
Kiril Stanoev
Telerik team
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: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
Tags
Expander
Asked by
neo e
Top achievements
Rank 1
Answers by
Kiril Stanoev
Telerik team
Share this question
or