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

【问题标题】：How to change Pivot to ScrollViewer with VisualStateManager in UWP?如何在 UWP 中使用 VisualStateManager 将 Pivot 更改为 ScrollViewer？
【发布时间】：2015-10-09 14:20:57
【问题描述】：

目前我有一个 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 的根网格，在 VSM 下方，根网格内是 Pivot 和 ScrollViewer。我应该如何继续？

【问题讨论】：

我会研究RelativePanel。它是 Windows 10 XAML 中的一个新控件，可以实现您想要的。

标签： c# xaml windows-10 uwp

【解决方案1】：

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

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

【讨论】：

这就是我要找的。但是现在我两次使用相同的代码，有没有办法将网格存储在某个变量中并使用对该变量的引用？我还是个 XAML 新手。
试试UserControl，它允许您将 XAML 或代码隐藏在一个控件中封装并在其他 XAML 中使用。