如何在 UWP 中使用 VisualStateManager 将 Pivot 更改为 ScrollViewer？

Question

目前我有一个 ScrollViewer，其中包含三个水平相邻的网格（左、中、右）。但是当屏幕变窄时，我希望它变成具有这三个相同对象的 Pivot。所以我设法制作了一个 Pivot 并且工作正常，但现在我想围绕它构建一个 VisualStateManager 以在屏幕宽度发生变化时自动在 ScrollViewer 和 Pivot 之间切换。这可能吗？如果没有，您知道我如何使用 UWP 的其他功能来做到这一点吗？

这三个项目只是包含列表视图的简单网格，所以不用担心这些。但是我可以显示 Pivot 对象：

<Pivot>
   <Pivot.Items>
      <PivotItem Header="Left grid">
         <Grid x:Name="LeftGrid" />
      </PivotItem>

      <PivotItem Header="Middle grid">
         <Grid x:Name="MiddleGrid" />
      </PivotItem>

      <PivotItem Header="Right grid">
         <Grid x:Name="RightGrid" />
      </PivotItem>
   </Pivot.Items>
</Pivot>

这是 ScrollViewer 对象：

<ScrollViewer x:Name="scrollViewer">
   <Grid>
      <Grid x:Name="detailsGrid">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <Grid x:Name="LeftGrid" />
         <Grid x:Name="MiddleGrid" />
         <Grid x:Name="RightGrid" />
      </Grid>
   </Grid>
</ScrollViewer>

这是 VisualStateManager：

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup>
      <VisualState x:Name="WideState">
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="400" />
         </VisualState.StateTriggers>
         <VisualState.Setters>
            <Setter Target="?" Value="?" /><!-- which values to I set here? -->
         </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="NarrowState">
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="400" />
         </VisualState.StateTriggers>
         <VisualState.Setters>
            <Setter Target="?" Value="?" /><!-- which values to I set here? -->
         </VisualState.Setters>
      </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

目前有一个包含VisualStateManager的root-Grid，在VSM之下，root-Grid中有Pivot和ScrollViewer。我该如何继续？

Answer 1

无法在 VisualStateManager 内添加或删除控件。

或者，您可以将 Grid 和 Pivot 放在同一页中，并将其中一个 Visibility 默认设置为 Collasped。 VisualStateManager 中的所有内容只是设置 Grid 和 Pivot 的 Visibility 属性。

如何在 UWP 中使用 VisualStateManager 将 Pivot 更改为 ScrollViewer？

How to change Pivot to ScrollViewer with VisualStateManager in UWP?

c#

xaml

windows-10

uwp