.NET MAUI › Styling, Resources & Themes

What is the VisualStateManager and how do you use it?

Advanced

Answer

VisualStateManager (VSM) defines named visual states (Normal, Focused, Disabled, PointerOver, or custom) with setters applied when the state is active. Controls change state automatically (CommonStates) or you set states in code. It centralizes state-based styling without triggers.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="Disabled">
            <VisualState.Setters>
                <Setter Property="Opacity" Value="0.4" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Real-world example Disabled buttons dim automatically through a Disabled visual state instead of manual opacity toggling in code.

Common follow-ups: How do custom states get triggered? | VSM vs triggers?

VisualStateManager Styling Styling Resources & Themes