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

【问题标题】：Adaptive trigger in nested page not firing after page navigation页面导航后嵌套页面中的自适应触发器未触发
【发布时间】：2015-11-20 09:04:05
【问题描述】：

我有一个自定义用户控件，其中包含一个带有 VisualStateManager 的 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 默认为 no 状态，StoryPanel 的背景为白色。一旦第一次跨越其中一个边界（即 720/1024），一切都会再次开始完美运行。

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

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

【问题讨论】：

您好，我正在尝试重现您的问题，但我找不到您的代码中定义的元素“StoryPanel”在哪里。
您好，首先感谢您抽出宝贵时间。这个问题对我来说仍然很重要。我已经更新了问题，以便代码示例有意义（StoryPanel 基本上只是主网格）。

标签： c# uwp

【解决方案1】：

当我使用您发布的代码调整窗口大小时，背景将保持白色。

在我这边，当我将 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>

【讨论】：

什么菜鸟的错误！不过还是谢谢！ :)