自适应触发器在断点后不会返回到初始状态

Question

我创建了一个具有两个不同视图的自适应触发器。当程序独立于分辨率启动时，所有设置器都可以正常工作，但是当我们到达一个 breakpiont 时调整大小后，正确安排就会出现问题。这让我很困惑。

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SmallScreen">
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
                    <Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
                    <Setter Target="TextPanel.(Grid.Row)" Value="1"/>
                    <Setter Target="TextPanel.(Grid.Column)" Value="0"/>
                    <Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="2"/>
                    <Setter Target="TextPanel.(Grid.ColumnSpan)" Value="2"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="BigScreen">
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
                    <Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
                    <Setter Target="TextPanel.(Grid.Row)" Value="0"/>
                    <Setter Target="TextPanel.(Grid.Column)" Value="1"/>
                    <Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="1"/>
                    <Setter Target="TextPanel.(Grid.ColumnSpan)" Value="1"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>
    <Pivot Title="Pivot">
        <PivotItem Header="Head">
            <ScrollViewer>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                    <StackPanel x:Name="ImgPanel">
                <Image x:Name="Image" Source="/Assets/someImage.jpg" Width="200" />
                        <TextBlock x:Name="TitleTxt" Text="Title" FontWeight="Bold" FontSize="18.667" HorizontalAlignment="Center"/>
                    </StackPanel>
                        <StackPanel x:Name="TextPanel">
                    <Rectangle Height="32" Fill="#C33D27" />
                        <TextBlock x:Name="Text" Text="Place for long text" TextTrimming="WordEllipsis" TextWrapping="Wrap" />
                            </StackPanel>
                </Grid>
            </ScrollViewer>
        </PivotItem>

Answer 1

那是因为这两个 VisualStates 在两个不同的 VisualStateGroups 中。每个 VisualStateGroup 都可以激活一个 VisualState，因此这意味着在您的情况下 两个 VisualStates 同时激活。

起初，只有 MinWindowWidth VisualState 处于活动状态。当您调整 window 的大小时，将激活第二个 VisualState。要修复它，请确保这些 VisualStates 在同一个 VisualStateGroup 中。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="SmallScreen">
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
                <Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
                <Setter Target="TextPanel.(Grid.Row)" Value="1"/>
                <Setter Target="TextPanel.(Grid.Column)" Value="0"/>
                <Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="2"/>
                <Setter Target="TextPanel.(Grid.ColumnSpan)" Value="2"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ImgPanel.(Grid.Row)" Value="0"/>
                <Setter Target="ImgPanel.(Grid.Column)" Value="0"/>
                <Setter Target="TextPanel.(Grid.Row)" Value="0"/>
                <Setter Target="TextPanel.(Grid.Column)" Value="1"/>
                <Setter Target="ImgPanel.(Grid.ColumnSpan)" Value="1"/>
                <Setter Target="TextPanel.(Grid.ColumnSpan)" Value="1"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

自适应触发器在断点后不会返回到初始状态

Adaptive Trigger doesn't back to initial state after a breakpoint

xaml

win-universal-app

windows-10

uwp