A style variant defines changes to be made to a style based on certain parameters. The current style for an element is determined by its Style State Machine, which can be overridden to define custom logic.

<Default>
    <SliceFrame Image="Pane" NineSlice="Thirds, 101" Colour="$MainColour" Tint="$MainTint" ShadowOffset="-5, 5"/>
    <Font Font="Default" Colour="#BBB" ShadowOffset="-1"/>

    <Hovered>
        <SliceFrame Tint="#FFF"/>
        <Font Colour="#DDD"/>
    </Hovered>
    <Clicked>
        <Font Colour="#999" Offset="0, 2"/>
    </Clicked>
    <Disabled>
        <SliceFrame Tint="#222"/>
    </Disabled>
</Default>

Any attributes added to the base of the style are part of the default variant. All other variants use the default variant as a base and override any attributes and properties.

The StyleVariant class simply acts as a collection of IStyleAttribute references and provides functions to easily access this data. It also defines functions to combine over other StyleVariant instances to modify the base variant.

• Default. This is the default variant of the style, using the attributes loaded from child nodes with no children.
• Hovered. This is the variant used when the element has a Mouse Handler component and the user hovers over the element.
• Clicked. This is the variant used when the element has a Mouse Handler component and the user clicks the element.
• Disabled. This is the variant used when the element's Enabled property is false.