Expander Header Cursor

[Michael]

Hi,

I'm using the RadExpander as part of the RadControls collection (RadControls for WPF Q3 2011 SP1) and I'm trying to get the cursor to change to the Hand icon whenever the user hovers the mouse over the header part of the Expander control.

I know I can simply use:

<

 

 

telerik:RadExpander IsExpanded="True" Cursor="Hand">

 

...but this shows the Hand icon over all of the control. What I'm after is the icon to change when the mouse is only over the Header part of the control, i.e. the part which the user can click to fire the expand/retract animation. Is this possible?

Thanks!
Mike.

[Miro Miroslavov]

Hello,

 You should change the Default style (Control Template) of the expander and set the hand Cursor directly to the Toggle button part.
Hope this helps you.

All the best,
Miro Miroslavov
the Telerik team

[Michael]

Hi Miro, thanks for that. I thought that editing the template is the way to go but again I'm at a loss to know where to edit (sorry for the basic question).

Below is the template for the Expander, where do I add the Cursor=... statement? Am i able to only include a subset of the template in my theme file rather than the entire XML?

Thanks!

<ControlTemplate
  TargetType="telerik:RadExpander" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid
    HorizontalAlignment="{TemplateBinding FrameworkElement.HorizontalAlignment}"
    VerticalAlignment="{TemplateBinding FrameworkElement.VerticalAlignment}">
    <Border
      BorderThickness="{TemplateBinding Border.BorderThickness}"
      CornerRadius="3,3,3,3"
      BorderBrush="{TemplateBinding Border.BorderBrush}"
      Background="{TemplateBinding Panel.Background}">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition
            Width="Auto"
            Name="col0" />
          <ColumnDefinition
            Width="Auto"
            Name="col1" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition
            Height="Auto"
            Name="row0" />
          <RowDefinition
            Height="Auto"
            Name="row1" />
        </Grid.RowDefinitions>
        <telerik:RadToggleButton
          InnerCornerRadius="0,0,0,0"
          IsChecked="False"
          ClickMode="{TemplateBinding telerik:RadExpander.ClickMode}"
          Background="#00FFFFFF"
          Foreground="{TemplateBinding TextElement.Foreground}"
          FontFamily="{TemplateBinding TextElement.FontFamily}"
          FontSize="{TemplateBinding TextElement.FontSize}"
          FontStretch="{TemplateBinding TextElement.FontStretch}"
          FontStyle="{TemplateBinding TextElement.FontStyle}"
          FontWeight="{TemplateBinding TextElement.FontWeight}"
          HorizontalContentAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
          VerticalContentAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}"
          TabIndex="{TemplateBinding KeyboardNavigation.TabIndex}"
          Name="HeaderButton"
          HorizontalAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
          VerticalAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}">
          <telerik:RadToggleButton.Template>
            <ControlTemplate
              TargetType="telerik:RadToggleButton">
              <Grid>
                <ContentPresenter
                  Content="{TemplateBinding ContentControl.Content}"
                  ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                  Name="Content"
                  Margin="{TemplateBinding Control.Padding}"
                  HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
                <Rectangle
                  Stroke="#D82A2A2A"
                  StrokeThickness="1"
                  StrokeDashArray="1 2"
                  Name="FocusDecorator"
                  Visibility="Collapsed"
                  IsHitTestVisible="False" />
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger
                  Property="UIElement.IsFocused">
                  <Setter
                    Property="UIElement.Visibility"
                    TargetName="FocusDecorator">
                    <Setter.Value>
                      <x:Static
                        Member="Visibility.Visible" />
                    </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                    <s:Boolean>True</s:Boolean>
                  </Trigger.Value>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </telerik:RadToggleButton.Template>
          <Grid
            Background="#00FFFFFF"
            Name="HeaderPanel">
            <Grid.ColumnDefinitions>
              <ColumnDefinition
                Width="Auto" />
              <ColumnDefinition
                Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition
                Height="Auto" />
              <RowDefinition
                Height="*" />
            </Grid.RowDefinitions>
            <Grid
              Grid.Column="0"
              Grid.Row="0">
              <Ellipse
                Fill="#00FFFFFF"
                Stroke="#CC636363"
                Name="OuterCircle"
                Width="20"
                Height="20"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
              <Ellipse
                Stroke="#CCFFFFFF"
                Name="InnerCircle"
                Width="18"
                Height="18"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
              <Grid
                Name="arrowPanel"
                RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                  <RotateTransform />
                </Grid.RenderTransform>
                <Path
                  Data="M0,0L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75z"
                  Stretch="None"
                  Fill="#FF000000"
                  Name="arrow"
                  Width="8"
                  Height="4"
                  RenderTransformOrigin="0.5,0.5">
                  <Path.RenderTransform>
                    <RotateTransform
                      Angle="0" />
                  </Path.RenderTransform>
                </Path>
              </Grid>
            </Grid>
            <telerik:LayoutTransformControl
              IsTabStop="False"
              Name="HeaderContentTransform"
              RenderTransformOrigin="0.5,0.5"
              Grid.Column="0"
              Grid.Row="0">
              <ContentPresenter
                Content="{TemplateBinding HeaderedContentControl.Header}"
                ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
                Name="HeaderContent"
                Margin="5,0,5,0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Grid.Column="1" />
            </telerik:LayoutTransformControl>
          </Grid>
        </telerik:RadToggleButton>
        <ContentPresenter
          Content="{TemplateBinding ContentControl.Content}"
          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
          Name="Content"
          Margin="{TemplateBinding Control.Padding}"
          HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
          VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
          Visibility="Collapsed" />
      </Grid>
    </Border>
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger
      Property="UIElement.IsEnabled">
      <Setter
        Property="Shape.Stroke"
        TargetName="OuterCircle">
        <Setter.Value>
          <SolidColorBrush>#7F000000</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Stroke"
        TargetName="InnerCircle">
        <Setter.Value>
          <SolidColorBrush>#26FFFFFF</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="OuterCircle">
        <Setter.Value>
          <SolidColorBrush>#33929292</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="arrow">
        <Setter.Value>
          <SolidColorBrush>#FF8D8D8D</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="UIElement.Opacity"
        TargetName="Content">
        <Setter.Value>
          <s:Double>0.5</s:Double>
        </Setter.Value>
      </Setter>
      <Setter
        Property="UIElement.Opacity"
        TargetName="HeaderContent">
        <Setter.Value>
          <s:Double>0.5</s:Double>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>False</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.IsMouseOverHeader">
      <Setter
        Property="Shape.Stroke"
        TargetName="OuterCircle">
        <Setter.Value>
          <SolidColorBrush>#CC727272</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Stroke"
        TargetName="InnerCircle">
        <Setter.Value>
          <SolidColorBrush>#FFFFFFFF</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="OuterCircle">
        <Setter.Value>
          <LinearGradientBrush
            StartPoint="0.5,0"
            EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop
                Color="#E5FFFFFF"
                Offset="0" />
              <GradientStop
                Color="#B2EEEEEE"
                Offset="0.5" />
              <GradientStop
                Color="#B2EEEEEE"
                Offset="0.5" />
              <GradientStop
                Color="#66BBBBBB"
                Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="arrow">
        <Setter.Value>
          <SolidColorBrush>#FF000000</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.IsHeaderPressed">
      <Setter
        Property="Shape.Stroke"
        TargetName="OuterCircle">
        <Setter.Value>
          <LinearGradientBrush
            StartPoint="0.5,0"
            EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop
                Color="#B2000000"
                Offset="0" />
              <GradientStop
                Color="#7F000000"
                Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Stroke"
        TargetName="InnerCircle">
        <Setter.Value>
          <LinearGradientBrush
            StartPoint="0.5,0"
            EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop
                Color="#66000000" />
              <GradientStop
                Color="#B2FFFFFF"
                Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="OuterCircle">
        <Setter.Value>
          <LinearGradientBrush
            StartPoint="0.5,0"
            EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop
                Color="#CC323232" />
              <GradientStop
                Color="#7FFFFFFF"
                Offset="0.5" />
              <GradientStop
                Color="#7FFFFFFF"
                Offset="0.5" />
              <GradientStop
                Color="#66828282"
                Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Shape.Fill"
        TargetName="arrow">
        <Setter.Value>
          <SolidColorBrush>#FF000000</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ExpandDirection">
      <Trigger.EnterActions>
        <BeginStoryboard
          Name="ExpandDirection_Left_BSB">
          <Storyboard>
            <Storyboard.Children>
              <DoubleAnimation
                To="90"
                Duration="00:00:00"
                Storyboard.TargetName="arrowPanel"
                Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
            </Storyboard.Children>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <RemoveStoryboard
          BeginStoryboardName="ExpandDirection_Left_BSB" />
      </Trigger.ExitActions>
      <Setter
        Property="ColumnDefinition.Width"
        TargetName="col0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="RowDefinition.Height"
        TargetName="row0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Grid.Column"
        TargetName="HeaderButton">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="telerik:ExpandDirection.Left" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ExpandDirection">
      <Trigger.EnterActions>
        <BeginStoryboard
          Name="ExpandDirection_Right_BSB">
          <Storyboard>
            <Storyboard.Children>
              <DoubleAnimation
                To="-90"
                Duration="00:00:00"
                Storyboard.TargetName="arrowPanel"
                Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
            </Storyboard.Children>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <RemoveStoryboard
          BeginStoryboardName="ExpandDirection_Right_BSB" />
      </Trigger.ExitActions>
      <Setter
        Property="ColumnDefinition.Width"
        TargetName="col1">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="RowDefinition.Height"
        TargetName="row0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Grid.Column"
        TargetName="Content">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="telerik:ExpandDirection.Right" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ExpandDirection">
      <Trigger.EnterActions>
        <BeginStoryboard
          Name="ExpandDirection_Up_BSB">
          <Storyboard>
            <Storyboard.Children>
              <DoubleAnimation
                To="180"
                Duration="00:00:00"
                Storyboard.TargetName="arrowPanel"
                Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
            </Storyboard.Children>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <RemoveStoryboard
          BeginStoryboardName="ExpandDirection_Up_BSB" />
      </Trigger.ExitActions>
      <Setter
        Property="ColumnDefinition.Width"
        TargetName="col0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="RowDefinition.Height"
        TargetName="row0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Grid.Row"
        TargetName="HeaderButton">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="telerik:ExpandDirection.Up" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ExpandDirection">
      <Setter
        Property="ColumnDefinition.Width"
        TargetName="col0">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="RowDefinition.Height"
        TargetName="row1">
        <Setter.Value>
          <GridLength>*</GridLength>
        </Setter.Value>
      </Setter>
      <Setter
        Property="Grid.Row"
        TargetName="Content">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="telerik:ExpandDirection.Down" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ResultOrientation">
      <Setter
        Property="telerik:LayoutTransformControl.LayoutTransform"
        TargetName="HeaderContentTransform">
        <Setter.Value>
          <RotateTransform
            Angle="90" />
        </Setter.Value>
      </Setter>
      <Setter
        Property="Grid.Row"
        TargetName="HeaderContentTransform">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="Orientation.Vertical" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.ResultOrientation">
      <Setter
        Property="Grid.Column"
        TargetName="HeaderContentTransform">
        <Setter.Value>
          <s:Int32>1</s:Int32>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <x:Static
          Member="Orientation.Horizontal" />
      </Trigger.Value>
    </Trigger>
    <Trigger
      Property="telerik:RadExpander.IsExpanded">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <Storyboard.Children>
              <DoubleAnimation
                To="180"
                Duration="00:00:00.2000000"
                Storyboard.TargetName="arrow"
                Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
            </Storyboard.Children>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <Storyboard.Children>
              <DoubleAnimation
                To="0"
                Duration="00:00:00.2000000"
                Storyboard.TargetName="arrow"
                Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
            </Storyboard.Children>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

