Edit this page

Alignment

You can control the alignment of the RadExpander control through the HorizontalAlignment and VerticalAlignment properties. Moreover, if you need to further customize the RadExpander's Content alignment you can take advantage of the HorizontalContentAlignment and VerticalContentAlignment properties. And if you want to control the alignment of the RadExpander's Header, you can use the HorizontalHeaderAlignment and VerticalHeaderAlignment properties. By default all these properties are set to Stretch so that the RadExpander control is always stretch thus taking up all available space.

The alignment properties depend on the ExpandDirection of the control. Therefore before setting the alignment properties, you should carefully plan how you need to render the control depending on the available area as well as the ExpandDirection of the control.

XAML

<Grid x:Name="LayoutRoot" Width="555" Height="444" Background="White" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <telerik:RadExpander Grid.Row="0" Grid.Column="0" ExpandDirection="Down" Header="Down">
        <Border BorderBrush="Yellow" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Yellow" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="0" Grid.Column="1" ExpandDirection="Up" Header="Up">
        <Border BorderBrush="Blue" BorderThickness="1">
            <StackPanel Orientation="Vertical">
                <Ellipse Width="99" Height="99" Margin="5" Fill="Blue" />
            </StackPanel>
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="0" ExpandDirection="Right" Header="Right">
        <Border BorderBrush="Red" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Red" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="1" ExpandDirection="Left" Header="Left">
        <Border BorderBrush="Green" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Green" />
        </Border>
    </telerik:RadExpander>
</Grid>

HorizontalAlignment and VerticalAlignment properties

You can control the vertical and horizontal alignment of the control through the HorizontalAlignment and VerticalAlignment properties. By default both properties are set to Stretch. However, if you want the control to take up only as much space as it needs, you can define the VerticalAlignment and HorizontalAlignment properties accordingly to the ExpandDirection of the control:

XAML

<Grid x:Name="LayoutRoot" Width="555" Height="444" Background="White" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <telerik:RadExpander Grid.Row="0" Grid.Column="0" ExpandDirection="Down" Header="Down" VerticalAlignment="Top">
        <Border BorderBrush="Yellow" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Yellow" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="0" Grid.Column="1" ExpandDirection="Up" Header="Up" VerticalAlignment="Bottom">
        <Border BorderBrush="Blue" BorderThickness="1">
            <StackPanel Orientation="Vertical">
                <Ellipse Width="99" Height="99" Margin="5" Fill="Blue" />
            </StackPanel>
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="0" ExpandDirection="Right" Header="Right" HorizontalAlignment="Left">
        <Border BorderBrush="Red" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Red" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="1" ExpandDirection="Left" Header="Left" HorizontalAlignment="Right">
        <Border BorderBrush="Green" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Green" />
        </Border>
    </telerik:RadExpander>
</Grid>

Please note that when the VerticalAlignment/HorizontalAlignment properties match the ExpandDirection, the Header will move aside as the content is expanded.

HorizontalContentAlignment and VerticalContentAlignment properties

You can use the HorizontalContentAlignment and VerticalContentAlignment properties to control how the RadExpander's Content will be rendered. For example you can use the properties to set the RadExpander's Content to take up only as much space as it needs:

XAML

<Grid x:Name="LayoutRoot" Width="555" Height="444" Background="White" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <telerik:RadExpander Grid.Row="0" Grid.Column="0" ExpandDirection="Down" VerticalContentAlignment="Top">
        <telerik:RadExpander.Header>
            <Border Background="LightYellow">
                <TextBlock Text="Down" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Yellow" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Yellow" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="0" Grid.Column="1" ExpandDirection="Up" VerticalContentAlignment="Bottom">
        <telerik:RadExpander.Header>
            <Border Background="LightBlue">
                <TextBlock Text="Up" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Blue" BorderThickness="1">
            <StackPanel Orientation="Vertical">
                <Ellipse Width="99" Height="99" Margin="5" Fill="Blue" />
            </StackPanel>
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="0" ExpandDirection="Right" HorizontalContentAlignment="Left">
        <telerik:RadExpander.Header>
            <Border Background="LightPink">
                <TextBlock Text="Right" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Red" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Red" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Row="1" Grid.Column="1" ExpandDirection="Left" HorizontalContentAlignment="Right">
        <telerik:RadExpander.Header>
            <Border Background="LightGreen">
                <TextBlock Text="Left" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Green" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Green" />
        </Border>
    </telerik:RadExpander>
</Grid>

HorizontalHeaderAlignment and VerticalHeader alignment properties

You can control how to render the RadExpander's Header through the HorizontalHeaderAlignment and VerticalHeaderAlignment properties. These properties should be set accordingly to the ExpandDirection value.

If the RadExpander's ExpandDirection is Up or Down, you can control the Header's alignment through the HorizontalHeaderAlignment. The property exposes the following enumeration:

  • Center - the RadExpander.Header's content will be centered in the header part of the RadExpander ControlTemplate

  • Right - the RadExpander.Header's content will be right-aligned in the header part of the RadExpander ControlTemplate

  • Left - the RadExpander.Header's content will be left-aligned in the header part of the RadExpander ControlTemplate

  • Stretch - the RadExpander.Header's content will be stretched throughout the header part of the RadExpander ControlTemplate

XAML

<Grid x:Name="LayoutRoot" Width="555" Height="444" Background="White" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <telerik:RadExpander Grid.Column="0" ExpandDirection="Down" HorizontalHeaderAlignment="Center">
        <telerik:RadExpander.Header>
            <Border Background="LightYellow">
                <TextBlock Text="Down" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Yellow" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Yellow" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Column="1" ExpandDirection="Up" HorizontalHeaderAlignment="Right">
        <telerik:RadExpander.Header>
            <Border Background="LightBlue">
                <TextBlock Text="Up" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Blue" BorderThickness="1">
            <StackPanel Orientation="Vertical">
                <Ellipse Width="99" Height="99" Margin="5" Fill="Blue" />
            </StackPanel>
        </Border>
    </telerik:RadExpander>
</Grid>

If the RadExpander's ExpandDirection is Right or Left, you can control the position of the Header's content through the VerticalHeaderAlignment property. The property exposes the following enumeration:

  • Center - the RadExpander.Header's content will be centered in the header part of the RadExpander ControlTemplate

  • Bottom- the RadExpander.Header's content will be placed at the bottom of the header part of the RadExpander ControlTemplate

  • Top- the RadExpander.Header's content will be placed at the top of the header part of the RadExpander ControlTemplate

  • Stretch - the RadExpander.Header's content will be stretched throughout the header part of the RadExpander ControlTemplate

XAML

<Grid x:Name="LayoutRoot" Width="555" Height="444" Background="White" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <telerik:RadExpander Grid.Column="0" ExpandDirection="Right" VerticalHeaderAlignment="Bottom">
        <telerik:RadExpander.Header>
            <Border Background="LightPink">
                <TextBlock Text="Right" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Red" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Red" />
        </Border>
    </telerik:RadExpander>
    <telerik:RadExpander Grid.Column="1" ExpandDirection="Left" VerticalHeaderAlignment="Center">
        <telerik:RadExpander.Header>
            <Border Background="LightGreen">
                <TextBlock Text="Left" FontWeight="Bold" />
            </Border>
        </telerik:RadExpander.Header>
        <Border BorderBrush="Green" BorderThickness="1">
            <Ellipse Width="99" Height="99" Margin="5" Fill="Green" />
        </Border>
    </telerik:RadExpander>
</Grid>