State Triggers

A collection of custom visual State Triggers.

Trigger Purpose
CompareStateTrigger Enables a state if the value is equal to, greater than, or less than another value
ControlSizeTrigger Enables a state if the target control meets the specified size
FullScreenModeStateTrigger Trigger for switching when in full screen mode
IsEqualStateTrigger Enables a state if the value is equal to another value
IsNotEqualStateTrigger Enables a state if the value is not equal to another value
IsNullOrEmptyStateTrigger Enables a state if an Object is null or a String/IEnumerable is empty
NetworkConnectionStateTrigger Trigger for switching when the network availability changes
RegexStateTrigger Enables a state if the regex expression is true for a given string value
UserHandPreferenceStateTrigger Trigger for switching UI based on whether the user favors their left or right hand
UserInteractionModeStateTrigger Trigger for switching when the User interaction mode changes (tablet mode)

CompareStateTrigger Example

<VisualState.StateTriggers>
    <triggers:CompareStateTrigger Value="{Binding Value,ElementName=Slider, Mode=OneWay}" Comparison="LessThanOrEqual" To="3"/>
</VisualState.StateTriggers>

ControlSizeTrigger Example

<VisualState.StateTriggers>
    <triggers:ControlSizeTrigger TargetElement="{x:Bind ParentGrid}" MinWidth="400" MaxWidth="500" MinHeight="50" MaxHeight="100"/>
</VisualState.StateTriggers>

FullScreenModeStateTrigger Example

<VisualState.StateTriggers>
    <triggers:FullScreenModeStateTrigger IsFullScreen="true" />
</VisualState.StateTriggers>

IsEqualStateTrigger Example

<VisualState.StateTriggers>
    <triggers:IsEqualStateTrigger Value="{Binding IsChecked, ElementName=checkbox, Mode=OneWay}" To="{x:Null}" />
</VisualState.StateTriggers>

IsNotEqualStateTrigger Example

<VisualState.StateTriggers>
    <triggers:IsNotEqualStateTrigger Value="{Binding IsChecked, ElementName=checkbox, Mode=OneWay}" To="{x:Null}" />
</VisualState.StateTriggers>

IsNullOrEmptyStateTrigger Example

<VisualState.StateTriggers>
    <triggers:IsNullOrEmptyStateTrigger Value="{Binding Text, ElementName=OurTextBox, Mode=OneWay}"/>
</VisualState.StateTriggers>

NetworkConnectionStateTrigger Example

<VisualState.StateTriggers>
    <triggers:NetworkConnectionStateTrigger ConnectionState="Connected" />
</VisualState.StateTriggers>

RegexStateTrigger Example

<VisualState.StateTriggers>
    <triggers:RegexStateTrigger Value="{Binding Text, ElementName=emailTextBox, Mode=OneWay}"
                                                  Expression="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$"
                                                  Options="IgnoreCase" />
</VisualState.StateTriggers>

UserHandPreferenceStateTrigger Example

<VisualState.StateTriggers>
    <triggers:UserHandPreferenceStateTrigger HandPreference="LeftHanded" />
</VisualState.StateTriggers>

UserInteractionModeStateTrigger Example

<VisualState.StateTriggers>
    <triggers:UserInteractionModeStateTrigger InteractionMode="Mouse" />
</VisualState.StateTriggers>

Sample Project

Triggers sample page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Triggers
NuGet package Microsoft.Toolkit.Uwp.UI

API

  • Last updated on