リストビューとグリッドビュー

[アーティクル]
03/18/2023

ほとんどのアプリでは、イメージギャラリー、メールメッセージなどのデータのセットを操作および表示します。 XAML UI フレームワークでは、アプリ内でデータを簡単に表示、操作するための ListView コントロールと GridView コントロールが用意されています。

注意

ListView と GridView はどちらも ListViewBase クラスから派生しているため、機能は同じですが、データの表示方法は異なります。この記事では、特に指定がない限り、 リストビュー に関するディスカッションは ListView コントロールと GridView コントロールの両方に適用されます。 ListView や ListViewItem などのクラスの説明については、プレフィックスの "List" を "Grid" に置き換えることで、対応するグリッドクラス (GridView または GridViewItem) に適用できます。

ListView コントロールと GridView コントロールは、コレクションを操作する際に多くの利点を提供します。どちらも簡単に実装でき、簡単にカスタマイズできる一方で、基本的な UI、操作、スクロールを提供できます。また、どちらも既存の動的データソースにバインドすることも、XAML 自体または分離コードで提供されるハードコーディングされたデータにバインドすることもできます。

どちらのコントロールも、さまざまなシナリオで柔軟に使用できますが、全体的に、すべての項目が同じ基本構造と外観を持ち、同じ相互作用動作を持つコレクションで最適に動作します。つまり、すべてのユーザーは、クリックされたときに同じアクションを実行する必要があります (たとえば、リンクを開く、参照する場合など)。

ListView と GridView の比較

ListView

ListView コントロールは、データを 1 つの列に垂直に積み重ねて表示します。 ListView は、テキストをフォーカルポイントとして持つ項目や、上から下に読み取るように意図されたコレクション (アルファベット順など) の場合に適しています。 ListView の一般的な使用例としては、メッセージや検索結果の一覧などがあります。複数の列またはテーブルのような形式でコレクションを表示する必要がある場合は、ListView を使用 しないでください 。代わりに、 DataGrid コントロールの使用を検討してください。

アルファベット順にグループ化されたデータのリストビューのスクリーンショット。

GridView

GridView コントロールは、垂直方向にスクロールできる行と列の項目のコレクションを表示します。データは、列を埋めるまで水平方向に積み重ねられ、列の次の行に進みます。 GridView は、イメージをフォーカルポイントとして持つコレクション、または項目を左右に読み取ることができるコレクション、または特定の順序で並べ替えられないコレクションに適しています。 GridView の一般的なユースケースは、写真や製品ギャラリーです。

グリッドビューとして表示された写真のコンテンツライブラリのスクリーンショット。

どのコレクションコントロールを使用するべきか? ItemsRepeater との比較

使用するコントロールを決定する前に、これらの種類のコントロールの違いを理解しておくことが重要です。

ListViewと GridView

機能豊富な ListView コントロールと GridView コントロールは、 すぐに使用できます。カスタマイズは必要ありませんが、簡単にカスタマイズできます。それぞれに独自の組み込みの UI と UX があり、ほぼすべての種類のコレクションをそのまま表示するように設計されています。

ItemsRepeater

ItemsRepeater コントロールはコレクションの表示にも使用されますが、特定の UI 要件に合わせてカスタムコントロールを作成するための構成要素として設計されています。 ListView や GridView と同じ組み込みの機能がないため、必要な機能や操作を実装する必要があります。 ListView または GridView を使用して作成できない高度にカスタマイズされた UI がある場合、またはデータソースでアイテムごとに異なる動作が必要な場合は、ItemsRepeater を使用します。

ItemsRepeater の詳細については、ガイドラインと API のドキュメントを参照してください。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

これらのコントロールの API は、 Windows.UI.Xaml.Controls 名前空間に存在します。

UWP API:ListView クラス、 GridView クラス、 ItemsSource プロパティ、 Items プロパティ
WinUI 2 ギャラリーアプリを開き、 ListView または GridView の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。

リストビューまたはグリッドビューを作成する

