嵌套页面中的自适应触发器在页面导航后未触发

Question

我有一个自定义用户控件，其中包含带有 VisualStateManager 的 SplitView。每个其他页面都嵌套在该控件中，以便在所有页面之间共享 splitview，如下所示：

PageFrame.xaml

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Compact">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SplitView.DisplayMode" Value="CompactOverlay" />
                    <Setter Target="SplitView.IsPaneOpen" Value="False" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SplitView.DisplayMode" Value="CompactInline" />
                    <Setter Target="SplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <SplitView>
        <SplitView.Pane>
            <!-- Buttons not relevant for example -->
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <ContentPresenter 
                    Margin="12, 0, 12, 12"
                    Content="{Binding PageContent, ElementName=pageFrame}" />
            </Grid>
        </SplitView.Content>
    </SplitView>
</Grid>

现在，在我的主页上有另一个 VisualStateManager，如下所示：

MainPage.xaml

<controls:PageFrame>
    <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
            <VisualState x:Name="Small">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Compact">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Blue"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Green"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <controls:PageFrame.PageContent>
        <Grid x:Name="ContentPanel">
           <!-- page content -->
        </Grid>
    </controls:PageFrame.PageContent>
</controls:PageFrame>

此 VisualStateManager 会按照您的预期调整元素的大小和位置（为简洁起见，我在此处排除了他的确切实现），并且它有效。但是，每当我向前或向后导航时，VSM 默认为 无状态，StoryPanel 的背景为白色 。一旦第一次越过其中一个边界（即 720/1024），一切都会再次完美运行。

另请注意，如果我从内容周围删除 PageFrame 控件，一切都会完美运行。

问题：为什么导航后 MainPage.xaml 没有触发正确的状态？

Answer 1

当我使用您的 post.

代码调整 window 大小时，背景将保持白色

在我这边，当我将 VisualStateManager 放到根网格时它会起作用。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Small">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Compact">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Blue"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ContentPanel.Background" Value="Green"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <controls:PageFrame>
        <controls:PageFrame.PageContent>
            <Grid x:Name="ContentPanel">
                <!-- page content -->
            </Grid>
        </controls:PageFrame.PageContent>
    </controls:PageFrame>
</Grid>

嵌套页面中的自适应触发器在页面导航后未触发

Adaptive trigger in nested page not firing after page navigation

c#

uwp