custom expander header

2 posts, 0 answers
  1. neo e
    neo e avatar
    19 posts
    Member since:
    Jul 2004

    Posted 17 Nov 2010 Link to this post

    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
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 23 Nov 2010 Link to this post

    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
  3. DevCraft banner
Back to Top