Michael Bedford Michael Bedford - 25 days ago 7
C# Question

Windows UWP Pivot swiping through UI

I have a Windows universal UWP app that I am using Pivot on to give me the ability to swipe from page to page for navigation. Let's say I have three UI pages (page1, page2 and page3), I then have three PivotItems, one for each. The question is, inside of the PivotItem, I currently have a Frame in each and am using the Frame to show the UI page. This is working, however, this seems redundant because as I understand it, a Frame is used to dynamically show content such as a UI. It seems that you would have EITHER buttons or links for the tabs in a grid and then use one frame to rotate the UI views depending on which button is clicked OR you would use pivot, which I am doing. Main reason I chose pivot, I am targeting mobile and I do want to be able to swipe from page to page.

So, what I don't know is, when using pivot, what do I put in each PivotItem? Is a frame on each correct? Or should I use some other item like UIElement?

Thanks!

Answer

What I want to know specifically is instead of stuffing controls directly in the PivotItem, how do I just have each PivotItem reference and use my other pages?

Pivot is a ItemsControl.so it can contain a collection of items of any type, including the Page. You can use pages in PivotItem like below:

<Page
x:Class="ProjectName.MainPage"
xmlns:local="using:ProjectName"
...
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot x:Name="rootPivot" Title="Pivot Title">
        <PivotItem Header="Pivot Item 1">
            <!--reference the page with local:PageName-->
            <local:PageOne></local:PageOne>
        </PivotItem>
        <PivotItem Header="Pivot Item 2">
            <local:PageTwo></local:PageTwo>
        </PivotItem>
        <PivotItem Header="Pivot Item 3">
            <local:PageThree></local:PageThree>
        </PivotItem>
    </Pivot>
</Grid>