Office2013 and Header

[Christie Admin]

Hi,

I would like to know if it's possible to have the header bar of the expander the same color of the header that we have with the popup calendendar of the RadDatePicker?!?

Thank's
Alain

[Milena]

Hi Alian,

It is possible. You just should set the same Brush from Office2013Palette which is used for the Header of the DatePicker. In this case it is the AccentBrush, so you can just set the following:
 

Background="{telerik:Office2013Resource ResourceKey=AccentBrush}"

More about the Office2013 theme and its Palette you can find in our help topic Office2013 Theme. As for the brushes of the controls and their styles and templates you can check them in the Themes.Implicit.sln which is in the Telerik Controls Installation folder. 

So, back to your case - you can edit the control template of the RadExpander and add a Border in the Header with the desired Background:

<ControlTemplate TargetType="telerik:RadExpander">

       <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">

...

<Border Background="{telerik:Office2013Resource ResourceKey=AccentBrush}" Grid.ColumnSpan="2"/>
<telerik:RadToggleButton x:Name="HeaderButton"... />

...

</ControlTemplate>

For your convenience I implemented this approach in the attached project. You can take a look at it and let us know if it works for you. Please have in mind that the Background of the ToggleButton in Pressed state will be the same as the Header Background of the Expander, so maybe you should consider some changes.

I hope this information will help you and don't hesitate to write back if you have more questions.

Regards,
Milena
Telerik

 

 

[Christie Admin]

Hi Milena,

wow thank's :)

Two more things...

1. What if the ResourceKey to change the text color in the header
2. I would like to add a border of the same color of the header for the expandable part of the the RadExpander

Thank's
Alain

[Milena]

Hi Alain,

I'm not sure that I understand your requirements. 

You can use the AccentBrush as a normal Brush - for the Background property for instance. As for the "border of the same color of the header for the expandable part " - could you please send us a picture so that we can see which Header and Border you mean and help you further with the implementation.

Thank you in advance for your cooperation. 

Regards,
Milena
Telerik

 

 

[Christie Admin]

Hi Milena,

thank you for your quick reply :) I already found a solution for my problem.

Alain

[Christie Admin]

Hi Milena,

one last thing, I would like to know if it's possible to change the font color of the header of the RadExpander???

Thank's
Alain

[Milena]

Hi Alain,

You can use the Foreground property of the Expander to change the foreground of the Header. Please have in mind that maybe you should change the value of the Foreground in ExpandedState too.
You can achieve this using the basedon style (the same from my first post)  and change the Foreground when the control is expanded (ControlTemplate => VisualStateManager.VisualStateGroups=>ExpandStateGroup=>VisualState Expanded).

I hope this information is helpful. 

Regards,
Milena
Telerik

 

 

[Christie Admin]

Hi Milena,

