Skip to content

Latest commit

 

History

History
64 lines (47 loc) · 3.5 KB

visualstate_statetriggers.md

File metadata and controls

64 lines (47 loc) · 3.5 KB
Raw
-api-id -api-type
P:Microsoft.UI.Xaml.VisualState.StateTriggers
winrt property

Microsoft.UI.Xaml.VisualState.StateTriggers

-description

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.

-property-value

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

-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.

-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>

-see-also

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