2011 RAD Expander HeaderControlTemplate

[Rajinder]

Hi,
We recently upgraded to the latest version on 2011 RAD Controls for Silverlight.

Code:
<telerik:RadExpander Name="Expander" Style="{StaticResource DefaultRadExpanderStyleNew}"
In the Dictionary.xaml file, we have 

<Style x:Key="DefaultRadExpanderStyleNew" TargetType="telerik:RadExpander">
        <Setter Property="ExpandDirection" Value="Down"/>
        <Setter Property="IsExpanded" Value="True"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="HeaderControlTemplate" Value="{StaticResource DefaultradExpanderHeaderControlTemplate}"/>
    </Style>

<ControlTemplate  x:Key="DefaultradExpanderHeaderControlTemplate" TargetType="telerik:RadExpanderHeader">
        <Grid >
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#D8D8D9" Offset="0" />
                    <GradientStop Color="#F4F5F5" Offset="1" />
                </LinearGradientBrush>
            </Grid.Background>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Expanded"/>
                    <VisualState x:Name="Collapsed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                               Storyboard.TargetName="expandedImage">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>


                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                               Storyboard.TargetName="collapsedImage">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <TextBlock Height="15" Margin="8,0,0,0" FontSize="11" FontFamily="Verdana"  FontWeight="Bold" Foreground="#444444" Text="{TemplateBinding Content}" />
            <Image x:Name="expandedImage" HorizontalAlignment="Right" Margin="0,0,5,0" Source="/Common;component/Images/DOWN.png" Stretch="Fill" Height="10" Width="10"/>
            <Image x:Name="collapsedImage" HorizontalAlignment="Right" Margin="0,0,5,0" Source="/Common;component/Images/UP.png" Height="10" Width="10" Stretch="Fill" Visibility="Collapsed" />

        </Grid>
    </ControlTemplate>



This does not seem to work. I read that the HeaderControl is obsolete but I'm not able to find the correct implementation.

Could you please help?

Thanks
Rajinder

[Pavel R. Pavlov]

Hello Rajinder,
 
I took a look at the snippet you sent to me and I noticed that it is outdated. The template of the control was changed. Here you can find how it is structured now. Also, you can find more information about the control in our help documentation.

In order to achieve the customization described in the code snippet, you will have to change the default template. For your convenience I extracted the default template in the attached project and changed the expander picture. The changes that I made are as follows:

• Replaced the Path (visualizing the expander arrow) control with an Image control (the name of the image is "YourCustomImage")
• Apply the animation of the Path to the Image

Also, I noticed that you use a TextBlock control to display the content of the Header. So I replaced the default ContentPresenter control with a TextBlock with x:Name="HeaderContent".

On a side note, I just want to let you know that in case you want to change the default style of the RadControls, the best way to do so is by using implicit styles. You can find more information about this approach here. Let me know if you have any other questions.

All the best,
Pavel R. Pavlov
the Telerik team