ListView と GridView の UI の最適化

[アーティクル]
09/07/2023

注詳しくは、//build/ セッション「Dramatically Increase Performance when Users Interact with Large Amounts of Data in GridView and ListView (ユーザーが GridView と ListView で大量のデータを操作するときのパフォーマンスを大幅に向上させる)」をご覧ください。

ListView と GridView のパフォーマンスと起動時間を、UI の仮想化、要素の削減、項目の段階的な更新を通して向上させます。データ仮想化の手法については、ListView と GridView のデータ仮想化」を参照してください。

コレクションパフォーマンスの主要な 2 つの要因

コレクションの操作は一般的なシナリオです。フォトビューアーには写真のコレクションがあり、リーダーには記事/書籍/ストーリーのコレクションががあり、ショッピングアプリには製品のコレクションがあります。このトピックでは、アプリでコレクションの操作を効率よく行うために何ができるかについて説明します。

コレクションに関しては、パフォーマンスに 2 つの主要な要因があります。1 つは、項目を作成する UI スレッドによって費やされた時間で、もう 1 つは、生データセットとそのデータのレンダリングに使用される UI 要素の両方で使われるメモリです。

スムーズなパン/スクロールを実現するには、UI スレッドで、項目のインスタンス化、データバインディング、レイアウトの効率的でスマートなジョブを実行することが重要です。

UI の仮想化

UI の仮想化は、実行可能な最も重要な改善です。これは、項目を表す UI 要素が必要に応じて作成されることを意味します。 1,000 項目のコレクションにバインドされている項目コントロールでは、すべての項目の UI を同時に作成しても、同時にすべてを表示することはできないため、リソースを無駄に使うことになります。 UI の仮想化は、ListView と GridView (およびその他の ItemsControl から派生した標準コントロール) によって自動的に実行されます。数ページ先にある項目がスクロールされて表示されそうになると、フレームワークでその項目用の UI が生成されてキャッシュされます。項目がもう一度表示される可能性が低い場合、フレームワークでメモリが解放されます。

カスタム項目パネルテンプレート (ItemsPanel をご覧ください) を用意する場合は、ItemsWrapGrid や ItemsStackPanel などの仮想パネルを必ず使用してください。 VariableSizedWrapGrid、WrapGrid、または StackPanel を使用した場合、仮想化は得られません。また、ListView イベント (ChoosingGroupHeaderContainer、ChoosingItemContainer、ContainerContentChanging) は、ItemsWrapGrid または ItemsStackPanel を使用したときにのみ発生します。

表示される可能性のある要素の作成はフレームワークで行う必要があるため、ビューポートの概念は UI の仮想化にとって非常に重要です。一般に、ItemsControl のビューポートは論理コントロールの範囲です。たとえば、ListView のビューポートは ListView 要素の幅と高さです。一部のパネルでは、子要素に制限のないスペースを確保できます。たとえば、ScrollViewer や Grid では、行または列のサイズが自動的に調整されます。このようなパネルに仮想化された ItemsControl を配置すると、すべての項目を表示できるスペースが用意され、仮想化の意味がなくなります。仮想化を復元するには、ItemsControl に幅と高さを設定します。

項目ごとの要素の削減

項目のレンダリングに使用される UI 要素の数を、妥当と思われる最小限の数に抑えます。

項目コントロールが最初に表示されるときに、項目でいっぱいのビューポートをレンダリングするために必要なすべての要素が作成されます。また、項目がビューポートに近づくと、、フレームワークによって、キャッシュされた項目テンプレートの UI 要素がバインドされたデータオブジェクトで更新されます。テンプレート内のマークアップの複雑さを最小限に抑えることで、メモリと UI スレッドに費やされた時間が短縮され、特にパン/スクロール中の応答性が向上します。問題のテンプレートは、項目テンプレート (ItemTemplate をご覧ください) と、ListViewItem または GridViewItem のコントロールテンプレート (項目コントロールテンプレート、または ItemContainerStyle) です。要素の数を少しでも減らす利点は、表示される項目の数に応じて増えます。

