Getting Started

This article will provide you with the knowledge required to use the RadExpander control in a basic scenario.

Assembly References

In order to use the RadExpander control, you will need to add references to the following assemblies:

  • Telerik.Windows.Controls

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Add а RadExpander to the Project

The RadExpander is a HeaderedContentControl and you can initialize both its Header and Content properties.

Example 1: RadExpander definition

<telerik:RadExpander Header="My Expander"> 
    <ListBox> 
        <ListBoxItem Content="Option 1" /> 
        <ListBoxItem Content="Option 2" /> 
        <ListBoxItem Content="Option 3" /> 
        <ListBoxItem Content="Option 4" /> 
        <ListBoxItem Content="Option 5" /> 
    </ListBox> 
</telerik:RadExpander> 

Figure 1: The RadExpander generated by the code in Example 1

The RadExpander generated by the code in Example 1

Declaring more complex Header and Content

As both Header and Content properties are of type object there's no limits as to what you can display inside the control. Example 2 demonstrates a more complex layout with some hard-coded values. You can, of course, introduce an items control and define its ItemContainerStyle and ItemTemplate, for example.

Example 2: More complex content

<telerik:RadExpander x:Name="radExpander" 
                     VerticalContentAlignment="Top" 
                     IsExpanded="True"> 
    <telerik:RadExpander.Header> 
        <TextBlock Text="Header" /> 
    </telerik:RadExpander.Header> 
    <telerik:RadExpander.Content> 
        <Grid> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition /> 
                <ColumnDefinition /> 
            </Grid.ColumnDefinitions> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto" /> 
                <RowDefinition Height="Auto" /> 
            </Grid.RowDefinitions> 
            <Border Height="131" 
                    Margin="5" 
                    BorderBrush="#FFDADADA" 
                    BorderThickness="0,0,1,1" 
                    CornerRadius="3"> 
                <Border BorderBrush="#B2ADBDD1" 
                        BorderThickness="1" 
                        CornerRadius="2"> 
                    <StackPanel Orientation="Horizontal"> 
                        <Border Width="108" 
                                Height="108" 
                                Margin="10 0 0 0" 
                                BorderBrush="#FFE0E0E0" 
                                BorderThickness="1"> 
                            <Image Source="/Images/item1.png" Stretch="None" /> 
                        </Border> 
                        <StackPanel Margin="10 25 10 0"> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="16" 
                                       Foreground="#FF0099CC" 
                                       Text="Bob Smiil" /> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="11" 
                                       Text="BobSmiil@mail.com" /> 
                            <TextBlock FontFamily="Segoe UI" 
                                       FontSize="10.667" 
                                       Text="Phone: 333 2334" /> 
                        </StackPanel> 
                    </StackPanel> 
                </Border> 
            </Border> 
            <Border Grid.Row="1" 
                    Height="131" 
                    Margin="5" 
                    BorderBrush="#FFDADADA" 
                    BorderThickness="0,0,1,1" 
                    CornerRadius="3"> 
                <Border BorderBrush="#B2ADBDD1" 
                        BorderThickness="1" 
                        CornerRadius="2"> 
                    <StackPanel Orientation="Horizontal"> 
                        <Border Width="108" 
                                Height="108" 
                                Margin="10 0 0 0" 
                                BorderBrush="#FFE0E0E0" 
                                BorderThickness="1"> 
                            <Image Source="/Images/item2.png" Stretch="None" /> 
                        </Border> 
                        <StackPanel Margin="10 25 15 0"> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="16" 
                                       Foreground="#FF0099CC" 
                                       Text="Anne Dodsworth" /> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="11" 
                                       Text="Anne Dodsworth@mail.com" /> 
                            <TextBlock FontFamily="Segoe UI" 
                                       FontSize="10.667" 
                                       Text="Phone: 333 2334" /> 
                        </StackPanel> 
                    </StackPanel> 
                </Border> 
            </Border> 
            <Border Grid.Column="1" 
                    Height="131" 
                    Margin="5" 
                    BorderBrush="#FFDADADA" 
                    BorderThickness="0,0,1,1" 
                    CornerRadius="3"> 
                <Border BorderBrush="#B2ADBDD1" 
                        BorderThickness="1" 
                        CornerRadius="2"> 
                    <StackPanel Orientation="Horizontal"> 
                        <Border Width="108" 
                                Height="108" 
                                Margin="10 0 0 0" 
                                BorderBrush="#FFE0E0E0" 
                                BorderThickness="1"> 
                            <Image Source="/Images/item3.png" Stretch="None" /> 
                        </Border> 
                        <StackPanel Margin="10 25 10 0"> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="16" 
                                       Foreground="#FF0099CC" 
                                       Text="Andrew Fuller" /> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="11" 
                                       Text="AndrewFuller@mail.com" /> 
                            <TextBlock FontFamily="Segoe UI" 
                                       FontSize="10.667" 
                                       Text="Phone: 333 2334" /> 
                        </StackPanel> 
                    </StackPanel> 
                </Border> 
            </Border> 
            <Border Grid.Row="1" 
                    Grid.Column="1" 
                    Height="131" 
                    Margin="5" 
                    BorderBrush="#FFDADADA" 
                    BorderThickness="0,0,1,1" 
                    CornerRadius="3"> 
                <Border BorderBrush="#B2ADBDD1" 
                        BorderThickness="1" 
                        CornerRadius="2"> 
                    <StackPanel Orientation="Horizontal"> 
                        <Border Width="108" 
                                Height="108" 
                                Margin="10 0 0 0" 
                                BorderBrush="#FFE0E0E0" 
                                BorderThickness="1"> 
                            <Image Source="/Images/item4.png" Stretch="None" /> 
                        </Border> 
                        <StackPanel Margin="10 25 15 0"> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="16" 
                                       Foreground="#FF0099CC" 
                                       Text="Emily Smile" /> 
                            <TextBlock Margin="0 0 0 5" 
                                       FontFamily="Segoe UI" 
                                       FontSize="11" 
                                       Text="EmilySmile@mail.com" /> 
                            <TextBlock FontFamily="Segoe UI" 
                                       FontSize="10.667" 
                                       Text="Phone: 333 2334" /> 
                        </StackPanel> 
                    </StackPanel> 
                </Border> 
            </Border> 
        </Grid> 
    </telerik:RadExpander.Content> 
</telerik:RadExpander> 

Figure 2: The RadExpander generated by the code in Example 2

The RadExpander generated by the code in Example 2

See Also

In this article
Not finding the help you need? Improve this article