Expander header styling

[MrHaribo]

We want to change the header style of the Expander control. We followed this example to override the MaterialDesign style:
https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Overriding-Material-Design-Styles

Unfortunately this does not work for the header. Overriding the style for the whole expander works but not for the header only. What am i missing?

MaterialDesignThemes.Overrides.xaml

<!--This does NOT work-->
<Style BasedOn="{StaticResource MaterialDesignHorizontalHeaderStyle}" TargetType="{x:Type ToggleButton}">
    <Setter Property="Foreground" Value="Aqua"/>
</Style>

<!--This works-->
<Style BasedOn="{StaticResource MaterialDesignExpander}" TargetType="{x:Type Expander}">
    <Setter Property="Foreground" Value="Red"/>
</Style>

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="/Themes/MaterialDesignThemes.Overrides.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

MainWindow.xaml

<Window.Resources>
    <Style x:Key="HorizontalExpanderContentTextBlock" TargetType="{x:Type TextBlock}">
        <Setter Property="Opacity" Value=".68" />
        <Setter Property="Text" Value="Lorem ipsum dolor..." />
        <Setter Property="TextWrapping" Value="Wrap" />
    </Style>
</Window.Resources>

<StackPanel>
    <materialDesign:Card>
        <StackPanel>
            <Expander HorizontalAlignment="Stretch"
                      Header="Expander Example 2c">
                <StackPanel Margin="24,8,24,16"
                            Orientation="Vertical"
                            TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
                    <TextBlock Text="Your Content" />
                    <TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
                </StackPanel>
            </Expander>
        </StackPanel>
    </materialDesign:Card>
</StackPanel>

[nicolaihenriksen]

@MrHaribo So there are a couple of issues here. I'll try to break it down.

You are missing an explicit key on the Style based on the MaterialDesignHorizontalHeaderStyle. It should be defined with an x:Key (explicit key) like it is in MaterialDesignTheme.Expander.xaml:

<!--This does NOT work-->
<Style x:Key="MaterialDesignHorizontalHeaderStyle"
       BasedOn="{StaticResource MaterialDesignHorizontalHeaderStyle}"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Foreground" Value="Aqua"/>
</Style>

However, even with that in place it still does not work. To my knowledge, you cannot "hijack" just the MaterialDesignHorizontalHeaderStyle style in this manner because of the way WPF looks up resources. Since the original style resides in the same ResourceDictionary as the MaterialDesignExpander style, I don't know of a good way to override it without also overriding the MaterialDesignExpander style itself. Perhaps @Keboo has a trick up his sleeve??

Accomplishing what you want will require you to essentially override the style for the MaterialDesignExpander (like you do in your example; the Foreground setter is not needed though), but you need to copy-paste the <Setter Property="Template"> element. There is no way to only override parts of a ControlTemplate so you need to grab it all 😞. If you have both these overrides defined in MaterialDesignThemes.Overrides.xaml, then you can effectively adjust the MaterialDesignHorizontalHeaderStyle style to your needs.

One last issue with the sample you provide is that you set the Foreground property in the overridden MaterialDesignHorizontalHeaderStyle style. However, this will never have an effect, because there is an explicit Foreground assignment directly on the HeaderSite element in the ControlTemplate: see here. Many other properties are also explicitly set here, so that will limit the number of properties you can manipulate directly in the overridden style; keep that in mind.

I guess, depending on what you're trying to accomplish, you probably need to override both styles and adjust (them both) to your needs. I hope this helps to explain the problem.

[MrHaribo]

Thank you @nicolaihenriksen for your comprehensive answer.

Actually the Foreground property was just an example on how we cant to customize the MaterialDesignHorizontalHeaderStyle . What we really want is to change the Template of that style to change the position of the arrow and add some extra buttons.

Copying the templates is what we are actually doing in other places of our program. I was hoping that there was a cleaner way of accomplishing partial customization but in this case we have to go all the way through a copy the template which is almost the whole style.

Thanks for you explanations - you literally learn something new about WPF every day :)