要素の削減の例については、「XAML マークアップの最適化」をご覧ください。

ListViewItem と GridViewItem 用の既定のコントロールテンプレートには、ListViewItemPresenter 要素が含まれています。このプレゼンターは、フォーカス状態や選択状態などの複雑なビジュアルを表示する、1 つの最適化された要素です。カスタム項目コントロールテンプレート (ItemContainerStyle) が既に存在する場合、または今後、項目コントロールテンプレートのコピーを編集する場合は、ListViewItemPresenter を使うことをお勧めします。この要素を使うと、ほとんどの場合、パフォーマンスとカスタマイズ性の最適なバランスを得ることができます。プレゼンターは、プロパティを設定することによってカスタマイズできます。例として、項目が選ばれたときに既定で表示されるチェックマークを削除し、選ばれた項目の背景色をオレンジ色に変更するマークアップを次に示します。

...
<ListView>
    ...
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter SelectionCheckMarkVisualEnabled="False" SelectedBackground="Orange"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>
<!-- ... -->

SelectionCheckMarkVisualEnabled と SelectedBackground に似た自己記述型の名前を持つ約 25 個のプロパティがあります。このプレゼンターの種類ではユースケースに合うように十分にカスタマイズできないことがわかった場合は、ListViewItemExpanded または GridViewItemExpanded コントロールテンプレートのコピーを代わりに編集できます。これらは \Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xaml にあります。これらのテンプレートを使用すると、ある程度のパフォーマンスと引き換えにカスタマイズが増えるという意味であることに注意してください。

GridView と ListView の項目を段階的に更新する

データ仮想化を使う場合は、項目の読み込み中に一時的な UI 要素をレンダリングするようにコントロールを構成することで、ListView と GridView の高い応答性を維持できます。一時的な要素は、データの読み込み時に実際の UI に徐々に置き換えられます。

また、データの読み込み元 (ローカルディスク、ネットワーク、またはクラウド) に関係なく、ユーザーは、ListView または GridView をすばやくパン/スクロールできます。この間、スピードが速すぎて完全な忠実度で各項目をレンダリングすることはできませんが、スムーズなパン/スクロールは維持されます。スムーズなパン/スクロールを維持するために、プレースホルダーを使うだけでなく、項目を複数のフェーズでレンダリングすることを選ぶことができます。

これらの手法の例は、写真表示アプリでよく見られます。すべての画像が読み込まれて表示されていない場合でも、ユーザーは引き続きパン/スクロールしてコレクションを操作できます。または、"映画" 項目の場合は、第 1 フェーズのタイトル、第 2 フェーズの評価、および第 3 フェーズのポスターの画像を表示できます。ユーザーはできるだけ早く各項目に関する最も重要なデータを見ることができます。これは、すぐにアクションを実行できることを意味します。その後、時間の許す限り、重要度の低い情報が入力されます。これらの手法を実装するために使うことができるプラットフォームの機能を次に示します。

プレースホルダー

一時的なプレースホルダーのビジュアル機能は既定でオンになっており、ShowsScrollingPlaceholders プロパティを使って制御されます。高速パン/スクロール中に、この機能を使用すると、滑らかさを維持しながら、さらに多くの項目がまだ完全に表示されていないという視覚的ヒントがユーザーに提供されます。次のいずれかの手法を使う場合は、必要に応じて ShowsScrollingPlaceholders を false に設定して、プレースホルダーが表示されないようにすることができます。

x:Phase を使用した段階的なデータテンプレートの更新

x:Phase 属性と {x:Bind} バインドを使って段階的なデータテンプレートの更新を実装する方法を次に示します。

これは、バインディングソースがどのようになるかを示しています (これは、バインド先のデータソースです)。