[Tina Stancheva]

Hi Michael,

You'll need to keep the entire ControlTemplate of the RadExpander in your solution when editing parts of it. Also, in the ControlTemplate code sample you sent, you need to set the Cursor property to the RadToggleButton element of the template:

<telerik:RadToggleButton
          Cursor="Hand"
          InnerCornerRadius="0,0,0,0"
          IsChecked="False"
          ClickMode="{TemplateBinding telerik:RadExpander.ClickMode}"
          Background="#00FFFFFF"
          Foreground="{TemplateBinding TextElement.Foreground}"
          FontFamily="{TemplateBinding TextElement.FontFamily}"
          FontSize="{TemplateBinding TextElement.FontSize}"
          FontStretch="{TemplateBinding TextElement.FontStretch}"
          FontStyle="{TemplateBinding TextElement.FontStyle}"
          FontWeight="{TemplateBinding TextElement.FontWeight}"
          HorizontalContentAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
          VerticalContentAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}"
          TabIndex="{TemplateBinding KeyboardNavigation.TabIndex}"
          Name="HeaderButton"
          HorizontalAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
          VerticalAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}">
...
</telerik:RadToggleButton>

Give this a try and let us know if it works for you.

All the best,
Tina Stancheva
the Telerik team

[Michael]

Hi Tina, thanks for that - much appreciated.

