Expander Control in WPF

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

What is WPF?. Windows Presentation Foundation (WPF) is the code-name of the presentation (user-interfaces) sub system in Windows Vista programming model and is used to create user interfaces.

Now let's come back to this article, 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 expand items in the list.



Figure 2.

This snapshot is taken after expand items.

Here is HTML design of this:

    <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 will like this article. If yes drop me a line or write a comment below in the comments section.