locked
How to do UI Virtualization for GridView Control RRS feed

  • Question

  • Hello,

    I have around 1000 items which I need to display in a GridView, but UI do not response for a while as It tries to create all 1000 items at a time, so Is there any way that I can virtualize Gridview,

    I read this msdn article and also tried custom wrappanel as metioned over here, but nothing helped much.

    Could anybody suggest me to UI Virtualization for GridView Correctly.

    Thanks in advance.

    Thursday, May 21, 2015 11:48 AM

Answers

  • Hello zee,

    After checking your project again, I found a workaournd which does not need to write the custom gridview, set the rwo height of the gridvew to be one * as:

    <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    

    I do not know why you set it to be auto and this would casue the scenario I mentioned above, all items are populated into one column. With above code, there are only 93 items are rendered in background(I used a static property to calculate the render count).

    • Marked as answer by Jamles Hez Thursday, June 4, 2015 6:19 AM
    Wednesday, May 27, 2015 9:24 AM

All replies

  • GridView using UI Virtualization by default. You can try asynchronous data binding.
    Thursday, May 21, 2015 12:05 PM
  • Yes GridView is using UI Virtualization by default, but it only work when I give specific width of the GridView, is there any way to do this when width set to Auto.

    The problem with setting specific width is that it do not scroll across pages when placed inside ScrollViewer, it just scroll within that given width.

    Thursday, May 21, 2015 12:17 PM
  • Hello zee,

    >>Yes GridView is using UI Virtualization by default, but it only work when I give specific width of the GridView, is there any way to do this when width set to Auto.

    I created a test demo with the GirdView with the weight being auto, and the result shows, in the GridView both UI and Data  are still virtualization, so it is confused that you mean about “but it only work when I give specific width of the GridView,”, could you please provide some images and code about your mentioned scenario.

    >>The problem with setting specific width is that it do not scroll across pages when placed inside ScrollViewer, it just scroll within that given width.

    I suggest you post some related XMAL code to show what you are doing exactly.

    Regards.

    Gallery.




    Tuesday, May 26, 2015 9:12 AM
  • Hello,

    Thanks for the reply, here  is the link quick demo which proves GridView do not perform UI Virtualization when width set to auto. Have a look at BackgroundColorConverter


    • Edited by zee_patel Tuesday, May 26, 2015 2:07 PM
    Tuesday, May 26, 2015 2:07 PM
  • Hello,

    The GridView can scroll horizontally only and after checking your demo, since you set the height to be auto, it will populate all items into one column so that the GridView would think it is not needed to show the scroll bar. You could create a custome GirdView template which supports scroll the girdview vertically, here is the sample you could have a check:

    vertically scrolling gridview XAML windows store app

    The “Orientation="Vertical "” is just used to place items in gridview in a Horizontal order, while it does not change the scroll mode from Horizontal to Vertical. Or if you want to keep these items in Vertical layout and do not use the custom gridview, you could use ListView instead.

    Regards.

    Wednesday, May 27, 2015 6:16 AM
  • Hello,

    Thanks for reply, I tried the solution that you suggested and also tried this sample code, but that is only for customization of GridView, what I want is to perform UI virtualization while keeping the same horizontal scrolling of GridView. The code that you mentioned do not do UI virtualization, it still load all the items in memory before flashing to UI(Tested that by putting counter on converter).

    If you have any demo project that demonstrate UI Virtualization, than please share with me, It will me helpful.

    Wednesday, May 27, 2015 6:57 AM
  • Hello zee,

    After checking your project again, I found a workaournd which does not need to write the custom gridview, set the rwo height of the gridvew to be one * as:

    <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    

    I do not know why you set it to be auto and this would casue the scenario I mentioned above, all items are populated into one column. With above code, there are only 93 items are rendered in background(I used a static property to calculate the render count).

    • Marked as answer by Jamles Hez Thursday, June 4, 2015 6:19 AM
    Wednesday, May 27, 2015 9:24 AM
  • Awesome!, That really works.

    Thanks a lot,

    I also want to put that GridView inside ScrollViewer but doing so Virtualization is not working, reason of putting in ScrollViewer is that right now when I scroll it always take 120 left margin, but I don't want that, when user scroll it should cover entire screen ignoring GridView margin.


    • Edited by zee_patel Wednesday, May 27, 2015 1:02 PM
    Wednesday, May 27, 2015 1:00 PM
  • Hello,

    The Building Windows Store apps with C# or VB forum is retiring! I'll move this to the Building Universal Windows apps forum for you. Please read Welcome to the Developing Universal Windows apps forum! and Guide to posting: subject line tags .

    Besides, for your last question I will recommend you split or open a new thread for it, in this way it will make answer searching in the forum easier and be beneficial to other community members as well.

    Thanks for your understanding.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, May 28, 2015 10:05 AM