I can now see the cursor change as required however the Expander now longer seems to... expand! When I click the header/toggle buttton the controls within the expander are not shown, I'm not sure if it's a case of the expander control not triggering corectly or the controls within the expander are simply not being shown. Perhapos my doc template is wrong??

Any ideas?

My XAML is as follows :

<StackPanel VerticalAlignment="Top">
    <telerik:RadExpander Style="{StaticResource RDHExpander}" FlowDirection="RightToLeft" ExpandDirection="Down">
        <telerik:RadExpander.Header>
            <TextBlock Text="Admin" VerticalAlignment="Center" Foreground="Black" FontWeight="Bold"/>
        </telerik:RadExpander.Header>
        <telerik:RadExpander.Content>
            <StackPanel VerticalAlignment="Top">
                <local:RDHButton Content="Users" HorizontalAlignment="Stretch"  VerticalAlignment="Top" Margin="0,0,0,5" Command="{Binding UsersButtonCommand}" Template="{DynamicResource RDHGlassButton}" Width="160" IsSelected="{Binding Path=UsersButtonIsSelected, Mode=OneWay}" IsEnabled="{Binding Path=UsersButtonIsEnabled, Mode=OneWay}" Visibility="{Binding UsersButtonIsVisible, Mode=OneWay, Converter={StaticResource BoolToVisConvertor}}" />
            </StackPanel>
        </telerik:RadExpander.Content>
    </telerik:RadExpander>
