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

Expander Header Cursor

6 Answers 667 Views

Expander

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

6 Answers, 1 is accepted

answered on 09 Feb 2012, 04:40 PM

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>

<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>

answered on 14 Feb 2012, 08:24 AM

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

answered on 14 Feb 2012, 12:45 PM

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

<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>

<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>

answered on 17 Feb 2012, 01:14 PM

WpfApplication3.zip

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>