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">

            <TextBlock TextWrapping="Wrap" FontSize="14" FontWeight="Light" Foreground="Black">

                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>