Scrollviewer 中的自适应触发器不起作用答案

【问题标题】：Adaptive trigger in a Scrollviewer does not workScrollviewer 中的自适应触发器不起作用
【发布时间】：2015-12-20 23:16:50
【问题描述】：

我使用自适应触发器使我的 UWP 应用程序的内容适合窗口大小。如果窗口宽度小于 1000px，则三个矩形都将被堆叠。如果不是，前两个矩形将并排，第三个将填充前两个矩形下方的整个窗口宽度。

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

但只有当我删除 Grid 周围的 ScrollViewer 时，自适应触发器才有效。 ScrollViewer 的 HorizontalScrollMode 已经被禁用，但它仍然不起作用：所有矩形都堆叠在一起，更改窗口宽度没有效果。

有没有办法通过ScrollViewer 来解决这个问题？

【问题讨论】：

请在问题中更清楚地解释实际和预期的输出。
我已经完善了我的问题。感谢您的提示！

标签： xaml uwp

【解决方案1】：

您必须在 XAML 的第一个控件中设置 setter，如果将第一个 Grid 更改为 ScrollViewer，则必须在 Grid 之前设置 setter：

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

【讨论】：