By default, the header element of the Expander control appears at the top of the control and the expander button appears on the right side of the header. The header element contains no text initially. However, you can add text to it using Header property of the C1Expander class.

To add text to the header element, you simply need to set the Header property to a string, say Expand Me!, as illustrated in the following example. Once the text is added, you can style it using several font properties available by default.

<c1:C1Expander x:Name="ExpanderControl" Header="Expand Me!" FontFamily="Cambria"
    FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"></c1:C1Expander>

ExpanderControl.Header = "Expand Me!";

Customizing Header

In addition to adding text to the header element, Expander allows you to change the appearance of the header. It lets you change the template of the expander header using HeaderTemplate property of the C1Expander class. The HeaderTemplate property sets the template for the header by accessing the DataTemplate class:

The following code demonstrates how you can set a header template for the Expander control:

<c1:C1Expander x:Name="ExpanderControl" Height="140" Width="300" Margin="40">
       <!--Header Template-->
       <c1:C1Expander.HeaderTemplate>
           <DataTemplate>
               <StackPanel Orientation="Horizontal">
                   <TextBlock VerticalAlignment="Center" FontWeight="Bold">Australian Cuisine</TextBlock>
                   <Image Margin="5, 0" Source="Images/australia.png" Height="20" Width="20"></Image>
               </StackPanel>
           </DataTemplate>
       </c1:C1Expander.HeaderTemplate>
       <ListBox>
           <ListBoxItem Content="Macadamia nuts"></ListBoxItem>
           <ListBoxItem Content="Salt and pepper calamari"></ListBoxItem>
           <ListBoxItem Content="Iced VoVo"></ListBoxItem>
           <ListBoxItem Content="Pavlova"></ListBoxItem>
       </ListBox>
</c1:C1Expander>