重要な API:ListView クラス、GridView クラス、ItemsSource プロパティ、Items プロパティ

WinUI 3 ギャラリーアプリを開き、 ListView または GridView の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

ListView と GridView はどちらも ItemsControl 型であるため、任意の型の項目のコレクションを含めることができます。画面上に何かを表示するには、ListView コントロールまたは GridView コントロールの Items コレクションに項目が含まれている必要があります。ビューを設定するには、コレクションにアイテムを直接追加するか、 ItemsSource プロパティをデータソースに設定します。

注意事項

Items プロパティまたは ItemsSource プロパティを使用してリストを設定できますが、両方を同時に使用することはできません。 ItemsSource プロパティを設定して XAML で項目を追加した場合、追加された項目は無視されます。 ItemsSource プロパティを設定してコードで Items コレクションに項目を追加した場合、例外がスローされます。

この記事の例の多くは、わかりやすくするために Items コレクションを直接設定します。ただし、オンラインデータベースの書籍のリストなど、リスト内のアイテムが動的ソースから取得される方が一般的です。このようなケースでは、ItemsSource プロパティを使用します。

ListView コントロールまたは GridView コントロールに項目を追加する

XAML またはコードを使用して同じ結果を生成することで、ListView または GridView Items コレクションに項目を追加できます。通常、XAML を使用して項目を追加する場合は、変更せず、簡単に定義できる項目の数が少ない場合、または実行時にコードで項目を生成します。

方法 1: Items コレクションに項目を追加する

オプション 1: XAML を使用して項目を追加する

<!-- No corresponding C# code is needed for this example. -->

<ListView x:Name="Fruits">
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>

オプション 2: コードを使用して項目を追加する

<StackPanel Name="FruitsPanel"></StackPanel>

// Create a new ListView and add content.
ListView Fruits = new ListView();
Fruits.Items.Add("Apricot");
Fruits.Items.Add("Banana");
Fruits.Items.Add("Cherry");
Fruits.Items.Add("Orange");
Fruits.Items.Add("Strawberry");

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits);

次に示すように、どちらのオプションでも同じリストビューが生成されます。

果物のリストを表示する単純なリストビューのスクリーンショット。

方法 2: ItemsSource プロパティを設定してアイテムを追加する

通常、ListView または GridView を使用して、データベースやインターネットなどのソースからのデータを表示します。データソースから ListView コントロールまたは GridView コントロールを設定するには、その ItemsSource プロパティをデータ項目のコレクションに設定します。このメソッドは、次の例に示すように、ListView または GridView がカスタムクラスオブジェクトを保持する場合に適しています。

オプション 1: コードで ItemsSource を設定する

ここでは、ListView ItemsSource プロパティは、コード内でコレクションのインスタンスに直接設定されます。

<StackPanel x:Name="ContactPanel"></StackPanel>

// Class definition should be provided within the namespace being used, outside of any other classes.

this.InitializeComponent();

// Instead of adding hard coded items to an ObservableCollection as shown here,
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// You create Contact objects by providing a first name, last name, and company for the Contact constructor.
// They are then added to the ObservableCollection Contacts.
Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));

// Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
ListView ContactsLV = new ListView();
ContactsLV.ItemsSource = Contacts;

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);

オプション 2:XAML で ItemsSource を設定する

ItemsSource プロパティを、XAML でコレクションにバインドすることもできます。ここでは、ItemsSource は Contacts という名前のパブリックプロパティにバインドされ、_contactsという名前のページのプライベートデータコレクションが公開されます。

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>

// Provide a class definition within the namespace being used, outside of any other classes.
// These two declarations belong outside the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return this._contacts; }
}

// Define this method within your main page class.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Instead of hard coded items, the data could be pulled
    // asynchronously from a database or the internet.
    Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
    Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
    Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
}

これらのオプションはいずれも、次のスクリーンショットに示すように、同じリストビューを生成します。 (この演習ではデータテンプレートが定義されていないため、リストビューには各項目の文字列表現が表示されます)。

