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

How to Orient RadExpander Header Content Vertically

Environment

Product RadExpander for WPF

Description

How to display the header vertically when the ExpandDirection is Right or Left.

Solution

To achieve this requirement you can set use a LayoutTransformControl and place it inside the Header of the RadExpander as demonstrated in Example 1.

Example 1: Change Header Orientation

<Grid x:Name="LayoutRoot" ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="" /> 
        <ColumnDefinition Width="" /> 
    </Grid.ColumnDefinitions> 
 
    <telerik:RadExpander ExpandDirection="Right" IsExpanded="True"> 
        <telerik:RadExpander.Header> 
            <telerik:LayoutTransformControl VerticalAlignment="Top"> 
                <telerik:LayoutTransformControl.LayoutTransform> 
                    <RotateTransform Angle="-90" /> 
                </telerik:LayoutTransformControl.LayoutTransform> 
                <telerik:LayoutTransformControl.Content> 
                    <TextBlock Text="Expand: Right" /> 
                </telerik:LayoutTransformControl.Content> 
            </telerik:LayoutTransformControl> 
        </telerik:RadExpander.Header> 
        <telerik:RadExpander.Content> 
            <Rectangle Width="200" Height="10" Fill="Green" /> 
        </telerik:RadExpander.Content> 
    </telerik:RadExpander> 
 
    <telerik:RadExpander Grid.Column="1" ExpandDirection="Left" IsExpanded="True"> 
        <telerik:RadExpander.Header> 
            <telerik:LayoutTransformControl> 
                <telerik:LayoutTransformControl.LayoutTransform> 
                    <RotateTransform Angle="-90" /> 
                </telerik:LayoutTransformControl.LayoutTransform> 
                <telerik:LayoutTransformControl.Content> 
                    <TextBlock Text="Expand: Left" /> 
                </telerik:LayoutTransformControl.Content> 
            </telerik:LayoutTransformControl> 
        </telerik:RadExpander.Header> 
        <telerik:RadExpander.Content> 
            <Rectangle Width="200" Height="10"  Fill="Yellow" /> 
        </telerik:RadExpander.Content> 
    </telerik:RadExpander> 
</Grid> 

See Also

In this article