Composite Application Guidance for WPF & SL • p&p • Patterns & Practices • Prism-v2 • Prism-v2.1 • Silverlight • Silverlight 3 • UI Composition

Prism v2.1: Creating a Region Adapter for the Accordion control

Today with Guido Maliandi, we set to find a way to use the Accordion from the Silverlight toolkit as region in a Prism application. As the Accordion inherits from ItemsControl, Prism already provided some functionality to get that control working as a region. However, we wanted it to have the following behavior:

  • Only one view in the accordion region should be active at a time.
  • It should be possible to set the header for each AccordionItem.
  • It should be easy to extend with other required functionality.

If you are familiar with Prism's source code, you might probably notice that is quite similar to the way Prism handles Silverlight's TabControl as a region. Our approach was creating two classes:

  • AccordionRegionAdapter: This class would be in charge of creating the region and hooking it up with the control.
  • AccordionRegionSyncBehavior: This class would provide the region's functionality.

Any other functionality that was necessary could be added through other RegionBehaviors. This document from the Prism documentation explains the usual process of creating a custom Region Adapter.

As the code for both those classes is quite long, I decided to simply provide the download at the bottom of this post.

Setting the AccordionItem's Header Text

As it can be done with the TabControl region, the following syntax can be used to show some text in the header of each AccordionItem (in this case the View's DataContext is simply a string). The outcome can be seen in the picture placed after the code.

<tk:Accordion Name="MainRegion" Regions:RegionManager.RegionName="MainRegion">
  <shell:AccordionRegionAdapter.ItemContainerStyle>
    <Style TargetType="tk:AccordionItem">
      <Setter Property="HeaderTemplate">
        <Setter.Value>
          <DataTemplate>
            <TextBlock Text="{Binding}"/>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </shell:AccordionRegionAdapter.ItemContainerStyle>
</tk:Accordion>
Sample Application

image

I created a small sample application which shows this scenario working. You can download it from here. The code is provided "AS IS" with no warranties and confers no rights.

I hope you can make good use of it.