namespace LotsOfItems
{
    public class ExampleItem
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description { get; set; }
    }

    public class ExampleItemViewModel
    {
        private ObservableCollection<ExampleItem> exampleItems = new ObservableCollection<ExampleItem>();
        public ObservableCollection<ExampleItem> ExampleItems { get { return this.exampleItems; } }

        public ExampleItemViewModel()
        {
            for (int i = 1; i < 150000; i++)
            {
                this.exampleItems.Add(new ExampleItem(){
                    Title = "Title: " + i.ToString(),
                    Subtitle = "Sub: " + i.ToString(),
                    Description = "Desc: " + i.ToString()
                });
            }
        }
    }
}

これは、DeferMainPage.xaml に含まれるマークアップです。グリッドビューには、MyItem クラスの Title、Subtitle、および Description プロパティにバインドされた要素がある項目テンプレートが含まれます。 x:Phase の既定値は 0 であることに注意してください。ここでは、最初はタイトルだけが表示された状態で項目がレンダリングされます。その後、字幕要素はデータバインドされ、すべてのフェーズが処理されるまで、すべての項目に対して表示されます。

<Page
    x:Class="LotsOfItems.DeferMainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lotsOfItems="using:LotsOfItems"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView ItemsSource="{x:Bind ViewModel.ExampleItems}">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="lotsOfItems:ExampleItem">
                    <StackPanel Height="100" Width="100" Background="OrangeRed">
                        <TextBlock Text="{x:Bind Title}"/>
                        <TextBlock Text="{x:Bind Subtitle}" x:Phase="1"/>
                        <TextBlock Text="{x:Bind Description}" x:Phase="2"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

今すぐアプリを実行し、グリッドビューをすばやくパン/スクロールすると、新しい各項目が画面に表示されるときに、最初は濃い灰色の四角形としてレンダリングされ (ShowsScrollingPlaceholders プロパティが既定で true に設定されているためです)、次にタイトルが表示され、その後に字幕と説明が続くことがわかります。

ContainerContentChanging を使用した段階的なデータテンプレートの更新

ContainerContentChanging イベントの一般的な戦略は、Opacity を使ってすぐに表示する必要がない要素を非表示にすることです。要素がリサイクルされるときに、古い値が保持されるため、新しいデータ項目からそれらの値が更新されるまで、それらの要素を非表示にしたいと考えています。イベント引数で Phase プロパティを使って、どの要素を更新して表示するかを決めます。追加のフェーズが必要な場合は、コールバックを登録します。

x:Phase と同じバインドソースを使用します。

MainPage.xaml に含まれるマークアップを次に示します。グリッドビューでは、その ContainerContentChanging イベントに対してハンドラーを宣言します。その中には、MyItem クラスの Title、Subtitle、および Description プロパティを表示するために使われる要素を持つ項目テンプレートが含まれます。 ContainerContentChanging を使う場合のパフォーマンス上の最大の利点を得るために、マークアップではバインドを使用せず、代わりにプログラムで値を割り当てます。ここでの例外は、タイトルを表示する要素であり、フェーズ 0 であると見なされます。

<Page
    x:Class="LotsOfItems.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lotsOfItems="using:LotsOfItems"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView ItemsSource="{x:Bind ViewModel.ExampleItems}" ContainerContentChanging="GridView_ContainerContentChanging">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="lotsOfItems:ExampleItem">
                    <StackPanel Height="100" Width="100" Background="OrangeRed">
                        <TextBlock Text="{x:Bind Title}"/>
                        <TextBlock Opacity="0"/>
                        <TextBlock Opacity="0"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

最後に、ContainerContentChanging イベントハンドラーの実装を以下に示します。このコードは、RecordingViewModel 型のプロパティを MainPage に追加して、マークアップのページを表すクラスからバインディングソースクラスを公開する方法も示しています。データテンプレートに {Binding} バインドが含まれていない限り、イベント引数オブジェクトをハンドラーの最初のフェーズで処理済みとしてマークし、データコンテキストを設定する必要がないことを項目に通知します。

