Adaptive trigger in a Scrollviewer does not work

Question

I use an Adaptive trigger to fit the content of my UWP Application to the window size. If the window witdh is smaller than 1000px, all of the three rectangles will be stacked. If not, the first two rectangles will be side by side and the third one will fill the whole window width beneath the two first rectangles.

<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
    <Grid  Margin="10,0,10,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1000" />
                        </VisualState.StateTriggers>

                        <VisualState.Setters>
                            <Setter Target="Rect2.(Grid.Row)" Value="0" />
                            <Setter Target="Rect2.(Grid.Column)" Value="1" />
                            <Setter Target="Rect2.(Grid.ColumnSpan)" Value="1"/>
                            <Setter Target="Rect1.(Grid.ColumnSpan)" Value="1"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <Rectangle Name="Rect1" Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0"  Margin="10" Height="170" Fill="Red"/>
            <Rectangle Name="Rect2" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0"  Margin="10" Height="170" Fill="Green"/>
            <Rectangle Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" Height="400" Margin="10" Fill="Yellow"/>
        </Grid>
</ScrollViewer>

But the Adaptive trigger only works if I remove the ScrollViewer around the Grid. The HorizontalScrollMode of the ScrollViewer is already disabled but it still doesn't work: All rectangles are stacked and changing the window width has no effect.

Is there a way to get this working with the ScrollViewer?

Answer 1

You have to set the setters in the first control of the XAML, if you change the first the Grid to the ScrollViewer, you have to set the setters before the Grid:

<ScrollViewer...>
 <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1000" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Rect2.(Grid.Row)" Value="0" />
                        <Setter Target="Rect2.(Grid.Column)" Value="1" />
                        <Setter Target="Rect2.(Grid.ColumnSpan)" Value="1"/>
                        <Setter Target="Rect1.(Grid.ColumnSpan)" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    <Grid>...</Grid>
</ScrollViewer>