VirtualizingStackPanel Scrollviewer height

shriram 125

I am working a uwp app where i used ListView with VirtualizingStackPanel . In my case i am trying create an alternatives for CVS ListView so each item has a ItemsControl (choosen this because it consume less memory and ScrollViewer). Now if i want navigate to a item which is part of the nest list(ItemsControl element), i cant directly navigate to the element.

So i tried to adjust the scroll viewer in order to achieve this but the scrollable height and other details are not has a proper value, but the same with i can achieve if i use ItemsStackPanel instead of VirtualizingStackPanel.

<ListView

 x:Name="AuthorGroupsListView"

SelectionMode="None"

VirtualizingStackPanel.VirtualizationMode="Recycling"

 Margin="10">

<ListView.ItemTemplate>

    <DataTemplate x:DataType="local:AuthorBooksGroup">

        <StackPanel Background="Transparent">

            <TextBlock Text="{Binding Author}" FontWeight="Bold" FontSize="20" Margin="5"/>

            <ItemsControl

                          ItemsSource="{Binding Books}" >

                <ItemsControl.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Margin="10" Background="Transparent" >

                            <TextBlock Text="{Binding Title}" FontSize="16" />

                            <TextBlock Text="{Binding Year}" FontSize="12" />

                        </StackPanel>

                    </DataTemplate>                        

                </ItemsControl.ItemTemplate>

            </ItemsControl>

        </StackPanel>

    </DataTemplate>

</ListView.ItemTemplate>

<ListView.ItemsPanel>

    <ItemsPanelTemplate>

        <VirtualizingStackPanel />

        <!--<ItemsStackPanel />-->

    </ItemsPanelTemplate>

</ListView.ItemsPanel>

</ListView>

1 answer

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-22T08:09:47.6366667+00:00

Hi @shriram ,

Welcome to Microsoft Q&A!

I was able to reproduce the same behavior, after using VirtualizingStackPanel, the scrollable height changes while sliding, this should be by design.

According to the official documentation, it is recommended that you use ItemsStackPanel or ItemsWrapGrid in listview.

ItemsStackPanel is used as the default ItemsPanel for ListView. If you modify the ItemsPanel, we recommend you use ItemsStackPanel or ItemsWrapGrid instead of VirtualizingStackPanel or WrapGrid.

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

1 person found this answer helpful.
shriram 125 Reputation points

2024-05-22T08:30:43.5733333+00:00

My items are variable height if i use the ItemStackPanel or ItemsWrapGrid while scrolling i am facing win32 exception and i cant feel a smooth scrolling experience, but i can achieve this in VirtualizationStackPanel

shriram 125 Reputation points

2024-05-22T09:04:16.3366667+00:00

Image 1:Scrollable height and scrolled height from VirtualizingStackpanel

Image 2:Scrollable height and Scrolled height of ItemsStackPanel (based on items height)

As you see the image 1 shows the scrollable height gives the count of the items in outer listview and when i scrolled down a random number of 0.02 is getting added. How is this value is being calculated can you help me with the conversion or calculation from original value(like in image 2) to the VisualizedPannel Value (Values in image2)

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-22T09:41:29.7733333+00:00

To further analyze this problem, could you please share the code of Scrollable height and Scrolled height of ItemsStackPanel?

shriram 125 Reputation points

2024-05-22T10:06:33.8133333+00:00

I used the same above list view code with a small change in ItemPanelTemplate

<ListView.ItemsPanel> <ItemsPanelTemplate> <ItemsStackPanel /> </ItemsPanelTemplate> </ListView.ItemsPanel> ```Let me know do you want any other details Backend Code ```powershell private void ItemsStackPanel_Loaded(object sender, RoutedEventArgs e) { var scrollViewer = AuthorGroupsListView1.GetScrollViewer(); scrollViewer.ViewChanged += ScrollViewer_ViewChanged; } private void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) { var elemnt = (sender as ScrollViewer); if(elemnt!=null) { Debug.WriteLine($"Scrollable Height : {elemnt.ScrollableHeight} Scrolled Height {elemnt.VerticalOffset}"); } }

shriram 125 Reputation points

2024-05-23T07:54:14.0033333+00:00

I just want to know how the value of scrolling is calculated in virtualizingStackPanel. Because in ItemsStackPanel the value is nothing but the sum of the total items actualHeight , but in VirtualizingStackPanel it is different @Junjie Zhu - MSFT

shriram 125 Reputation points

2024-05-23T07:57:22.66+00:00

@Junjie Zhu - MSFT As i mentioned earlier the ItemsStackPanel Scrollable height is same as the sum of the total items Actual height, where as in VirtualizingStackPanel it is different can you share how is this calculated in VirtualizationStackPanel

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-23T10:03:22.8833333+00:00

Hi @shriram ,

can you share how is this calculated in VirtualizationStackPanel

I don’t know yet, I will test and research first, and could you please tell me what method you use to get the ScrollViewer, because the UWP listview does not have the GetScrollViewer method.

shriram 125 Reputation points

2024-05-23T12:22:28.7166667+00:00

Hi @Junjie Zhu - MSFT ,

I used the VisualTreeHelperExtensions from the WinRTXamlToolkit, let me share the exact code

public static ScrollViewer GetScrollViewer(this ItemsControl itemsControl) { return itemsControl.GetFirstDescendantOfType<ScrollViewer>(); }

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-24T07:09:36.8633333+00:00

Hi @shriram ,