namespace LotsOfItems
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.ViewModel = new ExampleItemViewModel();
        }

        public ExampleItemViewModel ViewModel { get; set; }

        // Display each item incrementally to improve performance.
        private void GridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            if (args.Phase != 0)
            {
                throw new System.Exception("We should be in phase 0, but we are not.");
            }

            // It's phase 0, so this item's title will already be bound and displayed.

            args.RegisterUpdateCallback(this.ShowSubtitle);

            args.Handled = true;
        }

        private void ShowSubtitle(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            if (args.Phase != 1)
            {
                throw new System.Exception("We should be in phase 1, but we are not.");
            }

            // It's phase 1, so show this item's subtitle.
            var templateRoot = args.ItemContainer.ContentTemplateRoot as StackPanel;
            var textBlock = templateRoot.Children[1] as TextBlock;
            textBlock.Text = (args.Item as ExampleItem).Subtitle;
            textBlock.Opacity = 1;

            args.RegisterUpdateCallback(this.ShowDescription);
        }

        private void ShowDescription(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            if (args.Phase != 2)
            {
                throw new System.Exception("We should be in phase 2, but we are not.");
            }

            // It's phase 2, so show this item's description.
            var templateRoot = args.ItemContainer.ContentTemplateRoot as StackPanel;
            var textBlock = templateRoot.Children[2] as TextBlock;
            textBlock.Text = (args.Item as ExampleItem).Description;
            textBlock.Opacity = 1;
        }
    }
}

今すぐアプリを実行し、グリッドビューですばやくパン/スクロールすると、x:Phase と同じ動作が起こることがわかります。

異種コレクションでのコンテナーリサイクル

一部のアプリケーションでは、コレクション内のさまざまな種類の項目に対して異なる UI を用意する必要があります。これにより、項目の表示に使用される視覚要素を再利用またはリサイクルするためにパネルを仮想化できない状況が発生する可能性があります。パン時に項目の視覚要素を再作成すると、仮想化によって得られた多くのパフォーマンスのメリットが取り消されます。しかし、少し計画すれば、仮想化パネルで要素を再利用できるようになります。開発者には、シナリオに応じて、ChoosingItemContainer イベント、または項目テンプレートセレクターという 2 つのオプションがあります。 ChoosingItemContainer アプローチの方がパフォーマンスが向上します。

ChoosingItemContainer イベント

ChoosingItemContainer は、起動時やリサイクル時に新しい項目が必要になったときに、ListView/GridView に項目 (ListViewItem/GridViewItem) を提供できるようにするイベントです。コンテナーに表示されるデータ項目の種類に基づいて、コンテナーを作成できます (以下の例を参照)。 ChoosingItemContainer は、項目ごとに異なるデータテンプレートを使用するためのよりパフォーマンスが高い方法です。 ChoosingItemContainer を使って実現できるものとして、コンテナーのキャッシュがあります。たとえば、5 つの異なるテンプレートがあり、1 つのテンプレートが他のものよりも 1 桁多く発生している場合、ChoosingItemContainer を使用すると、必要な比率で項目を作成できるだけでなく、適切な数の要素をキャッシュし、リサイクルに使用できる状態を保てます。 ChoosingGroupHeaderContainer は、グループヘッダーと同じ機能を提供します。