if I change the foreground of the header like this: <telerik:RadExpander Style="{StaticResource CustomExpanderStyle}" Foreground="White" />
Change the foreground of the expander content not the foreground of the text in the header...

    <Style x:Key="CustomExpanderStyle" TargetType="telerik:RadExpander" BasedOn="{StaticResource RadExpanderStyle}">        
        <Setter Property="Template">            
            <Setter.Value>                
                <ControlTemplate TargetType="telerik:RadExpander">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStateGroup">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="HeaderPanel" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="HeaderStateGroup">
                                <VisualState x:Name="NormalHeader"/>
                                <VisualState x:Name="MouseOverHeader">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="NormalCircle" Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:Office2013Resource ResourceKey=AccentMainBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:Office2013Resource ResourceKey=EffectAccentLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=InvertedBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PressedHeader">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:Office2013Resource ResourceKey=EffectAccentHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterCircle" Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:Office2013Resource ResourceKey=AccentMainBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=InvertedBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="HeaderOrientationGroup">
                                <VisualState x:Name="HorizontalOrientation">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RotateTransform Angle="0"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="VerticalOrientation">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RotateTransform Angle="90"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ExpandStateGroup">
                                <VisualState x:Name="Expanded">                                    
                                    <Storyboard>
                                        <DoubleAnimation
                                    Storyboard.TargetName="arrow"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                                    To="180"
                                    Duration="0:0:0.2"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=InvertedBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <DoubleAnimation
                                    Storyboard.TargetName="arrow"
                                    Duration="0:0:0.2"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                                    To="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ExpandDirectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <sys:Int32>0</sys:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <sys:Int32>0</sys:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <sys:Int32>0</sys:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <sys:Int32>0</sys:Int32>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <GridLength>Auto</GridLength>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <GridLength>Auto</GridLength>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <GridLength>Auto</GridLength>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <GridLength>Auto</GridLength>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="DirectionLeft">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="90" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DirectionRight">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="-90" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DirectionUp">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DirectionDown">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <GridLength>*</GridLength>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        
                        <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">-->
                        <Border BorderBrush="{telerik:Office2013Resource ResourceKey=AccentBrush}" BorderThickness="1" Background="{TemplateBinding Background}">                            
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="row0" Height="Auto"/>
                                    <RowDefinition x:Name="row1" Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="col0" Width="Auto"/>
                                    <ColumnDefinition x:Name="col1" Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <Border Background="{telerik:Office2013Resource ResourceKey=AccentBrush}" Grid.ColumnSpan="2"/>
                                <telerik:RadToggleButton x:Name="HeaderButton"
                            TabIndex="{TemplateBinding TabIndex}"
                            HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}"
                            Template="{StaticResource ToggleTemplate}"
                            Background="Transparent"
                            IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            ClickMode="{TemplateBinding ClickMode}"
                            FontSize="{TemplateBinding FontSize}"
                            FontStyle="{TemplateBinding FontStyle}"
                            FontWeight="{TemplateBinding FontWeight}"
                            FontFamily="{TemplateBinding FontFamily}"
                            FontStretch="{TemplateBinding FontStretch}"
                            Foreground="{TemplateBinding Foreground}">
                                    <telerik:RadToggleButton.FocusVisualStyle>
                                        <Style>
                                            <Setter Property="Control.Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border>
                                                            <Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </telerik:RadToggleButton.FocusVisualStyle>
                                    <Grid x:Name="HeaderPanel" Background="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid>
                                            <Ellipse x:Name="NormalCircle"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Width="22"
                                        Height="22"
                                        Fill="{telerik:Office2013Resource ResourceKey=BasicBrush}"
                                        Stroke="{telerik:Office2013Resource ResourceKey=HighDarkBrush}"
                                        StrokeThickness="1"/>
                                            <Ellipse x:Name="OuterCircle" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{x:Null}" Fill="{x:Null}" Width="22" Height="22" StrokeThickness="1"/>
                                            <Grid RenderTransformOrigin="0.5 0.5" x:Name="arrowPanel">
                                                <Grid.RenderTransform>
                                                    <RotateTransform/>
                                                </Grid.RenderTransform>
                                                <Path x:Name="arrow"
                                            Stretch="None"
                                            RenderTransformOrigin="0.5,0.5"
                                            Width="8"
                                            Height="4"
                                            Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z"
                                            Fill="{telerik:Office2013Resource ResourceKey=StrongBrush}">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <RotateTransform Angle="0"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                        <telerikPrimitives:LayoutTransformControl RenderTransformOrigin=".5 .5" x:Name="HeaderContentTransform">
                                            <ContentPresenter x:Name="HeaderContent"
                                        Grid.Column="1"
                                        Margin="5 0"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Stretch"
                                        UseLayoutRounding="True"                                                             
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                                        </telerikPrimitives:LayoutTransformControl>
                                    </Grid>
                                </telerik:RadToggleButton>
                                <ContentPresenter x:Name="Content"
                            Margin="{TemplateBinding Padding}"
                            Visibility="Collapsed"
                            UseLayoutRounding="True"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



Thank's
Alain

[Milena]

Hi Alian,

If you set the Foreground property of the Expander this will affect its content too. So, if you need to change the color only of the Header, you can set it to the ContentPresenter in the Header: 

 <Style x:Key="CustomExpanderStyle" TargetType="telerik:RadExpander" BasedOn="{StaticResource RadExpanderStyle}">
   <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="telerik:RadExpander">
...
<telerikPrimitives:LayoutTransformControl RenderTransformOrigin=".5 .5" x:Name="HeaderContentTransform">
<ContentPresenter x:Name="HeaderContent"
Grid.Column="1"
Margin="5 0"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
UseLayoutRounding="True"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
TextBlock.Foreground="White"/>
</telerikPrimitives:LayoutTransformControl>
...
</Style>

I hope this information will help you customize the Expander according to your requirements.

Regards,
Milena
Telerik