</StackPanel>

...and my resource contains :

  <Style x:Key="RDHExpander" TargetType="{x:Type telerik:RadExpander}">
      <Setter Property="Margin" Value="4,1,4,3" />
      <Setter Property="IsExpanded" Value="False" />
      <Setter Property="VerticalContentAlignment" Value="Top" />
      <Setter Property="telerik:AnimationManager.IsAnimationEnabled" Value="True" />
      <Setter Property="FontFamily" Value="FS Albert" />
      <Setter Property="FontSize" Value="10" />
      <Setter Property="Foreground" Value="#FF839BB3" />
      <Setter Property="Background" Value="White" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="#FF839BB3" />
      <Setter Property="telerikControls:StyleManager.Theme" Value="Transparent" />
      <Setter Property="telerik:AnimationManager.AnimationSelector">
          <Setter.Value>
              <telerik:AnimationSelector>
                  <telerik:ExpanderExpandCollapseAnimation
                      AnimationName="Expand"
                      Direction="In"
                      TargetElementName="Content"
                      SpeedRatio="2.0" />
                  <telerik:ExpanderExpandCollapseAnimation
                      AnimationName="Collapse"
                      Direction="Out"
                      TargetElementName="Content"
                      SpeedRatio="2.0" />
              </telerik:AnimationSelector>
          </Setter.Value>
      </Setter>

      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate
