Accordion is a fun control with a lot of properties and options. I had great fun building it and I hope you will have great fun while using it. This post gives an overview of the control. Next parts will look into other controls that are used with Accordion.

You can see a live demo here, or go to our sample browser (SL2, SL3) to play around with the control. I have a little ‘studio’ there, that will allow you to set some options and see how the control behaves.

The Accordion shown in the picture above is build like this:

  1     <layoutToolkit:Accordion x:Name="acc" Grid.Column="0" >

  2       <layoutToolkit:AccordionItem Content="item 1" Header="A"  />

  3       <layoutToolkit:AccordionItem Content="item 2" Header="B -  long header" />

  4       <system:String>regular string item 3</system:String>

  5     </layoutToolkit:Accordion>

As you can see, three items are added. The first two are AccordionItems, allowing us to set a header and content. The last one is a String, which Accordion will wrap in an AccordionItem behind the scenes.

Accordion

Accordion can be best described as an ItemsControl that displays Expanders. The items shown are actually of type AccordionItem and can expand or collapse.
We use the paradigm of Selection, instead of Expanding/Collapsing, so from now on you will here me talk about a selected AccordionItem, which amounts to an expanded AccordionItem.

The Accordion class manages these AccordionItems and is responsible for the following:

• Easily styling the AccordionItems (ItemContainerStyle)
• Setting a default ContentTemplate and HeaderTemplate
• Setting the ExpandDirection
• Single select and multi select. Actually, Accordion allows a couple of SelectionModes that I will talk about
• Managing a SelectedItem and SelectedIndex
• Managing SelectedItems and SelectedIndices
• Scheduling when a selected item is expanded or contracted (!)

Accordion manages AccordionItems just as ListBox would be managing ListBoxItems. Let’s first look at the concepts that you know from other ItemControls and see how Accordion handles them.

ItemTemplate versus ContentTemplate and HeaderTemplate

When an item is added to an ItemsControl, Accordion will check if it is already an instance of type AccordionItem. If it is not, the item will be wrapped inside an AccordionItem.
You might expect to be able to define how your item will look with an ItemTemplate, but that does not make that much sense, given that we expect you to want to set a header and a content separately.

Instead, Accordion exposes a ContentTemplate and HeaderTemplate DP. There is some talk to drop the ContentTemplate and just use the ItemTemplate for it, let me know what your thoughts on that are.

I do make sure that both Content and Header datacontext is set appropriately, so you might do something like this:

        <layoutToolkit:Accordion>

          <layoutToolkit:Accordion.ContentTemplate>

            <DataTemplate>

              <StackPanel Orientation="Horizontal">

                <TextBlock Text="Content:" />

                <TextBlock Text="{Binding}" />

              </StackPanel>

            </DataTemplate>

          </layoutToolkit:Accordion.ContentTemplate>

          

          <layoutToolkit:Accordion.HeaderTemplate>

            <DataTemplate>

              <StackPanel Orientation="Horizontal">

                <TextBlock Text="Header:" />

                <TextBlock Text="{Binding}" />

              </StackPanel>

            </DataTemplate>

          </layoutToolkit:Accordion.HeaderTemplate>

          

          <System:String>hello</System:String>

          <System:String>world</System:String>

        </layoutToolkit:Accordion>

You would end up with an accordion that looks like:

In my opinion there are two main scenario’s to use an itemscontrol like Accordion:

1. Bind to businessobjects: use ContentTemplate and HeaderTemplate to determine what is shown
2. Set items inline: use AccordionItem directly.

Selection

An Accordion allows for the following SelectionModes: One, OneOrMore, ZeroOrOne and ZeroOrMore.

Since there can be more than 1 item selected, Accordion supplies a few properties (and events to match) to let you know what’s up:

• SelectedItem: The selected item. If Accordion allows multiple items, this property will have the last selected item
• SelectedIndex: The index of the selected item. This is necessary because you could have multiple AccordionItems based on the same item.
• SelectedItems: A collection of all the items that are selected.
• SelectedIndices: A collection of indexes.

By setting a SelectionMode, the behavior of Accordion is changed quite profoundly. When SelectionMode One or OneOrMore is chosen, Accordion will always make sure there is at least one AccordionItem selected. It does so by making it impossible to unselect an item if it is the last one selected. If no item is selected when the mode is set to One*, the first item in the list will be auto-selected.

ExpandDirection

You can specify in which direction the Accordion should open by setting an ExpandDirection (Left, Right, Up, Down). I’ll go in-depth in how you can template your AccordionItems appropriately. In the default template there is a little funky arrow that points to the content, that arrow is repositioned according to the ExpandDirection.

SelectionSequence

When the user selects an item, Accordion might have unselect another item (in the ZeroOrOne or One modes). The de-selection will happen immediate, however, Accordion gives you the option to influence when the actual animations happen. The SelectionSequence property takes values of 'CollapseBeforeExpand’ and ‘Simultaneous’.

The CollapseBeforeExpand mode will actually schedule collapse animations before expands. The effect is quite nice.

Please let us know if you are interested in different scheduling schema’s. I can for instance think of an Accordion that starts the next animation when it is halfway through the first one. Not sure if it looks good though!

The big one: Layout

Accordion will behave completely different when it has a fixed size versus no size. In the first case, the items will share all the space amongst each other that the parent has. In the latter, each item will take the space it desires.

I will revisit the layout topic more in-depth, because there are a few intricacies in how it works.

--------

Next parts will look at AccordionItem, ExpandableContentControl and LayoutTransformer.