uwp - 如何在 2 行中显示 PivotItem

Question

我正在使用 Pivot 在 UWP 中工作，但我有许多 PivotItem 选项卡，它将被屏幕边缘剪切（下图）。那么我们是否有任何解决方案可以将 PivotItems 放在 2 行中，或者我们可能有......最后并在弹出菜单中显示其他选项卡（或类似的东西）

由屏幕边缘切割的枢轴

非常感谢您的帮助

Answer 1

我建议使用 NavigationView 而不是 Pivot，NavigationView 会自动适应不同的屏幕尺寸并允许更大程度的自定义。如下： 您可以参考以下代码。

MainPage.xaml：

<NavigationView x:Name="rootNavigationView" PaneDisplayMode="Top"
ItemInvoked="NavView_ItemInvoked">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
                <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
                ……                
<NavigationViewItem Content="Section 8" x:Name="Section8Content" />
                <NavigationViewItem Content="Section 9" x:Name="Section9Content" />
                <NavigationViewItem Content="Section 10" x:Name="Section10Content" />
            </NavigationView.MenuItems>
            <Frame x:Name="ContentFrame"/>
</NavigationView>

后面的代码：

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
        {          
           var item = args.InvokedItemContainer;
            switch (item.Name)
            {
                case "Section1Content":

                    ContentFrame.Navigate(typeof(Section1Page));                
                    break;

                case "Section2Content":
                    ContentFrame.Navigate(typeof(Section2Page));                
                    break;
……
            }
        }

Section1Page.xaml：

<Page
   ..>
    <Grid>
        <TextBlock Text="Content of section 1."/>
    </Grid>
</Page>