Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WPF > Expander > Expander Header Cursor

Not answered Expander Header Cursor

Feed from this thread
  • Michael avatar

    Posted on Feb 7, 2012 (permalink)

    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.

    Reply

  • Miro Miroslavov Miro Miroslavov admin's avatar

    Posted on Feb 9, 2012 (permalink)

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

  • Michael avatar

    Posted on Feb 9, 2012 (permalink)

    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>


    Reply

  • Tina Stancheva Tina Stancheva admin's avatar

    Posted on Feb 14, 2012 (permalink)

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

    Reply

  • Michael avatar

    Posted on Feb 14, 2012 (permalink)

    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>




    Reply

  • Tina Stancheva Tina Stancheva admin's avatar

    Posted on Feb 17, 2012 (permalink)

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

    Reply

  • Michael avatar

    Posted on Feb 21, 2012 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WPF > Expander > Expander Header Cursor
Related resources for "Expander Header Cursor"

[  WPF Expander Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  ]