VisualState.StateTriggers Property

Definition

Namespace:

Microsoft.UI.Xaml

Gets a collection of StateTriggerBase objects that indicate when this VisualState should be applied. If any (not all) of the triggers are active, the VisualState will be applied.

public:
 property IVector<StateTriggerBase ^> ^ StateTriggers { IVector<StateTriggerBase ^> ^ get(); };

IVector<StateTriggerBase> StateTriggers();

public IList<StateTriggerBase> StateTriggers { get; }

var iVector = visualState.stateTriggers;

Public ReadOnly Property StateTriggers As IList(Of StateTriggerBase)

Property Value

IVector<StateTriggerBase>

IList<StateTriggerBase>

A collection of StateTriggerBase objects. The default is an empty collection.

Examples

This example shows how to use the StateTriggers property with an AdaptiveTrigger to create a declarative rule in XAML markup based on window size. By default, the StackPanel orientation is Vertical. When the window width is >= 720 effective pixels, the VisualState change is triggered, and the StackPanel orientation is changed to Horizontal.

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                    <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock Text="This is a block of text. It is text block 1. " 
                       Style="{ThemeResource BodyTextBlockStyle}"/>
            <TextBlock Text="This is a block of text. It is text block 2. " 
                       Style="{ThemeResource BodyTextBlockStyle}"/>
            <TextBlock Text="This is a block of text. It is text block 3. " 
                       Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

Remarks

Use this property to create rules in XAML that specify when a particular VisualState is to be applied. You use StateTriggers directly in your XAML markup instead of calling VisualStateManager.GoToState in your code.

You can use the built-in AdaptiveTrigger to create rules based on window size, which is useful for creating responsive UI. You can also extend StateTriggerBase to create your own custom triggers and use them within the StateTriggers property.

For more examples, see the XAML Responsive Techniques sample and the State Triggers sample.

See also

• AdaptiveTrigger
• StateTriggerBase
• XAML Responsive Techniques sample
• State Triggers sample