Slow GridView Resize in UWP - xaml

Question

To simplify the example let's suppose we just add a GridView in the Page:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="MainGrid" />
</Grid>
And this is the code:
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var collection = new ObservableCollection<String>();
MainGrid.ItemsSource = collection;
await Dispatcher.RunIdleAsync(test =>
{
for (int i = 0; i < 20000; i++)
{
collection.Add(i.ToString());
}
});
}
A GridView is filled with that ObservableCollection, I do not complain about scrolling but about resizing and maximizing the Window makes a huge lag and even worse in low spec computers.
I have done the following improvements:
Play with the values of IncrementalLoadingThreshold & DataFetchSize
<GridView x:Name="MainGrid" IncrementalLoadingThreshold="100" DataFetchSize="3"/>
Sometimes goes better but not sure if this values works with an static collection.
Change the alignment to top and left to track the SizeChanged and adapt to the Grid.
This goes better but when I tap on maximize it has a large lag.
I have also tried to follow old examples like http://xurxodeveloper.blogspot.com.es/2014/03/scroll-infinito-en-windows-81-con-xaml.html but it does not add more items when scroll has arrived to the end. And the performance tips and articles I found are just for scrolling.
So In this static case, is there a technique or another collection source to improve the resizing lag?

Answer 1

Firstly create a new Observable Collection that allows you to AddRange. Here's what I have
public class ObservableCollection2<T> : ObservableCollection<T>
{
bool _suppressNotification = false;
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
{
if (!_suppressNotification)
base.OnCollectionChanged(e);
// do nothing
}
public ObservableCollection2() : base() { }
public ObservableCollection2(IEnumerable<T> collection) : base(collection)
{ }
public void AddRange(IEnumerable<T> list)
{
this._suppressNotification = true;
if (list == null)
throw new ArgumentNullException("list");
int index = this.Count;
foreach (T item in list)
{
base.Items.Add(item);
}
this._suppressNotification = false;
OnPropertyChanged(new System.ComponentModel.PropertyChangedEventArgs("Count"));
OnPropertyChanged(new System.ComponentModel.PropertyChangedEventArgs("Items[]"));
OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, list.ToList(), index));
}
}
Next you don't instantiate the collection on Loaded rather do it in constructor
public MainPage()
{
this.InitializeComponent();
dataCol = new ObservableCollection2<String>();
}
ObservableCollection2<String> dataCol = null;
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
MainGrid.ItemsSource = dataCol;
List<stirng> tempList = new List<string>();
for (int i = 0; i < 20000; i++)
{
tempList .Add(i.ToString());
}
dataCol.AddRange(tempList);
}
In short you aren't triggering UI updates after every insert only when the collection has finished processing.. that means GridView gets update notification once rather than 2000 times