Telerik UI for Windows Phone by Progress

RadExpanderControl can be integrated with DataBoundListBox and JumpList to create lists with master-details structured items.

Using RadExpanderControl with DataBoundListBox or RadJumpList

Integrating RadExpanderControl with RadDataBoundListBox or RadJumpList is as easy as defining a Data Template for the items that contains an instance of RadExpanderControl with a few additional steps that are needed to correctly setup its behavior. The following steps will guide you through this process:

  1. Create a Windows Phone Application project and add an instance of the RadDataBoundListBox control on the main page.
  2. Create a new class that looks like the following code snippet:

    CopyXAML
    public class ExpandableObject
    {
        public string Title
        {
            get;
            set;
        }
    
        public string Content
        {
            get;
            set;
        }
    
        public bool IsExpanded
        {
            get;
            set;
        }
    }

  3. Define a template for the DataBoundListBox' items by assigning the RadDataBoundListBox.ItemTemplate property in XAML just as the following XAML snippet demonstrates:

    CopyXAML
    <telerikPrimitives:RadDataBoundListBox x:Name="listBox">
        <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            <DataTemplate>
                <telerikPrimitives:RadExpanderControl
                    Content="{Binding}"
                    ExpandableContent="{Binding}"
                    IsExpanded="{Binding IsExpanded, Mode=TwoWay}">
                    <telerikPrimitives:RadExpanderControl.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
                        </DataTemplate>
                    </telerikPrimitives:RadExpanderControl.ContentTemplate>
                    <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Content}"/>
                        </DataTemplate>
                    </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                </telerikPrimitives:RadExpanderControl>
            </DataTemplate>
        </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
    </telerikPrimitives:RadDataBoundListBox>

    As you can see, the Content and ExpandableContent properties of the expander are directly bound to the DataContext of the parent visual container. Additionally, the IsExpanded property of the expander is bound to a boolean property on the business object (IsExpanded) because we need to preserve the ExpanderControl's expanded state for the corresponding item in the context of the UI Virtualization Mechanism in DataBoundListBox that reuses visual containers for the data items.

  4. Bind the list box to a collection of items from the type mentioned above and run the application: