Question

I am trying to create an accordion style menu in WPF using Expanders and StackPanels.

I would like to be able to click on the Expander Header and show the StackPanel without showing the Arrow. This is working when I click on the Arrow, however I would like to remove the Arrow.

When I remove the ‘Arrow’ properties from the Expander’s ToggleButton the ToggleButton is a small area below the Content Presenter difficult for the user to click.

Is there a way to make the entire Header of the Expander (including the Text) be the ToggleButton?

In the Expander’s template I have the following:

<ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                              OverridesDefaultStyle="True"  Template="{StaticResource ExpanderToggleButton}" Background="{StaticResource NormalBrush}" 
                                              Height="25">
                                </ToggleButton>
                                <ContentPresenter Margin="4" ContentSource="Header" RecognizesAccessKey="True" />

and in ‘ExpanderToggleButton’:

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
        <Border Name="Border" CornerRadius="2,0,0,0" Background="Transparent" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0">
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                <Setter TargetName="Border" Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Answer 1

Specify the header template separately like;

<Expander>
  <Expander.Header>
    .... (This is where your toggle button currently sits any way in a default template)
  </Expander.Header>
  <Expander.Content>
    ....
  </Expander.Content>
</Expander>

This way your header template should receive the Mouse Down event the same as your toggle button would and it applies over the content shown in your header.