Question

I am using Accordion from WPFToolkit and wanted to remove the accordion item arrow also when i am trying to edit it in Expression Blend4 then it does not allow me over there. So if anybody can help with a sample template how can i hide the arrow and the default blue background.

Thanks in advance.

Answer 1

You can just edit the control style. This example is from Silverlight toolkit, but I’d bet its all the same principals.

1) Remove Arrow

I have a file called toolkitStyles.xaml in which I have the following style defined.

<Style TargetType="layouttoolkit:AccordionButton" x:Key="DefaultAccordionButtonStyle">

Inside this style (you will have to hunt for it), you’ll find code similar to this

<Path x:Name="arrow" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " HorizontalAlignment="Center" Height="5" Stretch="Uniform" Width="8" Fill="{StaticResource BlackBrush}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center">

Comment it out, and then to a search on the x:Name (it might not be “arrow” in the WPFToolkit) and remove anything that references it so that you can build it.

2) Remove blue background

Find the style like

<Style TargetType="System_Windows_Controls:AccordionItem" x:Key="DefaultAccordionItemStyle">

Find the line like this. It is probably near the bottom of the style.
(Please note in mine I have already set Background=”Transparent”, yours will either be blue or a templatebinding, either way just set it to transparent or whatever color you want it)

<layouttoolkit:AccordionButton x:Name="ExpanderButton" Background="Transparent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsChecked="{TemplateBinding IsSelected}" Margin="0,0,0,0" Padding="0,0,0,0" Grid.Row="0" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>