ItemsSource プロパティが設定された単純なリストビューを表示するスクリーンショット。

重要

定義されたデータテンプレートがない場合、カスタムクラスオブジェクトは、 ToString メソッドが定義されている場合にのみ、その文字列値を使用してリストビューに表示されます。

次のセクションでは、ListView または GridView テンプレートで単純なクラス項目とカスタムクラス項目を適切に視覚的に表す方法について詳しく説明します。

データバインディングについて詳しくは、「データバインディングの概要」をご覧ください。

注意

グループ化されたデータをリストビューに表示する必要がある場合は、 CollectionViewSource クラスにバインドする必要があります。 CollectionViewSource は、XAML のコレクションクラスのプロキシとして機能し、グループ化のサポートを有効にします。詳しくは、CollectionViewSource をご覧ください。

データテンプレートを使用して外観をカスタマイズする

ListView コントロールまたは GridView コントロールでデータテンプレートを使用すると、項目とデータを視覚化する方法を定義できます。既定では、データ項目は、バインドされているデータオブジェクトの文字列表現としてリストビューに表示されます。 DisplayMemberPath をそのプロパティに設定することで、データ項目の特定のプロパティの文字列表現を表示できます。

ただし、通常は、データのより豊富なプレゼンテーションを表示する必要がある場合があります。リストビューまたはグリッドビューの項目の表示方法を指定するには、 DataTemplate クラスを作成します。 DataTemplate の XAML は、個々の項目の表示に使用されるコントロールのレイアウトと外観を定義します。レイアウト内のコントロールは、データオブジェクトのプロパティにバインドすることも、インラインで定義された静的コンテンツを含めることもできます。

重要

DataTemplate で x:Bind マークアップ拡張機能を使用する場合は、データテンプレートでデータ型 (x:DataType) を指定する必要があります。

単純な ListView データテンプレート

この例では、データ項目は単純な文字列です。文字列の左側に画像を追加し、その文字列を teal で表示するには、ListView 定義内で DataTemplate をインラインで定義します。これは、メソッド 1 のオプション 1 を使用して前に作成したのと同じ ListView コントロールです。

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

単純な ListView データテンプレートを適用すると、データ項目がどのように表示されるかを次に示します。

単純な ListView データテンプレートが適用された後に表示されるリストのスクリーンショット。

カスタムクラスオブジェクトの ListView データテンプレート

次の例では、データ項目は Contact オブジェクトです。連絡先名と会社の左側に連絡先イメージを追加するには、ListView 定義内で DataTemplate をインラインで定義します。この ListView データテンプレートは、前に示したように、方法 2 のオプション 2 で作成されました。

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

カスタムクラスオブジェクトに ListView データテンプレートを適用すると、データ項目がどのように表示されるかを次に示します。

カスタムクラスオブジェクトの ListView データテンプレートが適用された後に表示されるリストのスクリーンショット。

データテンプレートは、ListView の外観を定義する主要な方法です。また、リストに多数のアイテムが含まれる場合、パフォーマンスに大きな影響を与える可能性があります。

前のコードに示すように、ListView または GridView 定義内でインラインでデータテンプレートを定義することも、Resources セクションで個別に定義することもできます。 ListView または GridView 定義の外部で定義する場合は、データテンプレートに x:Key 属性を指定し、そのキーを使用して ListView または GridView の ItemTemplate プロパティに割り当てる必要があります。

データテンプレートと項目コンテナーを使用してリストまたはグリッドの項目の外観を定義する詳しい方法とその例については、「項目コンテナーやテンプレート」をご覧ください。

項目のレイアウト変更

ListView コントロールまたは GridView コントロールに項目を追加すると、項目コンテナー内の各項目が自動的にラップされ、すべての項目コンテナーがレイアウトされます。これらの項目コンテナーのレイアウト方法は、コントロールの ItemsPanel プロパティによって異なります。

