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>