// Example shows how to use ChoosingItemContainer to return the correct
// DataTemplate when one is available. This example shows how to return different 
// data templates based on the type of FileItem. Available ListViewItems are kept
// in two separate lists based on the type of DataTemplate needed.
private void ListView_ChoosingItemContainer
    (ListViewBase sender, ChoosingItemContainerEventArgs args)
{
    // Determines type of FileItem from the item passed in.
    bool special = args.Item is DifferentFileItem;

    // Uses the Tag property to keep track of whether a particular ListViewItem's 
    // datatemplate should be a simple or a special one.
    string tag = special ? "specialFiles" : "simpleFiles";

    // Based on the type of datatemplate needed return the correct list of 
    // ListViewItems, this could have also been handled with a hash table. These 
    // two lists are being used to keep track of ItemContainers that can be reused.
    List<UIElement> relevantStorage = special ? specialFileItemTrees : simpleFileItemTrees;

    // args.ItemContainer is used to indicate whether the ListView is proposing an 
    // ItemContainer (ListViewItem) to use. If args.Itemcontainer, then there was a 
    // recycled ItemContainer available to be reused.
    if (args.ItemContainer != null)
    {
        // The Tag is being used to determine whether this is a special file or 
        // a simple file.
        if (args.ItemContainer.Tag.Equals(tag))
        {
            // Great: the system suggested a container that is actually going to 
            // work well.
        }
        else
        {
            // the ItemContainer's datatemplate does not match the needed 
            // datatemplate.
            args.ItemContainer = null;
        }
    }

    if (args.ItemContainer == null)
    {
        // see if we can fetch from the correct list.
        if (relevantStorage.Count > 0)
        {
            args.ItemContainer = relevantStorage[0] as SelectorItem;
        }
        else
        {
            // there aren't any (recycled) ItemContainers available. So a new one 
            // needs to be created.
            ListViewItem item = new ListViewItem();
            item.ContentTemplate = this.Resources[tag] as DataTemplate;
            item.Tag = tag;
            args.ItemContainer = item;
        }
    }
}

項目テンプレートセレクター

項目テンプレートセレクター (DataTemplateSelector) を使用すると、アプリで、表示されるデータ項目の種類に基づいて、実行時に異なる項目テンプレートを返すことができます。これにより、開発の生産性は向上しますが、すべてのデータ項目にすべての項目テンプレートを再利用できるわけではないため、UI の仮想化はより難しくなります。

項目 (ListViewItem/GridViewItem) をリサイクルする場合、リサイクルキュー (リサイクルキューは、現在データを表示するために使用されていない項目のキャッシュです) に、現在のデータ項目で必要なものと一致する項目テンプレートがあるかどうかを、フレームワークで判断する必要があります。リサイクルキューに適切な項目テンプレートを含む項目がない場合、新しい項目が作成され、適切な項目テンプレートがインスタンス化されます。一方、リサイクルキューに、適切な項目テンプレートがある項目が含まれている場合、その項目はリサイクルキューから削除され、現在のデータ項目のために使用されます。項目テンプレートセレクターは、使用されている項目テンプレートの数が少なく、異なる項目テンプレートを使用する項目のコレクション全体にわたって項目がフラットに分布しているような状況に適しています。

異なる項目テンプレートを使う項目が均一に分布していない場合、パン中に新しい項目テンプレートを作成することが必要になる可能性が高く、仮想化によって得られる多くの利点がなくなります。さらに、項目テンプレートセレクターでは、特定のコンテナーが現在のデータ項目用に再利用できるかどうかを評価する際に、対象として検討される候補は 5 つだけです。そのため、アプリで使用する前に、データが項目テンプレートセレクターでの使用に適しているかどうかを慎重に検討する必要があります。コレクションがほぼ同種である場合、セレクターからはほとんど毎回 (状況によっては常に) 同じ種類が返されます。ほぼ同種の中のまれな例外を処理するためにかかるコストに注意し、ChoosingItemContainer (または 2 つの項目コントロール) の使用が妥当であるかどうかを検討します。

ListView と GridView の UI の最適化

コレクションパフォーマンスの主要な 2 つの要因

UI の仮想化

項目ごとの要素の削減

GridView と ListView の項目を段階的に更新する

プレースホルダー

異種コレクションでのコンテナーリサイクル

フィードバック

フィードバック

その他のリソース

ListView と GridView の UI の最適化

コレクション パフォーマンスの主要な 2 つの要因

UI の仮想化

項目ごとの要素の削減

GridView と ListView の項目を段階的に更新する

プレースホルダー

異種コレクションでのコンテナー リサイクル

フィードバック

フィードバック

その他のリソース

コレクションパフォーマンスの主要な 2 つの要因

異種コレクションでのコンテナーリサイクル