Telerik UI for Windows Phone by Progress

RadExpanderControl resides in the Telerik.Windows.Controls.Primitives assembly.

Getting started with RadExpanderControl

RadExpanderControl exposes the following properties:

  • Content - defines the main content of the control
  • ContentTemplate - defines the data template for the main content of the control
  • ExpandableContent - defines the secondary content that can be shown or hidden
  • ExpandableContentTemplate - defines the data template for the secondary content
  • AnimatedIndicatorContent - defines the content of the animated indicator positioned at the top right edge of the expander. By default it is a rotating arrow.
  • AnimatedIndicatorContentTemplate - defines the content of the animated indicator positioned at the top right edge of the expander. By default it is a rotating arrow.
  • IsExpanded - determines the state of the expander control: expanded or collapsed

The following XAML code snippet demonstrates a simple scenario with RadExpanderControl. In this example an instance of the control is put on a Windows Phone page and initialized with data templates for its main and expandable content:

CopyXAML
<telerikPrimitives:RadExpanderControl
    BorderThickness="4, 0, 0, 0" 
    BorderBrush="{StaticResource PhoneAccentBrush}" 
    Foreground="{StaticResource PhoneForegroundBrush}">
    <telerikPrimitives:RadExpanderControl.ContentTemplate>
        <DataTemplate>
            <StackPanel Margin="8, 4 ,4 ,4" Orientation="Horizontal">
                <Image 
                    Source="Images/phonebook-pic.png"
                    Width="64" 
                    Height="64" 
                    Margin="0,4,12,4"/>
                <TextBlock 
                    FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                    FontFamily="{StaticResource PhoneFontFamilyLight}" 
                    Text="{Binding Name}" 
                    VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </telerikPrimitives:RadExpanderControl.ContentTemplate>
    <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
        <DataTemplate>
            <StackPanel 
                Margin="24, 4, 4, 4"  
                Orientation="Horizontal">
                <TextBlock 
                    FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                    FontFamily="{StaticResource PhoneFontFamilyLight}" 
                    Text="{Binding Email}" 
                    VerticalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
</telerikPrimitives:RadExpanderControl>

Here is how the control will look like provided that the used image resources in the XAML above are available, and the view models have the appropriate properties with initialized values:

Expander Control Normal

And in expanded state:

Expander Control Expanded