Scrollable Pivot with header

Question

Scrollable Pivot with header

Ali Noshahi 26

Hi there, I want to have a Pivot with a scrollable header so I made a style for my self like below

And using this style I can have a header in my pivot using Tag property

    <Pivot>  
        <Pivot.Tag>  
                 <TextBlock Text="Hear is my header"/>  
        </Pivot.Tag>  
        <PivotItem Header="P1">  
        </PivotItem>  
        <PivotItem Header="P2">  
        </PivotItem>  
    <Pivot>

But I have little problems with this style

I can't scroll the header and when I put all the pivot in the ScrollViewer while I have an Incremental loading list inside my pivot items it will cause infinite loading of the content. It will call LoadMore function with no delay and load more and more every second
If I have a header with height > PageFrameHeight it will show a blank page to me. like the screenshots below:

Is there any good style or control for solving my problem?
And for helping in answering I have to say my application "Winsta" Minimum target version is 14393 (Anniversary Update) and Target is 18362 or 19H1 update.
Also, I'm using Microsoft.Toolkit.UWP.UI.Controls package V2.2.0

Richard Zhang-MSFT 6,921 Reputation points

2020-02-19T01:25:42.78+00:00

Hi, Can you provide a minimum runnable demo so that we can reproduce your problem? I tried your style and it doesn't show Pivot.Tag on the UI. In addition, if your Content uses a WebView, then the scrolling of the WebView is independent and not controlled by the external ScrollViewer. You are actually scrolling the content of the WebView, not the control.
Ali Noshahi 26 Reputation points

2020-02-19T16:14:39.043+00:00

yes, I can but it needs a little time. I will try to create a sample for you ASAP
Richard Zhang-MSFT 6,921 Reputation points

2020-02-20T05:26:08.153+00:00

Sure, I'll be waiting for you.
Ali Noshahi 26 Reputation points

2020-02-21T20:32:10.013+00:00

Here you are. https://www.mediafire.com/file/avvzbtc11t9oooe/UWPPlayground.rar/file
Richard Zhang-MSFT 6,921 Reputation points

2020-02-24T06:39:04.823+00:00

Hi, I checked your code and when the height of the Title exceeds the limit, the content disappears. This seems to be caused by you limiting the scroll of the ScrollViewer. If you set the ScrollViewer.VerticalScrollMode in the PivotPanel to Auto, the Title can be displayed. But I don't recommend that you modify the ControlTemplate in this way. You can choose to create a header-like control outside the Pivot control to display the content instead of changing the internal structure.
Ali Noshahi 26 Reputation points

2020-02-24T13:35:24.533+00:00

Yes, I know it's not the right way but unfortunately, I didn't find any way to put the and pivot like this in one scrollable panel.
Also, I tried your solution. The visibility problem got solved but still, the header is not scrollable.
And if I put pivot in ScrollViewer because my ListView is Incremental I ran into endless loading problems. My list items are kept loading What should I do instead?

Edit: Also ListViews are losing their own scroll.
Richard Zhang-MSFT 6,921 Reputation points

2020-02-25T02:06:17.76+00:00

Regarding the problem of non-stop loading, I think it may be the cause of the trigger mechanism. First of all, in Pivot Style, you already have a ScrollViewer, and you insert a ListView into PivotItem. ListView also has a ScrollViewer inside. When ListView is a child element of ScrollViewer, it will break the virtualization.

We can understand incremental loading as when the capacity of the container increases, we add new elements to fill the container, but for ScrollViewer, the internal space can be considered infinite, which results in the container can never be filled. So the element is constantly loaded.

My suggestion is to try to combine with other controls to achieve your purpose, instead of using only one Pivot
Richard Zhang-MSFT 6,921 Reputation points

2020-02-27T08:30:40.367+00:00

Hello, have you solved the problem you encountered? Any other questions?
Richard Zhang-MSFT 6,921 Reputation points

2020-02-28T09:48:07.967+00:00

Hi, If you have any other questions, please feel free to contact us

Richard Zhang-MSFT 6,921 Reputation points

2020-02-19T01:25:42.78+00:00

Hi, Can you provide a minimum runnable demo so that we can reproduce your problem? I tried your style and it doesn't show Pivot.Tag on the UI. In addition, if your Content uses a WebView, then the scrolling of the WebView is independent and not controlled by the external ScrollViewer. You are actually scrolling the content of the WebView, not the control.
Ali Noshahi 26 Reputation points

2020-02-19T16:14:39.043+00:00

yes, I can but it needs a little time. I will try to create a sample for you ASAP
Richard Zhang-MSFT 6,921 Reputation points

2020-02-20T05:26:08.153+00:00

Sure, I'll be waiting for you.
Ali Noshahi 26 Reputation points

2020-02-21T20:32:10.013+00:00

Here you are. https://www.mediafire.com/file/avvzbtc11t9oooe/UWPPlayground.rar/file
Richard Zhang-MSFT 6,921 Reputation points

2020-02-24T06:39:04.823+00:00

Hi, I checked your code and when the height of the Title exceeds the limit, the content disappears. This seems to be caused by you limiting the scroll of the ScrollViewer. If you set the ScrollViewer.VerticalScrollMode in the PivotPanel to Auto, the Title can be displayed. But I don't recommend that you modify the ControlTemplate in this way. You can choose to create a header-like control outside the Pivot control to display the content instead of changing the internal structure.
Ali Noshahi 26 Reputation points

2020-02-24T13:35:24.533+00:00

Yes, I know it's not the right way but unfortunately, I didn't find any way to put the and pivot like this in one scrollable panel.
Also, I tried your solution. The visibility problem got solved but still, the header is not scrollable.
And if I put pivot in ScrollViewer because my ListView is Incremental I ran into endless loading problems. My list items are kept loading What should I do instead?

Edit: Also ListViews are losing their own scroll.
Richard Zhang-MSFT 6,921 Reputation points

2020-02-25T02:06:17.76+00:00

Regarding the problem of non-stop loading, I think it may be the cause of the trigger mechanism. First of all, in Pivot Style, you already have a ScrollViewer, and you insert a ListView into PivotItem. ListView also has a ScrollViewer inside. When ListView is a child element of ScrollViewer, it will break the virtualization.

We can understand incremental loading as when the capacity of the container increases, we add new elements to fill the container, but for ScrollViewer, the internal space can be considered infinite, which results in the container can never be filled. So the element is constantly loaded.

My suggestion is to try to combine with other controls to achieve your purpose, instead of using only one Pivot
Richard Zhang-MSFT 6,921 Reputation points

2020-02-27T08:30:40.367+00:00

Hello, have you solved the problem you encountered? Any other questions?
Richard Zhang-MSFT 6,921 Reputation points

2020-02-28T09:48:07.967+00:00

Hi, If you have any other questions, please feel free to contact us

Scrollable Pivot with header

Activity