How to Orient RadExpander Header Content Vertically

Updated on Sep 15, 2025

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

XAML

    <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

• Expand Direction