ListView では、既定で ItemsStackPanel が使用され、垂直リストが生成されます。
GridView では ItemsWrapGrid を使用します。項目は水平方向に追加され、垂直方向に折り返しとスクロールが行われます。

項目パネルのプロパティを調整して項目のレイアウトを変更したり、既定のパネルを別のパネルに置き換えたりすることができます。

注意

ItemsPanel を変更する場合は、仮想化 を無効にしないでください 。 ItemsStackPanel と ItemsWrapGrid はどちらも仮想化をサポートしているため、これらのクラスは安全に使用できます。他のパネルを使用すると、仮想化が無効になり、リストビューのパフォーマンスが低下する場合があります。詳しくは、「Performance (パフォーマンス)」のリストビューに関する記事をご覧ください。

この例では、ItemsStackPanel の Orientation プロパティを変更して、ListView コントロールの項目コンテナーを水平方向のリストにレイアウトする方法を示します。

リストビューは垂直方向にスクロールするため、既定では、リストビューの内部 ScrollViewer の一部のプロパティを調整して水平方向にスクロールさせる必要もあります。

ScrollViewer.HorizontalScrollMode を [有効] または [自動] に変更します。
ScrollViewer.HorizontalScrollBarVisibility を [自動] に変更します。
ScrollViewer.VerticalScrollMode を [無効] に変更します。
ScrollViewer.VerticalScrollBarVisibility を [非表示] に変更します。

重要

次の例は、リストビューの幅が制約されていない状態で示されているため、水平スクロールバーは表示されません。このコードを実行すると、ListView にスクロールバーを表示するように設定 Width="180" できます。

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

リストの表示方法を次に示します。

水平リストビューのスクリーンショット。

次の例では、ListView は ItemsStackPanel の代わりに ItemsWrapGrid を使用して、垂直折り返しリスト内の項目をレイアウトします。

重要

コントロールがコンテナーをラップするように強制するには、リストビューの高さを制限する必要があります。

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

リストの表示方法を次に示します。

グリッドレイアウトを含むリストビューのスクリーンショット。

リストビューにグループ化されたデータを表示する場合、ItemsPanel は、個々のアイテムのレイアウト方法ではなく、アイテムグループのレイアウト方法を決定します。たとえば、前に示した水平 ItemsStackPanel を使用してグループ化されたデータを表示する場合、グループは水平方向に配置されますが、次に示すように、各グループ内の項目は垂直に積み重ねられます。

グループ化された水平リストビューのスクリーンショット。.

項目の選択と操作

ユーザーがリストビューを操作できるようにするさまざまな方法から選択できます。既定では、ユーザーは 1 つの項目を選択できます。 SelectionMode プロパティを変更することで、複数選択を有効にしたり、選択を無効にしたりできます。 IsItemClickEnabled プロパティを設定すると、ユーザーがアイテム (ボタンなど) をクリックして、アイテムを選択する代わりにアクションを呼び出すことができます。

注意

ListView と GridView はどちらも、 SelectionMode プロパティに ListViewSelectionMode 列挙を使用します。 IsItemClickEnabled は既定で False に設定されているため、クリックモードを有効にするためにのみ設定する必要があります。

次の表に、ユーザーがリストビューを操作する方法と、その操作に対する応答方法を示します。

有効にする操作:	使用する設定:	処理するイベント:	選択された項目の取得に使うプロパティ:
操作なし	SelectionMode="None" IsItemClickEnabled="False"	該当なし	なし
単一選択	SelectionMode="Single" IsItemClickEnabled="False"	SelectionChanged	SelectedItem Selectedindex
複数選択	SelectionMode="Multiple" IsItemClickEnabled="False"	SelectionChanged	SelectedItems
拡張選択	SelectionMode="Extended" IsItemClickEnabled="False"	SelectionChanged	SelectedItems
クリック	SelectionMode="None" IsItemClickEnabled="True"	ItemClick	該当なし

注意

