How to do I keep only 1 expander out of several, always open in a stackpanel? RRS feed

  • Question

  • I have a vertical stackpanel of a certain height. I have multiple expanders inside the stackpanel. To prevent the expanders going outside the bounds of my stackpanel I would like to keep only 1 expanded at any point. So, if I have 3 expanders, and I click on expander 2, I would like expanders 1,3 to be collapsed.

    I'm building a WPF application in Blend 3.

    I tried adding C# code to the Expanderx_Expanded event but as soon as I reference other expanders, the wpf app crashes.

    For example, if I have

    private void Expander1_Expanded((object sender, System.Windows.RoutedEventArgs e)


         If (Expander2.IsExpanded == true)    //this line causes a crash. If I reference Expander1 and do a dummy operation, things are ok


             Expander2.IsExpanded == false;




    I would appreciate example code on how to do this or a simple set of instructions.


    Friday, August 27, 2010 6:10 AM

All replies

  • Probably the easiest option would be to use the accordion control from the wpftoolkit. It does what I believe you are wanting automatically.

    Add a reference to

    \program files\wpftoolkit\{version}\System.Windows.Controls.Layout.Toolkit.dll

    Then you can use the accordion control.

    Friday, August 27, 2010 1:18 PM
  • Thanks Chuck

    That was definitely a step in the right direction for what I want to do. However, I've been having trouble customizing the control. I started a new wpf project, added an accordion item and added a few buttons to get started.

    The background of the accordion 'panel' seems to default to a bright blue - no obvious property to change that.

    I also want to customize the height of each of the headers as well as the icons in the headers (the arrows).

    I started doing this by right clicking my accordion item and tried to 'edit template'...Blend 3 crashed. I tried editing the 'item container style' in the 'edit additional template'. None of the components seem to have a bright blue background set and moving anything seems to crash blend.

    Any thoughts on why it's so hard to customize this? Or suggestions on how to change the bright blue and size of the header and icon?

    Friday, August 27, 2010 8:29 PM
  • BTW, Here is another thread with a similar problem - I tried the suggested solution and it seems to work quite well. I'm still ironing out my customizations but it doesn't crash like the accordion control.

    I do like the animation support in the accordion control - so it will be nice to figure out a way to also use that as an alternate.

    Friday, August 27, 2010 11:53 PM
  • I suppose it will help if I added a link to that thread :-)


    Friday, August 27, 2010 11:53 PM
  • To customize the template for an accordianitem, right click the accordianitem and select edit template -> edit a copy, once editing the template you can edit that background color, as well as anything else you want to change.
    Monday, August 30, 2010 1:34 PM
  • Chuck, if you see my first post you'll see that I already tried edit template->edit a copy...Blend crashes. Some choices in 'additional templates' but it's not obvious what to change - wish there was more documentation on this control.

    Anyways, I saw a post (link below) somewhere else that handles this in code by creating a custom control library that derives from a stack panel and handling the sizing of the expanders in code. Works for my needs.



    Wednesday, September 1, 2010 5:22 AM