1

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!

3
  • 1
    I think this explains it very well: msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/… Nov 15, 2016 at 8:59
  • 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. Nov 15, 2016 at 14:26
  • 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? Nov 15, 2016 at 14:31

1 Answer 1

3

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>

6
  • Pefect! This is what I was looking for. Thank you! Last related question, with this approach, does the page get instantiated each time it is swiped to and then destroyed when swiped away? Nov 16, 2016 at 3:58
  • The page won't get destroyed when swiped away. Page got hidden when you swip to others. And they all get instantiated the first time,when you navigate to the root page. Nov 16, 2016 at 5:03
  • One other thing to notice, the OnNavigatedTo/OnNavigatingFrom of the page won't get triggered in this approach. If you want to trigger them, you have to use Frame. Nov 16, 2016 at 5:04
  • Oh, thank you for pointing that out. I would like to have the events raised. So, I guess I am back to needing to use a frame. Do I just put a frame in each PivotItem? Will this approach cause them to get destroyed or hidden when swiped away? Nov 16, 2016 at 5:08
  • No, it won't destroy the page either. My suggestion is, don't use the pivot. Use Button or HyperLinkButton instead. And when click the Button/HyperLinkButton call Frame.Navigate to navigate between sub pages. Nov 16, 2016 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.