locked
ListView and ItemTemplate flickering issue RRS feed

  • Question

  • Hi

    When we use a WinJS ListView control with an ItemTemplate and bind it to a datasource, the ListView flickers as the page first opens.

    It is briefly rendering the elements in the ItemTemplate. Because we're using ListViews and ItemTemplates throughout our app, the whole UI is suffering from this flickering problem.

    My impression of the WinJS.Binding.Template control was that it's not meant to render into the DOM until there is an item in the DataSource. If the datasource isn't set until a promise returns (e.g. because it's loading from a webservice), then the ListView control displays an unbound instance of the ItemTemplate.

    Is there a way to set the ItemTemplate and DataSource without this flickering?


    Thanks

     

     

    Monday, December 5, 2011 2:47 PM

Answers

All replies

  • Hi Nomad,

    If your Listview item template is styled with a fixed size, you should not see any flickering (I have not seen this).  Is it possible the flicker is because the DOM has to resize with the contents are causing the DOM to resize and recalculate?

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, December 6, 2011 5:31 PM
    Moderator
  • I too came across this, it would display my template with an attribute from the datasource briefly and then disappear.  As a quick fix I css'ed the template off the viewable area and the flickering is not visible (for some reason display:none didnt work)

    I am also interested if there is a proper way to stop the flickering

    Wednesday, January 11, 2012 9:12 PM
  • Do you define the item sizes through CSS so that the objects don't resize the view when added?


    Jeff Sanders (MSFT)
    Thursday, January 12, 2012 1:14 PM
    Moderator
  • Yes, my template sizes were defined in css.  Although when I undid code and went back, I was not able to replicate it.  

    I've stopped using listview for what I am doing because it was having other visual glitches that I couldn't figure out what was wrong. ( See thread  http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/0d12bef9-7e0c-49b6-9b67-a672674e4148 ) 

    Thursday, January 12, 2012 7:15 PM
  • Hi,

    I think the flickering you are referring to is the animation i.e. the 'entrance' animation.

    One of the way of disabling it is by using WinJS.UI.disableAnimations().

    thanks

     

    Tuesday, July 10, 2012 7:04 AM