How to show PivotItem in 2 row

Question

I'm working in UWP with Pivot but I have many PivotItem tabs and it will be cut by screen edge (image below). So do we have any solution to put PivotItems in 2 rows or may we have ... in the end and show other tabs in a flyout menu (or something like this)

Pivot cut by screen edge

Thank so much for your helps

dear_vv dear_vv · Accepted Answer · 2021-02-25T06:22:44

I recommend using NavigationView to instead of Pivot, NavigationView automatically adapts to different screen sizes and allows for greater customization. As follows: You could refer to the following code.

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>

Code behind:

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>

How to show PivotItem in 2 row

1 Answers