Question

I have a problem styling/templating an AccordionItem in the accordion control from the silverlight toolkit. For some reason, the child controls are Horizontally Aligned Left. The only way I can get to fix this is to edit the ExpandableContentControlStyle on the AccordionItem.

The style is located below:

<Style x:Key="ExpandableContentControlStyle1" TargetType="layoutPrimitivesToolkit:ExpandableContentControl">
  <Setter.Value>
     <ControlTemplate TargetType="layoutPrimitivesToolkit:ExpandableContentControl">
        <ContentPresenter x:Name="ContentSite" Cursor="{TemplateBinding Cursor}" Margin="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Stretch" />
     </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

Now my problem is that to have this style being attached to the AccordionItem, I have to set it:

<layoutToolkit:Accordion HorizontalAlignment="Stretch">
   <layoutToolkit:AccordionItem Header="Hello" BorderBrush="{x:Null}" ExpandableContentControlStyle="{StaticResource ExpandableContentControlStyle1}"/>
   <layoutToolkit:AccordionItem Header="Haha" BorderBrush="{x:Null}"/>
</layoutToolkit:Accordion>

But those AccordionItem will be generated from an ItemSource. What I’d like to do is to have that style be applied to the generated AccordionItem without setting it.

PS. The above problem can become obsolete if I can just find out how to edit the (ContentPresenter x:Name=”ContentSite”) from the parent Accordion. I cannot edit it from none of the following template properties:

1. ContentTemplate
2. ItemContainerStyle
3. AccordionButtonStyle
4. ItemsPanel
5. ItemTemplate

If anyone knows what is going on with that, I’d appreciate the help or you can just help with styling of multiple elements.

Answer 1

I haven’t used the Accordion control myself, though typically you set the ItemContainerStyle to the style you want for each item in the list. For instance, if you wanted a specific ListBoxItem style on a ListBox, you set the ItemContainerStyle to the ListBoxItem style you want. I glanced at the source for the Accordion and this seems to hold true for that control as well. Try setting the ItemContainerStyle property of the Accordion to your ExpandableContentControlStyle1.

<layoutToolkit:Accordion
    HorizontalAlignment="Stretch"
    ItemContainerStyle="{StaticResource ExpandableContentControlStyle1}">
</layoutToolkit:Accordion>

To set the style outside of the control itself, create a style for the Accordion. If you’re using Silverlight 4, you can use implicit styles. Put the following style in the <UserControl.Resources> section of your page.

<Style TargetType="layoutToolkit:Accordion">
  <Setter Property="ItemContainerStyle" Value="{StaticResource ExpandableContentControlStyle1}"/>
</Style>

Otherwise, with Silverlight 3 you’ll have to explicitly give the style a Key and explicitly set the style on the Accordion control.

<Style x:Key="Control_Accordion" TargetType="layoutToolkit:Accordion">
    <Setter Property="ItemContainerStyle" Value="{StaticResource ExpandableContentControlStyle1}"/>
</Style>

<layoutToolkit:Accordion
    Style="{StaticResource Control_Accordion}"
    HorizontalAlignment="Stretch">
</layoutToolkit:Accordion>