The Accordion control also supports the HeaderTemplate and
ContentTemplate properties. These templates generate AccordionItem objects
based upon some underlying data source. The HeaderTemplate and ContentTemplate
uses a DataTemplate object to provide the UI for each item. Anything can be
within the template to display data about the underlying data. Below is an
example layout, shown below.
Listing 2: Binding Content to the Accordion
<Accordion>
<Accordion.HeaderTemplate>
<DataTemplate>
<WrapPanel>
<Label Content="{Binding Title}" />
</WrapPanel>
</DataTemplate>
</Accordion.HeaderTemplate>
<Accordion.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Abstract}" />
<TextBlock Text="{Binding Description}" />
</StackPanel>
</DataTemplate>
</Accordion.ContentTemplate>
</Accordion>
In this scenario, the HeaderTemplate and ContentTemplate
present simplistic templates for the accordion. The header displays the title,
and the content displays an abstract and description. These values must match
an object that's bound to it, such as the following:
Listing 3: Object Bound to Accordion
public class Article
{
public string Title { get; set; }
public string Abstract { get; set; }
public string Description { get; set; }
}
At runtime, each Article object that's in a list, bound to
the Accordion, gets an AccordionItem that represents it. The Accordion's
Header/Content template represents the header content of the AccordionItem that
represents it. So if 4 Article objects in a list get bound to the Accordion,
that Accordion will have 4 AccordionItem objects, of which only one can be
visible at a time.