TargetType="telerik:RadExpander" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
          <Grid
  HorizontalAlignment="{TemplateBinding FrameworkElement.HorizontalAlignment}"
  VerticalAlignment="{TemplateBinding FrameworkElement.VerticalAlignment}">
              <Border
    BorderThickness="{TemplateBinding Border.BorderThickness}"
    CornerRadius="3,3,3,3"
    BorderBrush="{TemplateBinding Border.BorderBrush}"
    Background="{TemplateBinding Panel.Background}">
                  <Grid>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition
          Width="Auto"
          Name="col0" />
                          <ColumnDefinition
          Width="Auto"
          Name="col1" />
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                          <RowDefinition
          Height="Auto"
          Name="row0" />
                          <RowDefinition
          Height="Auto"
          Name="row1" />
                      </Grid.RowDefinitions>
                      <telerik:RadToggleButton
                      Cursor="Hand"
        InnerCornerRadius="0,0,0,0"
        IsChecked="False"
        ClickMode="{TemplateBinding telerik:RadExpander.ClickMode}"
        Background="#00FFFFFF"
        Foreground="{TemplateBinding TextElement.Foreground}"
        FontFamily="{TemplateBinding TextElement.FontFamily}"
        FontSize="{TemplateBinding TextElement.FontSize}"
        FontStretch="{TemplateBinding TextElement.FontStretch}"
        FontStyle="{TemplateBinding TextElement.FontStyle}"
        FontWeight="{TemplateBinding TextElement.FontWeight}"
        HorizontalContentAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
        VerticalContentAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}"
        TabIndex="{TemplateBinding KeyboardNavigation.TabIndex}"
        Name="HeaderButton"
        HorizontalAlignment="{TemplateBinding telerik:RadExpander.HorizontalHeaderAlignment}"
        VerticalAlignment="{TemplateBinding telerik:RadExpander.VerticalHeaderAlignment}">
                          <telerik:RadToggleButton.Template>
                              <ControlTemplate
            TargetType="telerik:RadToggleButton">
                                  <Grid>
                                      <ContentPresenter
                Content="{TemplateBinding ContentControl.Content}"
                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                Name="Content"
                Margin="{TemplateBinding Control.Padding}"
                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
                                      <Rectangle
                Stroke="#D82A2A2A"
                StrokeThickness="1"
                StrokeDashArray="1 2"
                Name="FocusDecorator"
                Visibility="Collapsed"
                IsHitTestVisible="False" />
                                  </Grid>
                                  <ControlTemplate.Triggers>
                                      <Trigger
                Property="UIElement.IsFocused">
                                          <Setter
                  Property="UIElement.Visibility"
                  TargetName="FocusDecorator">
                                              <Setter.Value>
                                                  <x:Static
                      Member="Visibility.Visible" />
                                              </Setter.Value>
                                          </Setter>
                                          <Trigger.Value>
                                              <s:Boolean>True</s:Boolean>
                                          </Trigger.Value>
                                      </Trigger>
                                  </ControlTemplate.Triggers>
                              </ControlTemplate>
                          </telerik:RadToggleButton.Template>
                          <Grid
          Background="#00FFFFFF"
          Name="HeaderPanel">
                              <Grid.ColumnDefinitions>
                                  <ColumnDefinition
              Width="Auto" />
                                  <ColumnDefinition
              Width="*" />
                              </Grid.ColumnDefinitions>
                              <Grid.RowDefinitions>
                                  <RowDefinition
              Height="Auto" />
                                  <RowDefinition
              Height="*" />
                              </Grid.RowDefinitions>
                              <Grid
            Grid.Column="0"
            Grid.Row="0">
                                  <Ellipse
              Fill="#00FFFFFF"
              Stroke="#CC636363"
              Name="OuterCircle"
              Width="20"
              Height="20"
              HorizontalAlignment="Center"
              VerticalAlignment="Center" />
                                  <Ellipse
              Stroke="#CCFFFFFF"
              Name="InnerCircle"
              Width="18"
              Height="18"
              HorizontalAlignment="Center"
              VerticalAlignment="Center" />
                                  <Grid
              Name="arrowPanel"
              RenderTransformOrigin="0.5,0.5">
                                      <Grid.RenderTransform>
                                          <RotateTransform />
                                      </Grid.RenderTransform>
                                      <Path
                Data="M0,0L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75z"
                Stretch="None"
                Fill="#FF000000"
                Name="arrow"
                Width="8"
                Height="4"
                RenderTransformOrigin="0.5,0.5">
                                          <Path.RenderTransform>
                                              <RotateTransform
                    Angle="0" />
                                          </Path.RenderTransform>
                                      </Path>
                                  </Grid>
                              </Grid>
                              <telerik:LayoutTransformControl
            IsTabStop="False"
            Name="HeaderContentTransform"
            RenderTransformOrigin="0.5,0.5"
            Grid.Column="0"
            Grid.Row="0">
                                  <ContentPresenter
              Content="{TemplateBinding HeaderedContentControl.Header}"
              ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
              Name="HeaderContent"
              Margin="5,0,5,0"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Grid.Column="1" />
                              </telerik:LayoutTransformControl>
                          </Grid>
                      </telerik:RadToggleButton>
                      <ContentPresenter
        Content="{TemplateBinding ContentControl.Content}"
        ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
        Name="Content"
        Margin="{TemplateBinding Control.Padding}"
        HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
        Visibility="Collapsed" />
                  </Grid>
              </Border>
          </Grid>
          <ControlTemplate.Triggers>
              <Trigger
    Property="UIElement.IsEnabled">
                  <Setter
      Property="Shape.Stroke"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <SolidColorBrush>#7F000000</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Stroke"
      TargetName="InnerCircle">
                      <Setter.Value>
                          <SolidColorBrush>#26FFFFFF</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <SolidColorBrush>#33929292</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="arrow">
                      <Setter.Value>
                          <SolidColorBrush>#FF8D8D8D</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="UIElement.Opacity"
      TargetName="Content">
                      <Setter.Value>
                          <s:Double>0.5</s:Double>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="UIElement.Opacity"
      TargetName="HeaderContent">
                      <Setter.Value>
                          <s:Double>0.5</s:Double>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <s:Boolean>False</s:Boolean>
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.IsMouseOverHeader">
                  <Setter
      Property="Shape.Stroke"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <SolidColorBrush>#CC727272</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Stroke"
      TargetName="InnerCircle">
                      <Setter.Value>
                          <SolidColorBrush>#FFFFFFFF</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <LinearGradientBrush
          StartPoint="0.5,0"
          EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                  <GradientStop
              Color="#E5FFFFFF"
              Offset="0" />
                                  <GradientStop
              Color="#B2EEEEEE"
              Offset="0.5" />
                                  <GradientStop
              Color="#B2EEEEEE"
              Offset="0.5" />
                                  <GradientStop
              Color="#66BBBBBB"
              Offset="1" />
                              </LinearGradientBrush.GradientStops>
                          </LinearGradientBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="arrow">
                      <Setter.Value>
                          <SolidColorBrush>#FF000000</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <s:Boolean>True</s:Boolean>
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.IsHeaderPressed">
                  <Setter
      Property="Shape.Stroke"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <LinearGradientBrush
          StartPoint="0.5,0"
          EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                  <GradientStop
              Color="#B2000000"
              Offset="0" />
                                  <GradientStop
              Color="#7F000000"
              Offset="1" />
                              </LinearGradientBrush.GradientStops>
                          </LinearGradientBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Stroke"
      TargetName="InnerCircle">
                      <Setter.Value>
                          <LinearGradientBrush
          StartPoint="0.5,0"
          EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                  <GradientStop
              Color="#66000000" />
                                  <GradientStop
              Color="#B2FFFFFF"
              Offset="1" />
                              </LinearGradientBrush.GradientStops>
                          </LinearGradientBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="OuterCircle">
                      <Setter.Value>
                          <LinearGradientBrush
          StartPoint="0.5,0"
          EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                  <GradientStop
              Color="#CC323232" />
                                  <GradientStop
              Color="#7FFFFFFF"
              Offset="0.5" />
                                  <GradientStop
              Color="#7FFFFFFF"
              Offset="0.5" />
                                  <GradientStop
              Color="#66828282"
              Offset="1" />
                              </LinearGradientBrush.GradientStops>
                          </LinearGradientBrush>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Shape.Fill"
      TargetName="arrow">
                      <Setter.Value>
                          <SolidColorBrush>#FF000000</SolidColorBrush>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <s:Boolean>True</s:Boolean>
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ExpandDirection">
                  <Trigger.EnterActions>
                      <BeginStoryboard
        Name="ExpandDirection_Left_BSB">
                          <Storyboard>
                              <Storyboard.Children>
                                  <DoubleAnimation
              To="90"
              Duration="00:00:00"
              Storyboard.TargetName="arrowPanel"
              Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
                              </Storyboard.Children>
                          </Storyboard>
                      </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                      <RemoveStoryboard
        BeginStoryboardName="ExpandDirection_Left_BSB" />
                  </Trigger.ExitActions>
                  <Setter
      Property="ColumnDefinition.Width"
      TargetName="col0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="RowDefinition.Height"
      TargetName="row0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Grid.Column"
      TargetName="HeaderButton">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="telerik:ExpandDirection.Left" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ExpandDirection">
                  <Trigger.EnterActions>
                      <BeginStoryboard
        Name="ExpandDirection_Right_BSB">
                          <Storyboard>
                              <Storyboard.Children>
                                  <DoubleAnimation
              To="-90"
              Duration="00:00:00"
              Storyboard.TargetName="arrowPanel"
              Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
                              </Storyboard.Children>
                          </Storyboard>
                      </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                      <RemoveStoryboard
        BeginStoryboardName="ExpandDirection_Right_BSB" />
                  </Trigger.ExitActions>
                  <Setter
      Property="ColumnDefinition.Width"
      TargetName="col1">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="RowDefinition.Height"
      TargetName="row0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Grid.Column"
      TargetName="Content">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="telerik:ExpandDirection.Right" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ExpandDirection">
                  <Trigger.EnterActions>
                      <BeginStoryboard
        Name="ExpandDirection_Up_BSB">
                          <Storyboard>
                              <Storyboard.Children>
                                  <DoubleAnimation
              To="180"
              Duration="00:00:00"
              Storyboard.TargetName="arrowPanel"
              Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
                              </Storyboard.Children>
                          </Storyboard>
                      </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                      <RemoveStoryboard
        BeginStoryboardName="ExpandDirection_Up_BSB" />
                  </Trigger.ExitActions>
                  <Setter
      Property="ColumnDefinition.Width"
      TargetName="col0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="RowDefinition.Height"
      TargetName="row0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Grid.Row"
      TargetName="HeaderButton">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="telerik:ExpandDirection.Up" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ExpandDirection">
                  <Setter
      Property="ColumnDefinition.Width"
      TargetName="col0">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="RowDefinition.Height"
      TargetName="row1">
                      <Setter.Value>
                          <GridLength>*</GridLength>
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Grid.Row"
      TargetName="Content">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="telerik:ExpandDirection.Down" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ResultOrientation">
                  <Setter
      Property="telerik:LayoutTransformControl.LayoutTransform"
      TargetName="HeaderContentTransform">
                      <Setter.Value>
                          <RotateTransform
          Angle="90" />
                      </Setter.Value>
                  </Setter>
                  <Setter
      Property="Grid.Row"
      TargetName="HeaderContentTransform">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="Orientation.Vertical" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.ResultOrientation">
                  <Setter
      Property="Grid.Column"
      TargetName="HeaderContentTransform">
                      <Setter.Value>
                          <s:Int32>1</s:Int32>
                      </Setter.Value>
                  </Setter>
                  <Trigger.Value>
                      <x:Static
        Member="Orientation.Horizontal" />
                  </Trigger.Value>
              </Trigger>
              <Trigger
    Property="telerik:RadExpander.IsExpanded">
                  <Trigger.EnterActions>
                      <BeginStoryboard>
                          <Storyboard>
                              <Storyboard.Children>
                                  <DoubleAnimation
              To="180"
              Duration="00:00:00.2000000"
              Storyboard.TargetName="arrow"
              Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
                              </Storyboard.Children>
                          </Storyboard>
                      </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                      <BeginStoryboard>
                          <Storyboard>
                              <Storyboard.Children>
                                  <DoubleAnimation
              To="0"
              Duration="00:00:00.2000000"
              Storyboard.TargetName="arrow"
              Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" />
                              </Storyboard.Children>
                          </Storyboard>
                      </BeginStoryboard>
                  </Trigger.ExitActions>
                  <Trigger.Value>
                      <s:Boolean>True</s:Boolean>
                  </Trigger.Value>
              </Trigger>
          </ControlTemplate.Triggers>
      </ControlTemplate>
      </Setter.Value>
      </Setter>

  </Style>

[Tina Stancheva]

Hi Michael,

The issue is caused by the IsChecked property of the HeaderButton RadToggleButton. In your custom style you have set it to False, but the RadExpander expanding logic is based on this property and this is why you need to bind it to the IsExpanded property of the expander. Otherwise the expander won't know when to expand its content:

<telerik:RadToggleButton Name="HeaderButton"
                         ...
                         Cursor="Hand"
                         ...
                         IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                         TabIndex="{TemplateBinding KeyboardNavigation.TabIndex}"><telerik:RadToggleButton.Template>

I attached the sample project I created to test your solution - its modified to bind the HeaderButton.IsChecked property to the expanded state of the expander. Please give it a try and let me know if it works for you.

Kind regards,
Tina Stancheva
the Telerik team

[Michael]

Thanks Tina, works perfectly. Thanks for your help.

I've posted another WPF query here: http://www.telerik.com/community/forums/wpf/window/radwindow-animations-modalbackground.aspx
regarding the RADWindow. Not sure if you can assist with this too.

Thanks!
Michael