SelectionMode が Single、 Multiple、または Extended に設定されている間に、IsItemClickEnabled を有効にして ItemClick イベントを発生させることができます。その場合、ItemClick イベントが最初に発生し、次に SelectionChanged イベントが発生します。場合によっては (たとえば、ItemClick イベントハンドラー内の別のページに移動した場合)、SelectionChanged イベントは発生せず、項目は選択されません。

次に示すように、XAML またはコードでこれらのプロパティを設定できます。

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>

myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

読み取り専用

SelectionMode プロパティを ListViewSelectionMode.None に設定することで、項目の選択を無効にすることができます。これにより、コントロールは読み取り専用モードになるため、データの表示には使用されますが、操作には使用されません。つまり、項目の選択は無効になっていますが、コントロール自体は無効です。

単一選択

次の表では、SelectionMode が Single に設定されている場合のキーボード、マウス、タッチ操作について説明します。

修飾キー	操作
None	ユーザーは、スペースバー、マウスクリック、またはタップを使用して、1 つの項目を選択できます。
Ctrl	ユーザーは、スペースバー、マウスクリック、またはタップを使用して、1 つの項目の選択を解除できます。方向キーを使用すると、ユーザーは選択範囲に関係なくフォーカスを移動できます。

SelectionMode を Single に設定すると、 SelectedItem プロパティから選択したデータ項目を取得できます。 SelectedIndex プロパティを使用すると、選択した項目のコレクション内のインデックスを取得できます。項目が選択されていない場合、SelectedItem は null になり、SelectedIndex は -1 になります。

Items コレクションにない項目を SelectedItem として設定しようとすると、操作は無視され、SelectedItem は null になります。ただし、SelectedIndex をリスト内の項目の範囲外のインデックスに設定しようとすると、System.ArgumentException 例外が発生します。

複数選択

次の表では、SelectionMode が [複数] に設定されている場合のキーボード、マウス、タッチ操作について説明します。

修飾キー	操作
None	ユーザーは、スペースバー、マウスクリック、またはタップを使用して複数の項目を選択して、フォーカスされた項目を選択できます。方向キーを使用すると、ユーザーは選択とは無関係にフォーカスを移動できます。
Shift	ユーザーは、選択範囲の最初の項目をクリックまたはタップし、選択範囲の最後の項目をクリックまたはタップすることで、連続する複数の項目を選択できます。方向キーを使用すると、ユーザーは Shift キーを選択したときに選択した項目から始まる連続する項目を選択できます。

拡張選択

次の表では、SelectionMode が Extended に設定されている場合のキーボード、マウス、タッチ操作について説明します。

修飾キー	操作
None	Single の選択と同じです。
Ctrl	ユーザーは、スペースバー、マウスクリック、またはタップを使用して複数の項目を選択して、フォーカスされた項目を選択できます。方向キーを使用すると、ユーザーは選択範囲に関係なくフォーカスを移動できます。
Shift	ユーザーは、選択範囲の最初の項目をクリックまたはタップし、選択範囲の最後の項目をクリックまたはタップすることで、連続する複数の項目を選択できます。方向キーを使用すると、ユーザーは Shift キーを選択したときに選択した項目から始まる連続する項目を選択できます。

SelectionMode を Multiple または Extended に設定すると、 SelectedItems プロパティから選択したデータ項目を取得できます。

SelectedIndex、SelectedItem、SelectedItems の各プロパティは同期されます。たとえば、SelectedIndex を -1 に設定した場合、SelectedItem は null に設定され、SelectedItems は空になります。また、SelectedItem を null に設定すると、SelectedIndex は -1 に設定され、SelectedItems は空になります。

複数選択モードの場合、SelectedItem には最初に選択された項目が含まれ、Selectedindex には最初に選択した項目のインデックスが含まれます。

選択範囲の変更への対応

リストビューにおける選択内容の変更に対応するには、SelectionChanged イベントを処理します。イベントハンドラーのコードでは、SelectionChangedEventArgs.AddedItems プロパティから選ばれた項目の一覧を取得できます。選択が解除された項目は、SelectionChangedEventArgs.RemovedItems プロパティから取得できます。 AddedItems コレクションと RemovedItems コレクションには、Shift キーを押しながら項目の範囲を選択しない限り、最大 1 つの項目が含まれます。

