UI に表示されるデータの仮想化（１）

ピクセル単位で仮想化するパネル ItemsWrapGrid & ItemsStackPanel - しっぽを追いかけてでは UI の仮想化についてご紹介しましたが、UI 以前にそもそもアイテムのデータ量が多い場合は表示が遅れたり、メモリを大量に消費してしまうといった問題が起こります

そこで仮想化の仕組みをデータまで広げた方法の１つが下記のようなデータのランダムアクセスによる仮想化です

GirdView や ListView などに複数のアイテムを表示する場合、表示されるデータはいったん表示用にコピーされます

このとき何もデータの仮想化を行っていないと表示されるデータのもととなるデータソースが全件コピーされます

f:id:matatabi_ux:20140802103929p:plain

しかし ItemsSource に ObservableCollection などの INotifyCollectionChanged のインターフェース実装をしたクラスか ObservableVector などの IObservableVector のインターフェース実装をしたクラスをバインドした場合、データ全件ではなく一部のみが表示用にコピーされるようになります

表示される画面のスクロール位置からコピーされるデータが絞り込まれることからこの仕組みをランダムアクセスの仮想化と呼んでいるようです

試しに前回の記事でも登場した TOSHIBA タブレットで下記のようなコードを試してみました

/// <summary>
/// Frame 内へナビゲートするために利用する空欄ページ。
/// </summary>
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += this.OnLoaded;
    }

    /// <summary>
    /// 画面読み込み時の処理
    /// </summary>
    /// <param name="sender">イベント発行者</param>
    /// <param name="e">イベント引数</param>
    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        this.gridView.ItemsSource = this.GetItems();
    }

    /// <summary>
    /// 大量のアイテム生成
    /// </summary>
    /// <returns>アイテムのコレクション</returns>
    private IEnumerable<object> GetItems()
    {
        for(var i = 0; i < 70000; i++)
        {
            yield return new string('*', 1000);
        }
    }
}

こんなコードをおもむろにリモートデバッグで実行したら・・・OutOfMemoryException で落ちました！

これをほぼ同じ次のようなコードに書き換えます

/// <summary>
/// Frame 内へナビゲートするために利用する空欄ページ。
/// </summary>
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += this.OnLoaded;
    }

    /// <summary>
    /// 画面読み込み時の処理
    /// </summary>
    /// <param name="sender">イベント発行者</param>
    /// <param name="e">イベント引数</param>
    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        this.gridView.ItemsSource = new ObservableCollection<object>(this.GetItems());
    }

    /// <summary>
    /// 大量のアイテム生成
    /// </summary>
    /// <returns>アイテムのコレクション</returns>
    private IEnumerable<object> GetItems()
    {
        for(var i = 0; i < 70000; i++)
        {
            yield return new string('*', 1000);
        }
    }
}