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
Goo
Commented on 27.February 2009
Nice article. Its a good way to begin
Gary
Commented on 11.March 2009
And? When it expands does it move controls below, when it closes do controls move into the space? All you have said here is nothing!
Anish
Commented on 28.March 2009
Really Cool
VicKey
Commented on 28.March 2009
Nice Tutorial
Me
Commented on 2.April 2009
Gary is right!
Mike
Commented on 7.April 2009
Gary, Me..... Have you never used an expander before in your life?.. have you coded before?
All you guys have proven here is what you know.. Nothing!
Anil
Commented on 1.May 2009
Good and Nice...Thanks
Tore Aurstad
Commented on 10.May 2009
Re: Gary. If you make a fixed grid layout where your RowDefinition elements in play are of fixed values or what suits you right, you can avoid the Expander from moving the elements below or above. The downside of this is that in the collapsed state, there will be a notable void in screen space between the collapsed expander and the elements above and below. If expanders does not feel right in your GUI Gary, what about TabControl with TabItems?
Christian Moser
Commented on 10.May 2009
Hi Gary,

you can put your Expander element in a StackPanel, then all elements below it will move down and up, when you expand or collapse the expander.
Cody
Commented on 14.May 2009
Thanks for this. :)
Andrey
Commented on 16.May 2009
Hi.
A little question about expander. Is it possible to rotate header? I created expander with ExpandDirection property = "Right". And want to see header rotated to 90 degree
JOhn
Commented on 17.May 2009
Gary, you have a nice site but you are stupid!!! So stupid article i've never seen
Christian Moser
Commented on 17.May 2009
Hi Andrey,
it's definitely possible to rotate the header. There are multiple solutions to do that. I think the simplest way is to use a LayoutTransform on the content of the header. If you are using Expression Blend you find it in the properties on the root element of your header.
I hope this helps.

Greetings
Christian
Gary
Commented on 22.May 2009
Gary Is Back.
I was aware og the expander and how it works, I was just asking if this is really a tutorial? It just doesn't show much.

You all need to calm down, this site is good but hardly telling people what they don't already know.

After all it's called WPFTutorial.net and what we see here is simply a block of XAML stating the obvious.

Christian and tore, thanks for the answer on using stack panel with expander to do that.

John, this is not Gary's site. Mike you're response is really rather pointless.
AD
Commented on 5.June 2009
Is it possible to place button controls in the Hader of the expander?
Christian Moser
Commented on 8.June 2009
Hi AD,
yes, you can. The header is just a content property of type object. You can put in everything you like. But if you want to replace the Expand/Collapse icon, you need to create a control template. Then it would be easy to use a toggle button to manage the state of the expansion.
d72
Commented on 9.June 2009
Seems to me that stackpanel doesn't work the way described (or I'm doing something wrong). I need few expandables on top of each other. I grouped them in the stackpanel but when closing one on the top, others don't move up to fill the epty place. What am I missing here?
KRSKUTTY
Commented on 30.June 2009
Very Nice...
Patel Dishant
Commented on 1.July 2009
How To Put Image In WPF
SUMANTH
Commented on 13.August 2009
hi
can you plese tell me when the page is loaded the expander should be collapsed manner can you please tell me which property is to be set
Nikhil
Commented on 13.August 2009
Re:d72,

Don't specify any height and width for your expander. Rather specify height and width for contents inside your expander.

<StackPanel>
<Expander Header="Home" Name="expanderHome" Width="600" >
<Canvas Height="154" Width="490" >
// Other controls
</Canvas>
</Expander>
// Your other expanders
</StackPanel>

Hope this helps.

Regards,
Nikhil.
C.Mallikarjuna
Commented on 23.September 2009
very nice but i want to know how and where collapse, Expand is to be implemented for Expander control.
ibrar shah
Commented on 21.December 2009
Nice begening help
T Mannino
Commented on 20.January 2010
I have a question. I have a expander working with my RSS feeds. What I want to do is it I expand an item I want the currently expanded item to collapse. How do I do that?
Will
Commented on 8.February 2010
I have similar requirement as T Mannino, is there anyone know if there's an existing control with this behavior? or i need to create a new one?
Christian Moser
Commented on 8.February 2010
Hi Will,
you can use an ItemsControl in combination with an DataTemplate to render a dynamic list of items. The data template defines the visual appearance of one entry. By encapsulating a ContentPresenter into an Expander you should get the behavior you're requesting for.

I hope this helps
Christian
me
Commented on 19.February 2010
fuck your ass your son of a bitch!!!!!!!!!!!! and remove this horrible pic of the site...
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