次の例は、SelectionChanged イベントを処理し、さまざまな Item コレクションにアクセスする方法を示しています。

<StackPanel HorizontalAlignment="Right">
    <ListView x:Name="listView1" SelectionMode="Multiple"
              SelectionChanged="ListView1_SelectionChanged">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
    <TextBlock x:Name="selectedItem"/>
    <TextBlock x:Name="selectedIndex"/>
    <TextBlock x:Name="selectedItemCount"/>
    <TextBlock x:Name="addedItems"/>
    <TextBlock x:Name="removedItems"/>
</StackPanel>

private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listView1.SelectedItem != null)
    {
        selectedItem.Text =
            "Selected item: " + listView1.SelectedItem.ToString();
    }
    else
    {
        selectedItem.Text =
            "Selected item: null";
    }
    selectedIndex.Text =
        "Selected index: " + listView1.SelectedIndex.ToString();
    selectedItemCount.Text =
        "Items selected: " + listView1.SelectedItems.Count.ToString();
    addedItems.Text =
        "Added: " + e.AddedItems.Count.ToString();
    removedItems.Text =
        "Removed: " + e.RemovedItems.Count.ToString();
}

クリックモード

リストビューを変更して、ユーザーがボタンやその他の項目を選択する代わりにクリックするようにすることができます。たとえば、ユーザーがリストまたはグリッド内の項目をクリックしたときにアプリで新しいページが開く場合に便利です。

この動作を有効にするには、次のように設定します。

SelectionMode を None に設定します。
IsItemClickEnabled を True に設定 します。
ItemClick イベントを処理して、ユーザーがアイテムをクリックしたときに何かを行います。

クリックできる項目を持つリストビューの例を次に示します。 ItemClick イベントハンドラーのコードは、アプリで新しいページを開きます。

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
    <x:String>Page 1</x:String>
    <x:String>Page 2</x:String>
    <x:String>Page 3</x:String>
    <x:String>Page 4</x:String>
    <x:String>Page 5</x:String>
</ListView>

private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
    switch (e.ClickedItem.ToString())
    {
        case "Page 1":
            this.Frame.Navigate(typeof(Page1));
            break;

        case "Page 2":
            this.Frame.Navigate(typeof(Page2));
            break;

        case "Page 3":
            this.Frame.Navigate(typeof(Page3));
            break;

        case "Page 4":
            this.Frame.Navigate(typeof(Page4));
            break;

        case "Page 5":
            this.Frame.Navigate(typeof(Page5));
            break;

        default:
            break;
    }
}

プログラムを使った一定範囲の項目の選択

場合によっては、ListView 項目の選択をプログラムで操作することが必要になる場合があります。たとえば、[ すべて選択 ] ボタンを表示して、ユーザーがリスト内のすべてのアイテムを選択できるようにすることができます。この場合、SelectedItems コレクションの項目を 1 つずつ追加および削除することは、通常はあまり効率的ではありません。各項目の変更によって SelectionChanged イベントが発生し、インデックス値を操作する代わりにアイテムを直接操作すると、項目は仮想化解除されます。

SelectAll、SelectRange、および DeselectRange の各メソッドを使用して、SelectedItems プロパティを使用するよりも選択範囲を変更する方が効率的です。これらのメソッドは、項目インデックスの範囲を使用して項目を選択 (または選択解除) します。インデックスのみを使うため、仮想化された項目は仮想化の状態を維持します。元の選択状態に関係なく、指定範囲のすべての項目が選択 (または選択解除) されます。 SelectionChanged イベントは、このメソッドを 1 回呼び出すたびに 1 回のみ発生します。

重要

SelectionMode プロパティが Multiple または Extended に設定されている場合にのみ、これらのメソッドを呼び出す必要があります。 SelectionMode が Single または None のときに SelectRange を呼び出すと、例外がスローされます。

