xaml - Flickering when updating the datacontext in background -

i'm studying uwp windows 10 development absolute beginners, , meet problems. reflash observablecollection<> data cause screen flash. how fix it? program details in uwp beginner

    //cs file code      public sealed partial class financialpage : page     {         observablecollection<newsitem> newsitems;         public financialpage()         {             newsitems = new observablecollection<newsitem>();             this.initializecomponent();             getnewsitemmanager.getnewitemsbycategory(newsitems, "financial");         }      }      // xaml file code     <gridview itemssource="{x:bind newsitems}" background="lightgray">         <gridview.itemtemplate>             <datatemplate x:datatype="data:newsitem">                 <local:newscontentcontrol horizontalalignment="stretch" verticalalignment="stretch"/>             </datatemplate>         </gridview.itemtemplate>     </gridview>      //models newsitems class file     public static void getnewitemsbycategory(observablecollection<newsitem> newsitems, string category)     {         var allnewsitems = getnewsitems();         var filterednewsitems = allnewsitems.where(p => p.category == category && isexist(newsitems, p.id)).tolist();             filterednewsitems.foreach(p => newsitems.add(p));     }      private static boolean isexist(observablecollection<newsitem> newsitems, int id)     {         return newsitems.tolist().trueforall(p => id == p.id);     }      private static list<newsitem> getnewsitems()     {         var items = new list<newsitem>();          items.add(new newsitem() { id = 1, category = "financial", headline = "lorem ipsum", subhead = "doro sit amet", dateline = "nunc tristique nec", image = "assets/financial1.png" });         items.add(new newsitem() { id = 2, category = "financial", headline = "etiam ac felis viverra", subhead = "vulputate nisl ac, aliquet nisi", dateline = "tortor porttitor, eu fermentum ante congue", image = "assets/financial2.png" });         items.add(new newsitem() { id = 3, category = "financial", headline = "integer sed turpis erat", subhead = "sed quis hendrerit lorem, quis interdum dolor", dateline = "in viverra metus facilisis sed", image = "assets/financial3.png" });         items.add(new newsitem() { id = 4, category = "financial", headline = "proin sem neque", subhead = "aliquet quis ipsum tincidunt", dateline = "integer eleifend", image = "assets/financial4.png" }); items.add(new newsitem() { id = 5, category = "financial", headline = "mauris bibendum non leo vitae tempor", subhead = "in nisl tortor, eleifend sed ipsum eget", dateline = "curabitur dictum augue vitae elementum ultrices", image = "assets/financial5.png" });          items.add(new newsitem() { id = 6, category = "food", headline = "lorem ipsum", subhead = "dolor sit amet", dateline = "nunc tristique nec", image = "assets/food1.png" });         items.add(new newsitem() { id = 7, category = "food", headline = "etiam ac felis viverra", subhead = "vulputate nisl ac, aliquet nisi", dateline = "tortor porttitor, eu fermentum ante congue", image = "assets/food2.png" });         items.add(new newsitem() { id = 8, category = "food", headline = "integer sed turpis erat", subhead = "sed quis hendrerit lorem, quis interdum dolor", dateline = "in viverra metus facilisis sed", image = "assets/food3.png" });         items.add(new newsitem() { id = 9, category = "food", headline = "proin sem neque", subhead = "aliquet quis ipsum tincidunt", dateline = "integer eleifend", image = "assets/food4.png" });         items.add(new newsitem() { id = 10, category = "food", headline = "mauris bibendum non leo vitae tempor", subhead = "in nisl tortor, eleifend sed ipsum eget", dateline = "curabitur dictum augue vitae elementum ultrices", image = "assets/food5.png" });         return items;         } 

assuming

newsitem.clear(); filterednewsitems.foreach(p => newsitem.add(p)); 

should

newsitems.clear(); filterednewsitems.foreach(p => newsitems.add(p)); 

i assume "flash" seeing (can't haven't provided full repro) due you're doing show updated list.

yes, removing , adding new (mostly similar) list can create people describe "flash".

a better approach remove items don't want displayed more , add in ones do.
this:

        foreach (var newsitem in newsitems.reverse())         {             if (newsitem.category != category)             {                 newsitems.remove(newsitem);             }         }         foreach (var fni in filterednewsitems)         {             if (!newsitems.contains(fni))             {                 newsitems.add(fni);             }         }