How to style header of an Expander control in WPF

You may format the default Expander to give it's header a different view (font style, name, weight etc) and then style its contents differently to give the header a different look than the contents.

The following XAML code styles Expander header with font size 20 and foreground color green while the contents are black with font size 14.

<Window x:Class="ExpanderControlSample.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="300" Width="300">

<Grid>

<Expander Name="ExpanderControl" Background="LavenderBlush"

HorizontalAlignment="Left" Header="Click to Expand"

ExpandDirection="Down" IsExpanded="False" Width="200"

FontSize="20" FontWeight="Bold" Foreground="Green">

This is an Expander control. Within this control, all contents will be wrapped.

At run-time, you may expand or collapse this control. Type more text here to be typed.

Jump around and hype.

</TextBlock>

</Expander>

</Grid>

</Window>