# Styling Expander

Expander for WPF control provides many different options to style the UI of the control. Learn more about styling in WPF Layout Controls documentation.

## Content



Expander provides various options to style the UI of the Expander control. The C1Expander class provides several properties such as [HeaderStyle](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.C1Expander.HeaderStyle.html) and [ExpandIconStyle](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.C1Expander.ExpandIconStyle.html), which offers different ways of styling all the elements of the Expander control, such as header, expand icon, and content area.

![Expander control with styles set on header and expand icon](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/expander-styling.png)

The following code demonstrates the use of the available styling properties in the C1Expander class to change the appearance of the Expander control:

```xml
<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>
      <!--Header style-->
      <c1:C1Expander.HeaderStyle>
          <Style TargetType="ContentControl">
              <Setter Property="Foreground" Value="Purple"></Setter>
              <Setter Property="FontWeight" Value="Bold"></Setter>
              <Setter Property="FontFamily" Value="segoe ui"></Setter>
          </Style>
      </c1:C1Expander.HeaderStyle>
      <!--Expander icon style-->
      <c1:C1Expander.ExpandIconStyle>
          <Style TargetType="ContentControl">
              <Setter Property="Height" Value="17"></Setter>
              <Setter Property="Width" Value="17"></Setter>
              <Setter Property="Foreground" Value="Blue"></Setter>
          </Style>
      </c1:C1Expander.ExpandIconStyle>
      <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>
```