Flickering when updating the datacontext in background - xaml

Question

I'm studying UWP by Windows 10 development for absolute beginners, and I meet some problems.
Reflash my ObservableCollection<> data will cause the screen to flash. How do I fix it?
The program details are 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;
}

Answer 1

Assuming
NewsItem.Clear();
filteredNewsItems.ForEach(p => NewsItem.Add(p));
should be
NewsItems.Clear();
filteredNewsItems.ForEach(p => NewsItems.Add(p));
I assume the "flash" you are seeing (can't be certain as you haven't provided a full repro) is due to what you're doing to show the updated list.
Yes, removing everything and then adding a new (mostly similar) list back can create what some people describe as a "flash".
A better approach would be to remove the items you don't want displayed any more and then add in any extra ones you do.
Something like 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);
}
}

Answer 2

OK... I think I've found a solution for you.
Instead of updating the bindings in your user control with the lambda expression, try it this way:
public NewsContentControl()
{
this.InitializeComponent();
this.DataContextChanged += OnDataCtxChanged; //+= (s, e) => Bindings.Update();
}
private void OnDataCtxChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
System.Diagnostics.Debug.WriteLine("context 'changed'");
if(NewsItem != args.NewValue as NewsItem)
{
Bindings.Update();
}
}
This triggers the update only if the value is actually different. Additionally, you can use "Binding" instead of x:Bind.
None of this answers for me why the datacontext is changing... but this should get rid of your flicker.