インデックス範囲を使用して項目を選択する場合は、 SelectedRanges プロパティを使用して、リスト内の選択したすべての範囲を取得します。

ItemsSource プロパティが IItemsRangeInfo を実装し、これらのメソッドを使用して選択範囲を変更する場合、AddedItems プロパティと RemovedItems プロパティは SelectionChangedEventArgs では設定されません。このプロパティを設定するには、項目オブジェクトの仮想化を解除する必要があります。代わりに SelectedRanges プロパティを使って項目を取得します。

SelectAll メソッドを呼び出すと、コレクション内のすべての項目を選択できます。ただし、すべての項目の選択を解除するメソッドはありません。すべての項目の選択を解除するには、DeselectRange を呼び出して ItemIndexRange を渡します。このとき、FirstIndex 値を 0 とし、Length 値をコレクション内の項目数と同じ値にします。次の例に、すべての項目を選択するオプションを示します。

<StackPanel Width="160">
    <Button Content="Select all" Click="SelectAllButton_Click"/>
    <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
    <ListView x:Name="listView1" SelectionMode="Multiple">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</StackPanel>

private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.SelectAll();
    }
}

private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
    }
}

選択した項目の外観を変更する方法について詳しくは、「項目コンテナーやテンプレート」をご覧ください。

ドラッグアンドドロップ

ListView コントロールと GridView コントロールは、独自のコントロール内、およびそれ自体と他の ListView コントロールと GridView コントロールの間での項目のドラッグアンドドロップをサポートします。ドラッグアンドドロップ機能の実装の詳細については、「ドラッグアンドドロップ」を参照してください。

サンプルコードを入手する

XAML ListView と GridView のサンプル: ListView コントロールと GridView コントロールを示します。
XAML ドラッグアンドドロップのサンプル: ListView コントロールを使用したドラッグアンドドロップを示します。
WinUI ギャラリーのサンプル - すべての XAML コントロールを対話型形式で表示します。

リストビューとグリッドビュー

ListView と GridView の比較

ListView

GridView

どのコレクションコントロールを使用するべきか? ItemsRepeater との比較

ListViewと GridView

ItemsRepeater

UWP と WinUI 2

リストビューまたはグリッドビューを作成する

ListView コントロールまたは GridView コントロールに項目を追加する

データテンプレートを使用して外観をカスタマイズする

単純な ListView データテンプレート

カスタムクラスオブジェクトの ListView データテンプレート

項目のレイアウト変更

項目の選択と操作

読み取り専用

単一選択

複数選択

拡張選択

選択範囲の変更への対応

クリックモード

プログラムを使った一定範囲の項目の選択

ドラッグアンドドロップ

サンプルコードを入手する

フィードバック

その他のリソース

リスト ビューとグリッド ビュー

ListView と GridView の比較

ListView

GridView

どのコレクション コントロールを使用するべきか? ItemsRepeater との比較

ListViewと GridView

ItemsRepeater

UWP と WinUI 2

リスト ビューまたはグリッド ビューを作成する

ListView コントロールまたは GridView コントロールに項目を追加する

データ テンプレートを使用して外観をカスタマイズする

単純な ListView データ テンプレート

カスタム クラス オブジェクトの ListView データ テンプレート

項目のレイアウト変更

項目の選択と操作

読み取り専用

単一選択

複数選択

拡張選択

選択範囲の変更への対応

クリック モード

プログラムを使った一定範囲の項目の選択

ドラッグ アンド ドロップ

サンプル コードを入手する

関連記事

フィードバック

その他のリソース

リストビューとグリッドビュー

どのコレクションコントロールを使用するべきか? ItemsRepeater との比較

リストビューまたはグリッドビューを作成する

データテンプレートを使用して外観をカスタマイズする

単純な ListView データテンプレート

カスタムクラスオブジェクトの ListView データテンプレート

クリックモード

ドラッグアンドドロップ

サンプルコードを入手する