WPF Layout Controls | ComponentOne
WPF Layout Controls / Expander / Expand Icon
In This Topic
    Expand Icon
    In This Topic

    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 property of the C1Expander class. The ExpandIconAlignment property accepts the alignment value from the ExpandIconAlignment enumeration.

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

    <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>
    
    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 property of the C1Expander class. The ExpandIconTemplate property sets the template for the expand icon by accessing the C1IconTemplate class:

    <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>
    
    ExpanderControl.ExpandIconTemplate = C1IconTemplate.TriangleDown;