Styling Expansion Indicators (xamTreeGrid)

Topic Overview

Purpose

This topic explains how to style the control’s expansion indicators.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
Features Overview (xamTreeGrid)	This topic explains the features supported by the control from developer perspective.
Visual Elements Overview (xamTreeGrid)	This topic provides an overview of the visual elements of the control.

In this topic

This topic contains the following sections:

Styling Expansion Indicators
Related Topics

Styling Expansion Indicators

Styling expansion indicators summary

The xamTreeGrid control’s expansion indicators can be styled by creating a custom style which targets the ExpansionIndicator type.

Configurable aspect	Details	Target Type
Styling Expansion Indicators	Set a custom template for changing the expansion indicator.	ExpansionIndicator

Code example

Following is the code that implements this example.

In XAML:

<Page
  …
  xmlns:igWindows="http://infragistics.com/Windows"
  …>
  <Page.Resources>
    <ResourceDictionary>
      <Style TargetType="{x:Type igWindows:ExpansionIndicator}">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type igWindows:ExpansionIndicator}">
              <Grid>
                <Path
                  x:Name="ArrowPath"
                  Width="10"
                  Height="10"
                  Stretch="Fill"
                  Stroke="#FF00FF00"
                  StrokeThickness="1"
                  Fill="{Binding RelativeSource={RelativeSource Self}, Path=Stroke, Mode=OneWay}"
                  Data="M8,5 L8,14 L14,9.5 z"
                  Visibility="Visible" />
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                  <Trigger.Setters>
                    <Setter TargetName="ArrowPath" Property="Stroke" Value="#FFFF0000" />
                    <Setter TargetName="ArrowPath" Property="RenderTransform">
                      <Setter.Value>
                        <RotateTransform CenterX="5" CenterY="5" Angle="90" />
                      </Setter.Value>
                    </Setter>
                  </Trigger.Setters>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                  <Trigger.Setters>
                    <Setter TargetName="ArrowPath" Property="Stroke" Value="#FFFFFF00"/>
                    <Setter TargetName="ArrowPath" Property="Cursor" Value="Hand"/>
                  </Trigger.Setters>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </ResourceDictionary>
  </Page.Resources>
  …
</Page>

The following screenshot depicts the result from the code above:

WPF | Help Topics