How to display an image in Expander Header in WPF

Expander.Header property may be used to style the header of an Expander control. Within the Header, you can set whatever contents you would like including an Image.

This code adds in image and text in the header of an Expander.

<Expander Name="ExpanderControl"

  HorizontalAlignment="Left" Background="LavenderBlush"

  ExpandDirection="Down"  IsExpanded="False" Width="250"

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

    <Expander.Header>

        <BulletDecorator>

            <BulletDecorator.Bullet>

                <Image Width="50" Source="Flowers.jpg"/>

            </BulletDecorator.Bullet>

            <TextBlock Margin="20,0,0,0">Flower Header</TextBlock>

        </BulletDecorator>

    </Expander.Header>

 

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