Home  separator  Controls  separator  Expander
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


WPF Expander Control

Introduction

The Expander control is like a GroupBox but with the additional feature to collapse and expand its content. It derives from HeaderedContentControl so it has a Header property to set the header content, and a Content property for the expandable content.

It has a IsExpanded property to get and set if the expander is in expanded or collapsed state.

In collapsed state the expander takes only the space needed by the header. In expanded state it takes the size of header and content together.

 
<Expander Header="More Options">
    <StackPanel Margin="10,4,0,0">
        <CheckBox Margin="4" Content="Option 1" />
        <CheckBox Margin="4" Content="Option 2" />
        <CheckBox Margin="4" Content="Option 3" />
    </StackPanel>
</Expander>
 
 




Last modified: 2010-02-08 12:27:56
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Hey!!
Commented on 23.February 2010
this man "me" is Crazy!!!
Amit
Commented on 25.February 2010
Cool tutorial , really liked it.
mike c
Commented on 7.March 2010
The Tutorial was not a tutorial, but there were some interesting comments on what posters wanted and possible solutions.
chintu
Commented on 6.April 2010
nice work
Ismail
Commented on 12.April 2010
Nice Article. But how to make the expander to expand and close slowly. kindly help
Xarzu
Commented on 11.May 2010
How does one make the the header a gray color so one can tell it apart from the other content?
Bally
Commented on 13.May 2010
I followed the tutorial as said but its still giving me problems.Instead of the expander when expanded to push other expanders down, and closes the gap when collapsed.It expands but on others.Please how can i make it push other expanders down when it expands and pull the expanders back to their position when it collapses. Are there any properties that can be modified to make it work?

Here is my sample code using Expression Blend 3.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow" WindowStartupLocation="CenterScreen" WindowState="Maximized">
<Window.ContextMenu>
<ContextMenu/>
</Window.ContextMenu>



<Grid x:Name="LayoutRoot">
<StackPanel>
<Expander VerticalAlignment="Top" Header="Expander" Width="Auto" Height="Auto" ExpandDirection="Down" HorizontalAlignment="Left">
<Canvas>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.342*"/>
<ColumnDefinition Width="0.658*"/>
</Grid.ColumnDefinitions>
<Label Margin="0,0,-0.001,0" Content="Label" d:LayoutOverrides="Width, Height"/>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Margin="0,38,0,0"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="CheckBox" Margin="0,0,0,-19.96" d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Canvas>
</Expander>
<Expander VerticalAlignment="Top" Header="Expander" Width="Auto" Height="Auto" ExpandDirection="Down" HorizontalAlignment="Left">
<Canvas>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.342*"/>
<ColumnDefinition Width="0.658*"/>
</Grid.ColumnDefinitions>
<Label Margin="0,0,-0.001,0" Content="Label" d:LayoutOverrides="Width, Height"/>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Margin="0,38,0,0"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="CheckBox" Margin="0,0,0,-19.96" d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Canvas>
</Expander>
</StackPanel>

</Grid>
</Window>
Liz
Commented on 10.June 2010
Gary, I came here looking to check that an Expander did what I thought it might do, and the syntax of how to use it. Perfect. Thanks!
Vishal Pandit
Commented on 8.July 2010
I want to know can we change the position of exapnder pointer without effecting the internal things in expander
Phil R
Commented on 31.August 2010
I, too, got what I needed.
Aarti Varadkar
Commented on 21.December 2010
Nice One
Gmac
Commented on 22.December 2010
I also found this useful, thank you!
Yo
Commented on 29.December 2010
I want to create expander dynamically and want to add groupbox into it.

using expander.content = textbox is working fine. but wen i add group box it doesnot work,
Drew
Commented on 29.December 2010
Great Tutorial. Is it possible to have an expander bump other elements out of the way when it is expanded? for instance if the collapsed expander is next to a listview, when you click to expand can it move the listview over? probably isnt possible but thought id ask. thanks
Bob
Commented on 16.February 2011
bollocks
Rahul
Commented on 2.March 2011
Like Expandable Panel...Very Impressive.
Chetan
Commented on 6.April 2011
This Site is very Helpful for me...Thanks
mohammad...
Commented on 16.April 2011
this is the good article but not professional
mohammad...
Commented on 16.April 2011
this site is very very benefit. I am from Iran and my english not is good.but i am a programmer in the iran. please set several project in the website.
ESmile
Commented on 23.May 2011
Xclnt.
ESmile
Commented on 23.May 2011
Xclnt.
Anju
Commented on 16.June 2011
Hi. I would like to know how I can open a Page.xaml in a browser. Can you pls help? Thanks
M Shariq
Commented on 3.July 2011
how to Control Move Down When Expender is Expend Down. also hw to reset ???
TomVenom
Commented on 21.July 2011
Nice ! Thanks a lot, you just saved my life ! So helpful !
Raja Mani
Commented on 26.August 2011
This tutorial is very useful for beginners. Good effort anyways.

Name
E-Mail (optional)
Comment