Windows UWP Pivot swiping through UI

Question

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!

I think this explains it very well: msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/… — gregkalapos
The article at that link does describe it pretty well and I did actually read that article before posting. I also downloaded and viewed the sample. However, the documentation still leaves a gap which is the question I posted. I do want my app to look like the screenshot in the article but the sample you download from them does not look anything like the screenshot. It is a basic template where, like the sample xaml in the article, it just says "content goes here" and then they stuff a few simple controls directly in each PivotItem, like text. — Michael Bedford
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? Again, I am now using Frame inside of PivotItem where frame points to my page (which I can also set in code behind). But is that correct? Do I have to use a Frame for each PivotItem or can PivotItem directly reference another page by doing something like setting Content property of PivotItem? — Michael Bedford

Elvis Xia - MSFT Elvis Xia - MSFT · Accepted Answer · 2016-11-16T03:08:25

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>

Windows UWP Pivot swiping through UI

1 Answers