# Expand Icon

Expander is an expandable and collapsible information panel that can include text, images, and controls. Learn more about it in Expander for WPF documentation.

## Content

Expand Icon appears next to the header of the Expander control and is clicked to expand the content area. By default, the expand icon is aligned on the right side of the header. However, you can change the alignment of the expand icon as per your requirements using [ExpandIconAlignment](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.C1Expander.ExpandIconAlignment.html) property of the [C1Expander](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.C1Expander.html) class. The **ExpandIconAlignment** property accepts the alignment value from the [ExpandIconAlignment](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.ExpanderIconAlignment.html) enumeration.

![](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/expander-expandicon-alignment.png)

The following code shows how you can change the alignment of the expand icon to left:

```xml
<c1:C1Expander x:Name="ExpanderControl" Header="Expand Me!" ExpandIconAlignment="Left" FontFamily="Cambria" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center">
        <CheckBox Margin="10" VerticalAlignment="Center" x:Name="Condition" Content="CheckBox Inside Expander"/>
</c1:C1Expander>
```

```csharp
ExpanderControl.ExpandIconAlignment = C1.WPF.Accordion.ExpanderIconAlignment.Left;
```

## Customizing Expand Icon

In addition to changing the alignment, Expander allows you to change the appearance of the expand icon by changing the icon template. It lets you change the template of expand icon using [ExpandIconTemplate](/componentone/api/wpf/online-accordion5/dotnet-api/C1.WPF.Accordion/C1.WPF.Accordion.C1Expander.ExpandIconTemplate.html) property of the **C1Expander** class. The **ExpandIconTemplate** property sets the template for the expand icon by accessing the **C1IconTemplate** class:

![](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/expander-icon-template.png)

```xml
<c1:C1Expander x:Name="ExpanderControl" ExpandIconTemplate="{x:Static c1:C1IconTemplate.TriangleDown}" Header = "Expand Me!" FontFamily="Cambria" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center">
      <CheckBox Margin="10" VerticalAlignment="Center" x:Name="Condition" Content="CheckBox Inside Expander"/>
</c1:C1Expander>
```

```csharp
ExpanderControl.ExpandIconTemplate = C1IconTemplate.TriangleDown;
```