Sorry, at first I thought the Scrollable heigh you were talking about was the height of the slider, and indeed the height of the slider changes.

But I got a different result than you, I was able to get the Scrollable height in VirtualizingStackpanle and the value I got should be correct.

I have 11 items, the Scrollable height is 10.834... so I guess the Scrollable height here is more of the sum of the items.

It is recommended to see if you can reproduce the same behavior in a blank UWP project. I can also share my test code if you need it.

Image 1:Scrollable height and scrolled height from VirtualizingStackpanel

Image 2:Scrollable height and Scrolled height of ItemsStackPanel (based on items height)

shriram 125 Reputation points

2024-05-24T07:57:10.92+00:00

Hi ,
As you said the virtualizingstackpanel gives the Scrollable height is the sum of the items. But if i use the same items in ItemsStackPanel the Scrollable height is the sum of the items actual height.
**
I need the same behavior in the VirtualizingStackPanel or else how can i match the ratio of the itemsstackpanel value with virtualizingstackpanel

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-24T08:50:50.75+00:00

Hi @shriram ,

I need the same behavior in the VirtualizingStackPanel or else how can i match the ratio of the itemsstackpanel value with virtualizingstackpanel

Sorry, this shouldn't be possible. After using VirtualizingStackPanel, it changes from Physical scrolling to Logical scrolling, which should be by design.

Because it is using a virtualized panel, we cannot get its actual pixel height from a virtualized panel. the selection mode automatically becomes logical scrolling.

Now if i want navigate to a item which is part of the nest list(ItemsControl element), i cant directly navigate to the element.

How do you navigate now? Maybe we can solve the problem from another direction, both using logical scrolling here.

Thank you.

shriram 125 Reputation points

2024-05-26T06:09:30.0233333+00:00

Hi @Junjie Zhu - MSFT ,

I have grouped my collection which means each item will have a another collection of data inside (based on data UI height and width varies) since i am using a nested listview with virtualizingStackPanel i want to navigate to a specific element which is available in nested collection e.g., I want to navigate to item which is inside the nested listview, how can i achieve this ?

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-27T09:15:03.4233333+00:00

i want to navigate to a specific element which is available in nested collection

Sorry, UWP Listview can only navigate by ItemsSource(AuthorBooksGroup), not inside nests(Book).

AuthorGroupsListView.ScrollIntoView(authorBooks[9]); //My class public class AuthorBooksGroup { public string Author { get; set; } public List<Book> Books { get; set; } } public class Book { public string Title { get; set; } public string Year { get; set; } }

shriram 125 Reputation points

2024-05-30T10:54:54.1533333+00:00

Hi
Atleast can we get last and first visible item in the viewport from a VirtualizingStackPanel including the nested elements (the inner collection)

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-05-31T07:56:50.3466667+00:00

Hi @shriram ,

It can be obtained through VisualTreeHelper, but I have not yet found a way to navigate to a specific internal item.

private void Button_Click(object sender, RoutedEventArgs e) { List<TextBlock> textBlocks = new List<TextBlock>(); FindChildren<TextBlock>(textBlocks, AuthorGroupsListView); foreach (TextBlock textBlock in textBlocks) { Debug.WriteLine(textBlock.Text); } } internal static void FindChildren<T>(List<T> results, DependencyObject startNode) where T : DependencyObject { int count = VisualTreeHelper.GetChildrenCount(startNode); for (int i = 0; i < count; i++) { DependencyObject current = VisualTreeHelper.GetChild(startNode, i); if ((current.GetType()).Equals(typeof(T)) || (current.GetType().GetTypeInfo().IsSubclassOf(typeof(T)))) { T asType = (T)current; results.Add(asType); } FindChildren<T>(results, current); } }

shriram 125 Reputation points

2024-06-01T02:22:29.8066667+00:00

Hi @Junjie Zhu - MSFT

The above given snippet will give all the elements which are loaded but i just need the elements which are loaded and inside the viewport

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-06-03T08:48:10.9333333+00:00

Hi @shriram ,

get the elements which are loaded and inside the viewport

Sorry, I didn't find the any UWP API to do it.

shriram 125 Reputation points

2024-06-03T13:24:37.6066667+00:00

Hi @Junjie Zhu - MSFT

Thanks for the clarification let me check if there some other way to achieve this

shriram 125 Reputation points

2024-06-10T07:14:29.41+00:00

Hi @Junjie Zhu - MSFT

Is it possible to get the height of the item before it rendering in UI in virtualizingStackPanel ?

I am trying to achieve the ItemsUpdatingScrollMode for the VirtualizingStackPanel is there any windows api to achieve this in VirtualizingStackPanel

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-06-11T09:03:24.6466667+00:00

Is it possible to get the height of the item before it rendering in UI in virtualizingStackPanel ?

Getting the height of the item before it rendering in UI is impossible. It can't get UI information before loaded.
You can get the height of the item after loaded.

shriram 125 Reputation points

2024-06-12T08:04:29.65+00:00

I have an logic to retain the same items which in viewport while trying to add/remove items from collection by adjusting the offset of the scroll but i am facing a UI glitch where old items displays and scrolling back to the same item but i need to achieve without the glitch in UI

Junjie Zhu - MSFT 18,391 Reputation points Microsoft Vendor

2024-06-14T01:45:54.5066667+00:00

Hi @shriram ,

It seems that this question is different from the current thread. I suggest you open a new question on Q&A and provide relevant code snippets.

Thank you.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

VirtualizingStackPanel Scrollviewer height

1 answer

Your answer