Silverlight Toolkit - Accordian - Styling the Header

Question

Hello,

I am using the Accordian in the Silverlight toolkit.

I want to style the Accoridan item header (I don't like the default baby blue). But I can't seem to figure it out. Blend won't let me load it up either. Can someone show some sample code of an Accordian Item with just a basic green background?

Thank you!

Answer 1

Unfortunately as with many controls both Toolkit and otherwise there often many different places where color is used other than simply Foreground and Background. These colors are "hardcoded" into the Templates of the controls. This requires that you supply a new template to the control in order to modify these colors.

You need fo clone the existing AccordianButton template, either using Blend if you have it or you'll find in the source code here

Silverlight3\Source\Controls.Layout.Toolkit\Accordion\AccordionButton.xaml

So you basically have in your application a resource dictionary containing this style:-

<Style x:Key="MyAccordionButtonStyle" TargetType="layoutPrimitivesToolkit:AccordionButton">
   <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="layoutPrimitivesToolkit:AccordionButton">
          <!-- Adjusted Clone of template here -->
        </ControlTemplate>
      </Setter.Value>
   </Setter>
 </Style>

The parts of the template you would want to tweak are the two Border element named "ExpandedBackground" and "MouseOverBackground". These have hardcoded Background values that you will want to modify. You may also want to look at the Stroke property on the "FocusVisualElement" Rectangle.