Expand and Collapse ExpanderView inside data bound ListBox via code

published on: 9/16/2011 | Views: N/A | Tags: WP7Toolkit Binding

by WindowsPhoneGeek

In this post I am going to talk about how to Expand and Collapse an ExpanderView control placed inside databound ListBox programmatically via code.

NOTE: ExpanderView  is one of the new components which come with the latest update of the Windows Phone Toolkit - August 2011 (7.1 SDK).

To begin with let me first mention that in this article I will use the data bound ExpanderView from my previous post  Windows Phone Toolkit ExpanderView in depth| Part2: databinding. In short we have a ListBox with databound ExpanderView in its ItemTemplate:

<ListBox Grid.Row="0" x:Name="listBox">
   <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <toolkit:ExpanderView Header="{Binding}"   Expander="{Binding}"
ItemsSource="{Binding Options}"
NonExpandableHeader="{Binding}"
IsNonExpandable="{Binding HasNoOptions}" 
IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}" ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
ItemTemplate="{StaticResource CustomItemTemplate}"
NonExpandableHeaderTemplate="{StaticResource CustomNonExpandableHeaderTemplate}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The next example demonstrates how to expand/collapse all the ExpanderViews from the ListBox defined in the previous example. Note that all ListBox items are actually ExpanderViews.

Step1. Add two buttons that will be used to Expand and Collapse all items:

<StackPanel Grid.Row="1" Orientation="Horizontal">
   <Button x:Name="btnExpand" Content="Expand All" Click="btnExpand_Click" />
   <Button x:Name="btnCollapse" Content="Collapse All" Click="btnCollapse_Click" />
</StackPanel>

Step2. Add the following helper method that will be used to expand/collapse the ExpanderViews placed inside the ListBox control.

private void SetExpanded(bool expand)
{
    foreach (object item in this.listBox.Items)
    {
        CustomPizza customPizza = item as CustomPizza;
        if (customPizza != null)
        {
            customPizza.IsExpanded = expand;
        }
    }
}

NOTE: CustomPizza  is our data class. For reference take a look at Windows Phone Toolkit ExpanderView in depth| Part2: databinding!

Step3. Add the following code inside the "btnExpand" Click handler. (Expand All functionslity)

private void btnExpand_Click(object sender, RoutedEventArgs e)
{
    this.SetExpanded(true);
}

Step4. Add the following code inside the "btnCollapse" Click handler. (Collapse All functionslity)

private void btnCollapse_Click(object sender, RoutedEventArgs e)
{
    this.SetExpanded(false);
}

As you may have noticed, the example works by using a two-way binding between the ExpanderView's IsExpanded and CustomPizza's IsExpanded properties. So, whenever we set IsExpanded to true on a CustomPizza instance, the expanded which is bound to this instance expands.

That was all about how to Expand/Collapse programmatically the ExpanderView from the Windows Phone Toolkit - August 2011 (7.1 SDK)  in depth.

The source code is available here:

I hope that the article was helpful.

You may also find interesting the following articles:

• Windows Phone Toolkit ExpanderView in depth| Part1: key concepts and API
• Windows Phone Toolkit ExpanderView in depth| Part2: Data Binding
• Windows Phone Toolkit LockablePivot in depth
• Windows Phone Toolkit PhoneTextBox in depth
• Windows Phone Toolkit DateTime Converters

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Expand and Collapse ExpanderView inside data bound ListBox via code'

Title Your Name

Comment