Expander Control in WPF

In this article, I am going to explain how to use the Expander control available in WPF.

An Expander control is used to wrap or expand the content of items. You may have noticed some websites provide functionalty to close and open some controls. This can be achieved in WPF using the Expander control.

Let's say, I have a ListBox control. The ItemTemplate for the items in the ListBox uses an Expander to wrap the contents of the item.  If I expand an item in the list, the ListBox expands to handle the new height of one of its items.  If I collapse that item, the ListBox's height doesn't adjust automatically.  I need the ListBox to reclaim that space so that my dialog looks correct. In this article I am using ListBox control.
See the attached source code for more details.

Here are few snapshots of this control.

 

Figure 1.

This snapshot is before the items in the list are expanded. 

 

Figure 2.

This snapshot is taken after the items in the ListBox are expanded.

The following XAML code creates the Expander control at design time. Copy and paste this code in your application.

<Expander Background="DarkGreen"  x:Name="Expander1" Header="Expander1">

        <StackPanel Background="Blue">

          <Expander Background="Red"  Header="Expander2">

            <ListBox Background="Chocolate"  Name="listbox11">

              <ListBoxItem>

                <TextBlock>raj beniwal</TextBlock>

              </ListBoxItem>

              <ListBoxItem Background="Blue">

                <StackPanel Background="Yellow">

                  <TextBlock>dinesh kumar</TextBlock>

                  <Expander Background="Pink" Header="Expander3">

                    <ListBox Name="list2">

                      <ListBoxItem>

                        <TextBlock>rahul saxena</TextBlock>

                      </ListBoxItem>

                      <ListBoxItem>

                        <TextBlock>naresh kumar</TextBlock>

                      </ListBoxItem>

                      <ListBoxItem>

                        <TextBlock>suhel</TextBlock>

                      </ListBoxItem>

                      <ListBoxItem>

                        <TextBlock>steve</TextBlock>

                      </ListBoxItem>

                      <ListBoxItem>

                        <TextBlock>varman</TextBlock>

                      </ListBoxItem>

                    </ListBox>

                  </Expander>

 

                </StackPanel>

              </ListBoxItem>

            </ListBox>

          </Expander>

        </StackPanel>

      </Expander>

I hope you like this article. If yes drop me a line or write a comment below in the comments section.