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

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

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

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

1 个答案: