本稿では、GridViewコントロールを継承するカスタム・コントロールを作成することで、「UIの仮想化」を有効にしたままスクロール位置を復元する方法を解説する。本稿のサンプルは「Windows Store app samples：MetroTips #30」からダウンロードできる。
●事前準備
Windows 8（以降、Win 8）向けのWindowsストア・アプリを開発するには、Win 8とVisual Studio 2012（以降、VS 2012）が必要である。これらを準備するには、第1回のTIPSを参考にしてほしい。本稿では64bit版Win 8 ProとVS 2012 Express for Windows 8を使用している。
public SampleDataSource(){ …… // ダミー・データを追加するコード for (int i = 7; i <= 2000; i++) // 20→2000 { string n = i.ToString(); var g = new SampleDataGroup("Group-" + n, "Group Title: " + n, "Group Subtitle: " + n, "Assets/DarkGray.png", "Group Description: "); this.AllGroups.Add(g); }}
Public NotInheritable Class SampleDataSource …… Public Sub New() …… ' ダミー・データを追加するコード For i As Integer = 7 To 2000 ' 20→2000 Dim n As String = i.ToString() Dim g = New SampleDataGroup("Group-" + n, "Group Title: " + n, "Group Subtitle: " + n, "Assets/DarkGray.png", "Group Description: ") Me.AllGroups.Add(g) Next End SubEnd Class
ScrollViewerコントロールにGridViewコントロールを格納していない場合は、ダミー・データを2000個に増やしても起動時間の違いは気が付かないほどだし、スクロールもスムースである。これはUIの仮想化が効いているためだ。しかし、前回の記事に従ってScrollViewerコントロールを追加すると、アプリの起動に時間が掛かる（あるいは、メモリ不足で起動しなくなる）ようになり、スクロールの動きも重くなる（Visual Studio 2012の動作が重くなる場合もある）。これは、ScrollViewerコントロールの中にGridViewコントロールを入れるとUIの仮想化が無効にされてしまい、アイテム・コンテナのインスタンスがデータの数だけ（＝2000個）生成されてしまうからだ。
VS 2012のプロジェクトに新しいクラスを追加し、名前はMyGridViewクラスとする。次のコードのように、GridViewコントロールを継承させ、OnApplyTemplateメソッドをオーバーライドし、HorizontalOffsetプロパティとScrollToHorizontalOffsetメソッドを追加する。OnApplyTemplateメソッドの中では、GetTemplateChildメソッドを使って内部のScrollViewerコントロールを取得しメンバ変数に保持しておく。HorizontalOffsetプロパティとScrollToHorizontalOffsetメソッドは、メンバ変数に保持してあるScrollViewerコントロールの同名プロパティ／メソッドをそのまま公開する。また、ページ側でスクロール位置を復元するタイミングを取るために、ScrollViewerコントロールのSizeChangedイベントも公開しておく。
Public Class MyGridView Inherits GridView Private _sv As ScrollViewer ' テンプレートの適用直後にScrollViewerコントロールを取得し、 ' メンバ変数に保持しておく ' また、ScrollViewerコントロールのSizeChangedイベントに ' _sv_SizeChangedメソッドを登録しておく Protected Overrides Sub OnApplyTemplate() MyBase.OnApplyTemplate() _sv = Me.GetTemplateChild("ScrollViewer") AddHandler _sv.SizeChanged, AddressOf _sv_SizeChanged End Sub ' HorizontalOffsetプロパティを公開する Public ReadOnly Property HorizontalOffset As Double Get If (_sv Is Nothing) Then Return 0.0 End If Return _sv.HorizontalOffset End Get End Property ' ScrollToHorizontalOffsetメソッドを公開する Public Sub ScrollToHorizontalOffset(value As Double) If (_sv IsNot Nothing) Then _sv.ScrollToHorizontalOffset(value) End If End Sub ' ScrollViewerコントロールのSizeChangedイベントを公開する Public Event ScrollViewerSizeChanged As EventHandler(Of SizeChangedEventArgs) Sub _sv_SizeChanged(sender As Object, e As SizeChangedEventArgs) RaiseEvent ScrollViewerSizeChanged(Me, e) End SubEnd Class
Public NotInheritable Class ItemsPage Inherits Common.LayoutAwarePage …… Protected Overrides Sub LoadState(navigationParameter As Object, pageState As Dictionary(Of String, Object)) …… ' 追加したコード If (pageState IsNot Nothing AndAlso pageState.ContainsKey("ScrollPosition")) Then _scrollPosition = pageState("ScrollPosition") End If End Sub …… ' 以下は追加したコード Private _scrollPosition As Nullable(Of Double) Protected Overrides Sub SaveState(pageState As Dictionary(Of String, Object)) MyBase.SaveState(pageState) pageState("ScrollPosition") = Me.itemGridView.HorizontalOffset End Sub Private Sub itemGridView_ScrollViewerSizeChanged(sender As Object, e As SizeChangedEventArgs) If (_scrollPosition.HasValue) Then Me.itemGridView.ScrollToHorizontalOffset(_scrollPosition.Value) _scrollPosition = Nothing End If End SubEnd Class
UIの仮想化により、アイテム・コンテナが再利用されるイメージ
完成した画面UIの仮想化を有効にすることで2000個のデータでも軽快に動作する。また、グリッド上のマウス・ホイール操作でもスクロールするようになった（前回の方法ではスクロールしなかった）*5。
