Skip to content

Latest commit

 

History

History
78 lines (58 loc) · 4.05 KB

adaptivetrigger.md

File metadata and controls

78 lines (58 loc) · 4.05 KB
-api-id -api-type
T:Windows.UI.Xaml.AdaptiveTrigger
winrt class

Windows.UI.Xaml.AdaptiveTrigger

-description

Represents a declarative rule that applies visual states based on window properties.

-xaml-syntax

<AdaptiveTrigger .../>

-remarks

Use AdaptiveTriggers to create rules that automatically trigger a VisualState change when the window is a specified height or width. When you use AdaptiveTriggers in your XAML markup, you don't need to handle the Window.SizeChanged event and call VisualStateManager.GoToState in your code. Also, when you use AdaptiveTriggers in your VisualStateManager, you can see the effects of these adaptive changes directly on the XAML design surface in Microsoft Visual Studio.

You can use the MinWindowWidth and MinWindowHeight properties either independently or in conjunction with each other. This XAML shows an example of using both properties together. The trigger indicates that the corresponding VisualState is to be applied when the current window width is >= 720 effective pixels AND the current window height is >= 900 effective pixels.

<AdaptiveTrigger MinWindowWidth="720" MinWindowHeight="900"/>

-examples

Tip

For more info, design guidance, and code examples, see Responsive layouts with XAML.

If you have the WinUI 2 Gallery app installed, open the app to see the controls in action.

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>

For a more detailed sample, see the State triggers sample.

-see-also

VisualState, StateTriggerBase, VisualState.StateTriggers, Responsive layouts with XAML