New to Telerik UI for WPF? Download free 30-day trial

How To Change the Action Trigering an Expand

This article describes how to control the mouse action that triggers an expand.

The RadExpander control exposes a ClickMode property to allow you to determine when the content of the control should be expanded. The property is an enumeration of type ClickMode that exposes the following members:

  • Release: Specifies that the content should be expanded when the left mouse button is pressed and released on top of the RadExpander.Header. If you are using the keyboard, this setting specifies that the content should be expanded when the RadExpander.Header is focused and the SPACEBAR or ENTER key is pressed and released.

Example 1: Setting ClickMode to Release

<StackPanel> 
    <TextBox Text="Focused" /> 
    <telerik:RadExpander ClickMode="Release" 
                     ExpandDirection="Down"  
                     Header="Down"> 
        <StackPanel Orientation="Horizontal"> 
            <Ellipse Width="99"   
                 Height="99"  
                 Margin="5"  
                 Fill="Green" /> 
        </StackPanel> 
    </telerik:RadExpander> 
</StackPanel> 

Figure 1: Release ClickMode

RadExpander with ClickMode set to Release

  • Press: Specifies that the content should be expanded when the left mouse button is pressed on top of the RadExpander.Header. If you are using the keyboard, this setting specifies that the content should be expanded when the RadExpander.Header is focused and the SPACEBAR or ENTER key is pressed.

Example 2: Setting ClickMode to Press

<StackPanel> 
    <TextBox Text="Focused" /> 
    <telerik:RadExpander ClickMode="Press" 
                     ExpandDirection="Down"  
                     Header="Down"> 
        <StackPanel Orientation="Horizontal"> 
            <Ellipse Width="99"   
                 Height="99"  
                 Margin="5"  
                 Fill="Green" /> 
        </StackPanel> 
    </telerik:RadExpander> 
</StackPanel> 

Figure 2: Press ClickMode

RadExpander with ClickMode set to Press

  • Hover: Specifies that the content should be expanded when the mouse pointer hovers over the RadExpander.Header.

Example 3: Setting ClickMode to Hover

<StackPanel> 
    <TextBox Text="Focused" /> 
    <telerik:RadExpander ClickMode="Hover" 
                     ExpandDirection="Down"  
                     Header="Down"> 
        <StackPanel Orientation="Horizontal"> 
            <Ellipse Width="99"   
                 Height="99"  
                 Margin="5"  
                 Fill="Green" /> 
        </StackPanel> 
    </telerik:RadExpander> 
</StackPanel> 

Figure 3: Hover ClickMode

RadExpander with ClickMode set to Hover

The default value of the ClickMode property is Release which means that by default the RadExpander control is expanded when the left mouse button is released after a click on the header or when the Enter or Space keys are released while focusing the header.

In this article