リスト ビューとグリッド ビューList view and grid view

ほとんどのアプリでは、イメージ ギャラリー、メール メッセージなどのデータのセットを操作および表示します。Most applications manipulate and display sets of data, such as a gallery of images or a set of email messages. XAML UI フレームワークでは、アプリ内でデータを簡単に表示、操作するための ListView コントロールと GridView コントロールが用意されています。The XAML UI framework provides ListView and GridView controls that make it easy to display and manipulate data in your app.

重要な API:ListView クラスGridView クラスItemsSource プロパティItems プロパティImportant APIs: ListView class, GridView class, ItemsSource property, Items property

注意

ListView と GridView はどちらも ListViewBase クラスから派生しているため、同じ機能を持ちますが、データの表示方法が異なります。ListView and GridView both derive from the ListViewBase class, so they have the same functionality, but display data differently. この記事では、特に指定がない限り、リスト ビューについての説明は ListView コントロールにも GridView コントロールにも適用されます。In this article, when we talk about list view, the info applies to both the ListView and GridView controls unless otherwise specified. ListView や ListViewItem などのクラスの説明については、プレフィックスの "List" を "Grid" に置き換えることで、対応するグリッド クラス (GridView または GridViewItem) に適用できます。We may refer to classes like ListView or ListViewItem, but the List prefix can be replaced with Grid for the corresponding grid equivalent (GridView or GridViewItem).

ListView と GridView は、コレクションと併用すると多くのメリットがあります。ListView and GridView provide many benefits for working with collections. この 2 つはどちらも実装が容易で、基本的な UI、対話、スクロール処理が提供されるだけでなく、簡単にカスタマイズすることもできます。They are both easy to implement and provide basic UI; interaction; and scrolling while still being easily customizable. ListView と GridView は、既存の動的データ ソース、あるいは XAML 自体またはコードビハインドで提供されるハードコーディングされたデータにバインドできます。ListView and GridView can be bound to existing dynamic data sources, or hard-coded data provided in the XAML itself/the code-behind.

これら 2 つのコントロールは多くのユース ケースで柔軟に利用できますが、最適な動作を得るには、すべての項目が同じ基本的な構造と外観を持ち、同じ対話動作をする (クリックされたときに、リンクの表示や移動など、同じアクションを実行する) コレクションと一緒に使用する必要があります。These two controls are flexible to many use cases, but overall work best with collections in which all items should have the same basic structure and appearance, as well as the same interaction behavior - i.e. they should all perform the same action when clicked (open a link, navigate, etc).

ListView と GridView の違いDifferences between ListView and GridView

ListViewListView

ListView では、データを縦方向の 1 列に並べて表示します。The ListView displays data stacked vertically in a single column. ListView は、焦点としてテキストが含まれる項目や、アルファベット順など、上から下へ読み取ることを意図したコレクションの場合に適しています。ListView works better for items that have text as a focal point, and for collections that are meant to be read top to bottom (i.e. alphabetically ordered). ListView の一般的な使用例としては、メッセージや検索結果の一覧などがあります。A few common use cases for ListView include lists of messages and search results. 複数の列またはテーブルのような形式で表示する必要があるコレクションでは、ListView を使用しては "ならず"、代わりに DataGrid を使用する必要があります。Collections that need to be displayed in multiple columns or in a table-like format should not use ListView, but should look into using a DataGrid instead.

グループ化されたデータを表示するリスト ビュー

GridViewGridView

GridView は、縦方向にスクロールできる複数行と複数列で項目のコレクションを表示します。The GridView presents a collection of items in rows and columns that can scroll vertically. データはまず横方向に並べられ、すべての列にデータが入ると、次の行に折り返して並べられます。Data is stacked horizontally until it fills the columns, then continues with the next row. GridView は、焦点として画像が含まれる項目や、横方向に読み取ることのできるコレクション、または特定の順序で並び替えられていないコレクションの場合に適しています。GridView works better for items that have images as their focal point, and for collections that can be read from side-to-side or are not sorted in a specific order. GridView の一般的なユース ケースは、写真や製品ギャラリーです。A common use case for GridView is a photo or product gallery.

コンテンツ ライブラリの例

どのコレクション コントロールを使用するべきか?Which collection control should you use? ItemsRepeater との比較A Comparison with ItemsRepeater

ListView と GridView は、組み込みの UI と UX を使用して任意のコレクションを表示するためにすぐに使用できるコントロールです。ListView and GridView are controls that work out-of-the-box to display any collection, with their own built-in UI and UX. ItemsRepeater コントロールも、コレクションを表示するために使用されますが、UI のニーズに的確に対応したカスタム コントロールを作成するための構成要素として作成されています。The ItemsRepeater control also is used to display collections, but was created as a building block for creating a custom control that fits your exact UI needs. 最終的にどのコントロールを使用するかに影響を与える最も重要な相違点を次に示します。The most important differences that should impact which control you end up using are below:

  • ListView と GridView は、豊富な機能を備えたコントロールで、カスタマイズをほとんど必要としませんが、多くのカスタマイズも可能です。ListView and GridView are feature-rich controls that require little customization but offer plenty. ItemsRepeater は、独自のレイアウト コントロールを作成するための構成要素であり、同じ組み込み機能は備えていません。必要な機能や相互作用を自分で実装する必要があります。ItemsRepeater is a building block to create your own layout control and does not have the same built in features and functionality - it requires you to implement any necessary features or interactions.
  • ItemsRepeater は、ListView または GridView では作成できない高度なカスタム UI の場合、または項目ごとに大幅に異なる動作を必要とするデータ ソースがある場合に使用する必要があります。ItemsRepeater should be used if you have a highly custom UI that you can’t create using ListView or GridView, or if you have a data source that requires highly different behavior for each item.

ItemsRepeater の詳細については、ガイドラインAPI ドキュメントのページをご覧ください。Learn more about ItemsRepeater by reading its Guidelines and API Documentation pages.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、ListView または GridView の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the ListView or GridView in action.

ListView または GridView を作成するCreate a ListView or GridView

ListView と GridView はどちらも ItemsControl 型であるため、任意の型の項目のコレクションを含めることができます。ListView and GridView are both ItemsControl types, so they can contain a collection of items of any type. ListView または GridView を使って画面に項目を表示するには、あらかじめ Items コレクションに項目を追加しておく必要があります。A ListView or GridView must have items in its Items collection before it can show anything on the screen. ビューのデータを設定するには、項目を直接 Items コレクションに追加するか、データ ソースに ItemsSource プロパティを設定します。To populate the view, you can add items directly to the Items collection, or set the ItemsSource property to a data source.

重要

リストにデータを設定するときには Items または ItemsSource を使用しますが、同時に両方を使用することはできません。You can use either Items or ItemsSource to populate the list, but you can't use both at the same time. ItemsSource プロパティを設定して XAML で項目を追加した場合、追加された項目は無視されます。If you set the ItemsSource property and you add an item in XAML, the added item is ignored. ItemsSource プロパティを設定してコードで Items コレクションに項目を追加した場合、例外がスローされます。If you set the ItemsSource property and you add an item to the Items collection in code, an exception is thrown.

この記事の例の多くでは、説明を簡単にするために Items コレクションを直接設定しています。Many of the examples in this article populate the Items collection directly for the sake of simplicity. ただし、リストの項目は、オンライン データベースの書籍一覧など、動的なソースから取得される方が一般的です。However, it's more common for the items in a list to come from a dynamic source, like a list of books from an online database. このようなケースでは、ItemsSource プロパティを使用します。You use the ItemsSource property for this purpose.

ListView または GridView に項目を追加するAdd Items to a ListView or GridView

XAML またはコードを使用して ListView または GridView の Items コレクションに項目を追加すると、同じ結果が得られます。You can add items to the ListView or GridView's Items collection using XAML or code to yield the same result. 通常、項目が少数で変わらず、簡単に定義できる場合や、実行時にコードで項目を生成する場合は、XAML を使用して項目を追加します。You typically add items through XAML if you have a small number of items that don't change and are easily defined, or if you generate the items in code at run time.

方法 1:Items コレクションに項目を追加するMethod 1: Add items to the Items Collection

オプション 1:XAML を使用した項目の追加Option 1: Add Items through 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:C# を使用した項目の追加Option 2: Add Items through C#

C# コード:C# Code:
// 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 (that you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits); 
対応する XAML コード:Corresponding XAML Code:
<StackPanel Name="FruitsPanel"></StackPanel>

上記のどちらのオプションでも、次に示すような同じ ListView が生成されます。Both of the above options will result in the same ListView, which is shown below:

果物の一覧を表示している単純なリスト ビューのスクリーンショット。 Screenshot of a simple List View showing a list of fruits.
方法 2:ItemsSource を設定して項目を追加する Method 2: Add items by setting the ItemsSource

通常、ListView または GridView では、データベースやインターネットなどのソースからデータを表示します。You typically use a ListView or GridView to display data from a source such as a database or the Internet. データ ソースから ListView/GridView にデータを設定するには、ItemsSource プロパティをデータ項目のコレクションに設定します。To populate a ListView/GridView from a data source, you set its ItemsSource property to a collection of data items. この方法は、次の例に示すように、ListView または GridView にカスタム クラスのオブジェクトを保持する場合に適しています。This method works better if your ListView or GridView is going to hold custom class objects, as shown in the examples below.

オプション 1:C# で ItemsSource を設定するOption 1: Set ItemsSource in C#

以下の例では、コードでコレクションのインスタンスに直接リスト ビューの ItemsSource を設定しています。Here, the list view's ItemsSource is set in code directly to an instance of a collection.

C# コード:C# Code:
// Class defintion 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 below, 
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// Contact objects are created 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", "ABC Printers"));
Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));

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

// Add the ListView to a parent container in the visual tree (that you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);
XAML コード:XAML Code:
<StackPanel x:Name="ContactPanel"></StackPanel>

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

ItemsSource プロパティを、XAML でコレクションにバインドすることもできます。You can also bind the ItemsSource property to a collection in the XAML. ここでは、ページのプライベート データ コレクション _contacts を公開する Contacts という名前のパブリック プロパティに ItemsSource をバインドします。Here, the ItemsSource is bound to a public property named Contacts that exposes the Page's private data collection, _contacts.

XAMLXAML

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

C#C#

// Class defintion should be provided within the namespace being used, outside of any other classes.
// These two declarations belong outside of the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

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

// This method should be defined 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", "ABC Printers"));
    Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
    Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));
}

上記のどちらのオプションでも、次に示すような同じ ListView が生成されます。Both of the above options will result in the same ListView, shown below. この ListView には、データ テンプレートを指定しなかったため、各項目の文字列表現のみが表示されます。The ListView only shows the string representation of each item because we did not provide a data template.

ItemsSource で設定した単純なリスト ビュー

重要

データ テンプレートを定義しない場合、カスタム クラス オブジェクトで ListView に文字列値が表示されるのは、ToString () メソッドが定義されている場合のみです。With no data template defined, custom class objects will only appear in the ListView with their string value if they have a defined ToString() method.

次のセクションでは、ListView または GridView で、単純なカスタム クラス項目を視覚的に表現する方法について詳しく説明します。The next section will go into detail on how to visually represent simple and custom class items properly in a ListView or GridView.

データ バインディングについて詳しくは、「データ バインディングの概要」をご覧ください。For more info about data binding, see Data binding overview.

注意

リスト ビューにグループ化されたデータを表示する必要がある場合は、CollectionViewSource にバインドします。If you need to show grouped data in your ListView, you must bind to a CollectionViewSource. CollectionViewSource は XAML のコレクション クラスのプロキシとして機能し、グループ化サポートを有効にします。The CollectionViewSource acts as a proxy for the collection class in XAML and enables grouping support. 詳しくは、CollectionViewSource をご覧ください。For more info, see CollectionViewSource.

DataTemplate を使用して項目の外観をカスタマイズするCustomizing the look of items with a DataTemplate

ListView または GridView のデータ テンプレートでは、項目やデータをどのように視覚化するかを定義します。A data template in a ListView or GridView defines how the items/data are visualized. 既定では、データ項目は、バインドされているデータ オブジェクトの文字列表現として ListView に表示されます。By default, a data item is displayed in the ListView as the string representation of the data object it's bound to. データ項目の特定のプロパティに DisplayMemberPath を設定すると、そのプロパティの文字列表現を表示できます。You can show the string representation of a particular property of the data item by setting the DisplayMemberPath to that property.

しかし、通常はもっとリッチな表現でデータを表示する必要があります。However, you typically want to show a more rich presentation of your data. ListView/GridView で項目を表示する方法を正確に指定するには、DataTemplate を作成します。To specify exactly how items in the ListView/GridView are displayed, you create a DataTemplate. DataTemplate の XAML では、個々の項目を表示するために使うコントロールのレイアウトと外観を定義します。The XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. レイアウト内のコントロールでは、データ オブジェクトのプロパティにバインドすることも、静的コンテンツをインラインで定義することもできます。The controls in the layout can be bound to properties of a data object, or have static content defined inline.

注意

DataTemplate で x:Bind マークアップ拡張を使う場合、DataTemplate に DataType (x:DataType) を指定する必要があります。When you use the x:Bind markup extension in a DataTemplate, you have to specify the DataType (x:DataType) on the DataTemplate.

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

この例では、データ項目は単純な文字列です。In this example, the data item is a simple string. DataTemplate は ListView 定義内にインラインで定義し、文字列の左側に画像を追加し、文字列を青緑色で表示します。A DataTemplate is defined inline within the ListView definition to add an image to the left of the string, and show the string in teal. これは、上記の方法 1 とオプション 1 を使用して作成したものと同じ ListView です。This is the same ListView created from using Method 1 and Option 1 shown above.

XAMLXAML

<!--No corresponding C# 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 にデータ項目を表示すると、次のようになります。Here's what the data items look like when displayed with this data template in a ListView:

データ テンプレートを使った ListView 項目

カスタム クラス オブジェクト用の ListView データ テンプレートListView Data Template for Custom Class Objects

この例では、データ項目は Contact オブジェクトです。In this example, the data item is a Contact object. DataTemplate は ListView 定義内にインラインで定義し、連絡先の名前と会社の左側に連絡先の画像を追加します。A DataTemplate is defined inline within the ListView definition to add the contact image to the left of the Contact name and company. この ListView は、前述のメソッド 2 とオプション 2 を使用して作成したものです。This ListView was created by using Method 2 and Option 2 mentioned above.

<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 にデータ項目を表示すると、次のようになります。Here's what the data items look like when displayed using this data template in a ListView:

データ テンプレートを使った ListView のカスタム クラス項目

データ テンプレートは、ListView の外観を定義する主要な方法です。Data templates are the primary way you define the look of your ListView. また、リストに多数の項目が含まれている場合、パフォーマンスが大幅に低下することがあります。They can also have a significant impact on performance if your list holds a large number of items.

データ テンプレートは、前述のように ListView/GridView 定義内にインラインで定義できるほか、リソース セクション内で別個に定義することもできます。Your data template can be defined inline within the ListView/GridView definition (shown above), or separately in a Resources section. ListView/GridView 自体の外部で定義する場合、DataTemplate には x:Key 属性を指定する必要があり、そのキーを使用して ListView または GridView の ItemTemplate プロパティに DataTemplate を割り当てる必要があります。If defined outside of the ListView/GridView itself, the DataTemplate must be given an x:Key attribute and be assigned to the ItemTemplate property of the ListView or GridView using that key.

データ テンプレートと項目コンテナーを使用してリストまたはグリッドの項目の外観を定義する詳しい方法とその例については、「項目コンテナーやテンプレート」をご覧ください。For more info and examples of how to use data templates and item containers to define the look of items in your list or grid, see Item containers and templates.

項目のレイアウト変更Change the layout of items

ListView または GridView に項目を追加すると、コントロールによって項目コンテナー内で各項目が自動的に折り返され、すべての項目コンテナーがレイアウトされます。When you add items to a ListView or GridView, the control automatically wraps each item in an item container and then lays out all of the item containers. この項目コンテナーのレイアウト方法は、コントロールの ItemsPanel によって決まります。How these item containers are laid out depends on the ItemsPanel of the control.

  • ListView では既定で ItemsStackPanel が使用され、次のような縦 1 列のリストが生成されます。By default, ListView uses an ItemsStackPanel, which produces a vertical list, like this.

項目の一覧を表示している単純なリスト ビューのスクリーンショット。

  • GridView では ItemsWrapGrid が使用されます。次のように、項目が水平方向に追加され、折り返されて縦方向にスクロールします。GridView uses an ItemsWrapGrid, which adds items horizontally, and wraps and scrolls vertically, like this.

単純なグリッド ビュー

項目のレイアウトを変更するには、項目パネルのプロパティを調整するか、既定のパネルを別のパネルに置き換えます。You can modify the layout of items by adjusting properties on the items panel, or you can replace the default panel with another panel.

注意

ItemsPanel を変更する場合、仮想化を無効にしないようにご注意ください。Be careful to not disable virtualization if you change the ItemsPanel. ItemsStackPanelItemsWrapGrid はどちらも仮想化をサポートしており、安全に使用できます。Both ItemsStackPanel and ItemsWrapGrid support virtualization, so these are safe to use. 他のパネルを使用すると、仮想化が無効になり、リスト ビューのパフォーマンスが低下する場合があります。If you use any other panel, you might disable virtualization and slow the performance of the list view. 詳しくは、「Performance (パフォーマンス)」のリスト ビューに関する記事をご覧ください。For more info, see the list view articles under Performance.

この例では、ItemsStackPanelOrientation プロパティを変更することで、ListView に項目コンテナーを横 1 列にレイアウトする方法を示しています。This example shows how to make a ListView lay out its item containers in a horizontal list by changing the Orientation property of the ItemsStackPanel. リスト ビューは既定で縦方向にスクロールするため、横方向にスクロールさせるには、リスト ビュー内部の ScrollViewer のプロパティもいくつか調整する必要があります。Because the list view scrolls vertically by default, you also need to adjust some properties on the list view’s internal ScrollViewer to make it scroll horizontally.

重要

ここに示す例ではリスト ビューの幅が規定されていないため、水平スクロール バーは表示されません。These examples are shown with the list view width unconstrained, so the horizontal scrollbars are not shown. このコードを実行する場合、ListView に Width="180" を設定してスクロール バーを表示することができます。If you run this code, you can set Width="180" on the ListView to make the scrollbars show.

XAMLXAML

<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>

このリストは次のように表示されます。The resulting list looks like this.

横長のリスト ビュー

次の例の ListView では、ItemsStackPanel ではなく ItemsWrapGrid を使用して、縦方向に折り返すリストで項目をレイアウトします。In the next example, the ListView lays out items in a vertical wrapping list by using an ItemsWrapGrid instead of an ItemsStackPanel.

重要

コントロールでコンテナーを折り返すには、リスト ビューの高さを規定する必要があります。The height of the list view must be constrained to force the control to wrap the containers.

XAMLXAML

<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>

このリストは次のように表示されます。The resulting list looks like this.

グリッド レイアウトを使ったリスト ビュー

グループ化したデータをリスト ビューに表示する場合、ItemsPanel によって指定されるのは個々の項目のレイアウト方法ではなく、項目グループのレイアウト方法です。たとえば、前に示した横方向の ItemsStackPanel を使用して、グループ化されたデータを表示する場合、次に示すようにグループは横方向に配置されますが、各グループの項目は縦に重ねて表示されます。If you show grouped data in your list view, the ItemsPanel determines how the item groups are layed out, not how the individual items are layed out. For example, if the horizontal ItemsStackPanel shown previously is used to show grouped data, the groups are arranged horizontally, but the items in each group are still stacked vertically, as shown here.

グループ化された横方向のリスト ビュー

項目の選択と操作Item selection and interaction

ユーザーがリスト ビューを操作する方法は、いくつか選ぶことができます。You can choose from various ways to let a user interact with a list view. 既定では、ユーザーは 1 つの項目を選択できます。By default, a user can select a single item. SelectionMode プロパティを変更することで、複数選択を有効にしたり、選択を無効にしたりできます。You can change the SelectionMode property to enable multi-selection or to disable selection. IsItemClickEnabled プロパティを設定することで、ユーザーが項目をクリックしたときに項目を選択するのではなく、ボタンと同じように操作を呼び出すことができます。You can set the IsItemClickEnabled property so that a user clicks an item to invoke an action (like a button) instead of selecting the item.

   ListView と GridView のどちらも、SelectionMode プロパティについては ListViewSelectionMode 列挙値を使用します。Note  Both ListView and GridView use the ListViewSelectionMode enumeration for their SelectionMode properties. IsItemClickEnabled は既定で False であるため、設定する必要があるのはクリック モードを有効にする場合のみです。IsItemClickEnabled is False by default, so you need to set it only to enable click mode.

次の表に、ユーザーがリスト ビューを操作する方法と、その操作に対する応答方法を示します。This table shows the ways a user can interact with a list view, and how you can respond to the interaction.

有効にする操作:To enable this interaction: 使用する設定:Use these settings: 処理するイベント:Handle this event: 選択された項目の取得に使うプロパティ:Use this property to get the selected item:
操作なしNo interaction SelectionMode = NoneIsItemClickEnabled = FalseSelectionMode = None, IsItemClickEnabled = False なしN/A なしN/A
単一選択Single selection SelectionMode = Single、IsItemClickEnabled = FalseSelectionMode = Single, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemSelectedIndexSelectedItem, SelectedIndex
複数選択Multiple selection SelectionMode = Multiple、IsItemClickEnabled = FalseSelectionMode = Multiple, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
拡張選択Extended selection SelectionMode = Extended、IsItemClickEnabled = FalseSelectionMode = Extended, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
クリックClick SelectionMode = None、IsItemClickEnabled = TrueSelectionMode = None, IsItemClickEnabled = True ItemClickItemClick なしN/A

  Windows 10 以降では、IsItemClickEnabled を有効にして ItemClick イベントを発生させる場合でも、SelectionMode を Single、Multiple、Extended のいずれにも設定できます。Note  Starting in Windows 10, you can enable IsItemClickEnabled to raise an ItemClick event while SelectionMode is also set to Single, Multiple, or Extended. その場合、ItemClick イベントが最初に発生し、次に SelectionChanged イベントが発生します。If you do this, the ItemClick event is raised first, and then the SelectionChanged event is raised. ただし ItemClick イベント ハンドラーで別のページに移動するような場合では、SelectionChanged イベントが発生せず、項目が選択されません。In some cases, like if you navigate to another page in the ItemClick event handler, the SelectionChanged event is not raised and the item is not selected.

次に示すように、このプロパティを XAML またはコードで設定することができます。You can set these properties in XAML or in code, as shown here.

XAMLXAML

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

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

C#C#

myListView.SelectionMode = ListViewSelectionMode.Multiple; 

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

読み取り専用Read-only

SelectionMode プロパティを ListViewSelectionMode.None に設定することで、項目の選択を無効にすることができます。You can set the SelectionMode property to ListViewSelectionMode.None to disable item selection. これによりコントロールが読み取り専用モードになり、ユーザーの操作には使われず、データの表示のみに使われます。This puts the control in read only mode, to be used for displaying data, but not for interacting with it. コントロール自体は無効にならず、項目の選択のみが無効になります。The control itself is not disabled, only item selection is disabled.

単一選択Single selection

次の表では、SelectionMode が Single の場合のキーボード操作、マウス操作、タッチ操作について説明します。This table describes the keyboard, mouse, and touch interactions when SelectionMode is Single.

修飾キーModifier key 操作Interaction
NoneNone
  • ユーザーはスペース バー、マウスのクリック、タッチ操作のタップを使って 1 つの項目を選択できます。A user can select a single item using the space bar, mouse click, or touch tap.
  • CtrlCtrl
  • ユーザーはスペース バー、マウスのクリック、タッチ操作のタップを使って 1 つの項目の選択を解除できます。A user can deselect a single item using the space bar, mouse click, or touch tap.
  • 方向キーを使うと、選択した項目とは関係なくフォーカスを移動できます。Using the arrow keys, a user can move focus independently of selection.
  • SelectionMode が Single の場合、SelectedItem プロパティから選択したデータ項目を取得できます。When SelectionMode is Single, you can get the selected data item from the SelectedItem property. SelectedIndex プロパティを使って、選択した項目のコレクション内のインデックスを取得できます。You can get the index in the collection of the selected item using the SelectedIndex property. 項目が選択されていない場合、SelectedItem は null になり、SelectedIndex は -1 になります。If no item is selected, SelectedItem is null, and SelectedIndex is -1.

    Items コレクションに含まれない項目を SelectedItem として設定しようとすると、その操作は無視され、SelectedItem が null になります。If you try to set an item that is not in the Items collection as the SelectedItem, the operation is ignored and SelectedItem isnull. ただし、リスト内の Items の範囲外のインデックスを SelectedIndex に設定しようとすると、System.ArgumentException 例外が発生します。However, if you try to set the SelectedIndex to an index that's out of the range of the Items in the list, a System.ArgumentException exception occurs.

    複数選択Multiple selection

    次の表では、SelectionMode が Multiple の場合のキーボード操作、マウス操作、タッチ操作について説明します。This table describes the keyboard, mouse, and touch interactions when SelectionMode is Multiple.

    修飾キーModifier key 操作Interaction
    NoneNone
  • ユーザーは、スペース バー、マウスのクリック、タッチ操作のタップを使って、フォーカスのある項目の選択状態を切り替えることで、複数の項目を選択できます。A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • 方向キーを使うと、選択した項目とは関係なくフォーカスを移動できます。Using the arrow keys, a user can move focus independently of selection.
  • Shift キーShift
  • ユーザーは、選択する最初の項目をクリックまたはタップした後、選択する最後の項目をクリックまたはタップすることで、複数の項目を連続的に選択できます。A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • 方向キーを使用すると、Shift キーが押されたときに選択された項目を起点として連続的に選択することができます。Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • 拡張選択Extended selection

    次の表では、SelectionMode が Extended の場合のキーボード操作、マウス操作、タッチ操作について説明します。This table describes the keyboard, mouse, and touch interactions when SelectionMode is Extended.

    修飾キーModifier key 操作Interaction
    NoneNone
  • Single の選択と同じです。The behavior is the same as Single selection.
  • CtrlCtrl
  • ユーザーは、スペース バー、マウスのクリック、タッチ操作のタップを使って、フォーカスのある項目の選択状態を切り替えることで、複数の項目を選択できます。A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • 方向キーを使うと、選択した項目とは関係なくフォーカスを移動できます。Using the arrow keys, a user can move focus independently of selection.
  • Shift キーShift
  • ユーザーは、選択する最初の項目をクリックまたはタップした後、選択する最後の項目をクリックまたはタップすることで、複数の項目を連続的に選択できます。A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • 方向キーを使用すると、Shift キーが押されたときに選択された項目を起点として連続的に選択することができます。Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • SelectionMode が Multiple または Extended の場合、選択したデータ項目を SelectedItems プロパティから取得できます。When SelectionMode is Multiple or Extended, you can get the selected data items from the SelectedItems property.

    SelectedIndexSelectedItemSelectedItems の各プロパティは同期されます。The SelectedIndex, SelectedItem, and SelectedItems properties are synchronized. たとえば、SelectedIndex を -1 に設定すると、SelectedItem は null に設定され、SelectedItems が空になります。SelectedItem を null に設定すると、SelectedIndex が -1 に設定され、SelectedItems が空になります。For example, if you set SelectedIndex to -1, SelectedItem is set to null and SelectedItems is empty; if you set SelectedItem to null, SelectedIndex is set to -1 and SelectedItems is empty.

    複数選択モードの場合、SelectedItem には最初に選択された項目が含まれ、Selectedindex には最初に選択した項目のインデックスが含まれます。In multi-select mode, SelectedItem contains the item that was selected first, and Selectedindex contains the index of the item that was selected first.

    選択範囲の変更への対応Respond to selection changes

    リスト ビューにおける選択内容の変更に対応するには、SelectionChanged イベントを処理します。To respond to selection changes in a list view, handle the SelectionChanged event. イベント ハンドラーのコードでは、SelectionChangedEventArgs.AddedItems プロパティから選ばれた項目の一覧を取得できます。In the event handler code, you can get the list of selected items from the SelectionChangedEventArgs.AddedItems property. 選択が解除された項目は、SelectionChangedEventArgs.RemovedItems プロパティから取得できます。You can get any items that were deselected from the SelectionChangedEventArgs.RemovedItems property. ユーザーが Shift キーを押しながら一連の項目を選択しない限り、AddedItems コレクションと RemovedItems コレクションに含まれる項目の数は 1 個までになります。The AddedItems and RemovedItems collections contain at most 1 item unless the user selects a range of items by holding down the Shift key.

    次の例では、SelectionChanged イベントを処理してさまざまな項目コレクションにアクセスする方法を示します。This example shows how to handle the SelectionChanged event and access the various items collections.

    XAMLXAML

    <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> 
    

    C#C#

    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();
    }
    

    クリック モードClick mode

    項目を選択するのではなく、ボタンのように項目をクリックできるように、リスト ビューを変更することができます。You can change a list view so that a user clicks items like buttons instead of selecting them. この方法は、たとえば、リストまたはグリッド内の項目をユーザーがクリックしたときに新しいページに移動するアプリで便利です。For example, this is useful when your app navigates to a new page when your user clicks an item in a list or grid. この動作を有効にするには、次のように設定します。To enable this behavior:

    • SelectionModeNone に設定します。Set SelectionMode to None.
    • IsItemClickEnabledtrue に設定します。Set IsItemClickEnabled to true.
    • ユーザーが項目をクリックしたときに処理を実行する ItemClick イベントを設定します。Handle the ItemClick event to do something when your user clicks an item.

    クリックできる項目を持つリスト ビューの例を次に示します。Here's a list view with clickable items. ItemClick イベント ハンドラーのコードによって、新しいページに移動します。The code in the ItemClick event handler navigates to a new page.

    XAMLXAML

    <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>
    

    C#C#

    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;
        }
    }
    

    プログラムを使った一定範囲の項目の選択Select a range of items programmatically

    場合によっては、プログラムからリスト ビューの項目の選択を操作する必要があります。Sometimes, you need to manipulate a list view’s item selection programmatically. たとえば、ユーザーがリスト内のすべての項目を選択できるように、 [すべて選択] ボタンを用意する場合があります。For example, you might have a Select all button to let a user select all items in a list. この場合、SelectedItems コレクションの項目を 1 つずつ追加したり削除したりすることは、一般的に効率的とは言えません。In this case, it’s usually not very efficient to add and remove items from the SelectedItems collection one by one. 各項目を変更するたびに SelectionChanged イベントが発生し、インデックス値を操作するのではなく項目を直接操作すると、項目の仮想化が解除されます。Each item change causes a SelectionChanged event to occur, and when you work with the items directly instead of working with index values, the item is de-virtualized.

    SelectAllSelectRangeDeselectRange の各メソッドを使用すると、SelectedItems プロパティを使用する場合よりも効率的に選択内容を変更できます。The SelectAll, SelectRange, and DeselectRange methods provide a more efficient way to modify the selection than using the SelectedItems property. このメソッドでは、項目インデックスの範囲を使って選択と選択解除を行います。These methods select or deselect using ranges of item indexes. インデックスのみを使うため、仮想化された項目は仮想化の状態を維持します。Items that are virtualized remain virtualized, because only the index is used. 元の選択状態に関係なく、指定範囲のすべての項目が選択 (または選択解除) されます。All items in the specified range are selected (or deselected), regardless of their original selection state. SelectionChanged イベントは、このメソッドを 1 回呼び出すたびに 1 回のみ発生します。The SelectionChanged event occurs only once for each call to these methods.

    重要

    このメソッドは、SelectionMode プロパティが Multiple または Extended に設定されているときにのみ呼び出してください。You should call these methods only when the SelectionMode property is set to Multiple or Extended. SelectionMode が Single または None のときに SelectRange を呼び出すと、例外がスローされます。If you call SelectRange when the SelectionMode is Single or None, an exception is thrown.

    インデックスの範囲を使って項目を選択する場合、SelectedRanges プロパティを使って、リスト内の選択範囲をすべて取得します。When you select items using index ranges, use the SelectedRanges property to get all selected ranges in the list.

    ItemsSource に IItemsRangeInfo を実装し、このようなメソッドを使って選択内容を変更する場合、SelectionChangedEventArgs には AddedItems プロパティと RemovedItems プロパティが設定されません。If the ItemsSource implements IItemsRangeInfo, and you use these methods to modify the selection, the AddedItems and RemovedItems properties are not set in the SelectionChangedEventArgs. このプロパティを設定するには、項目オブジェクトの仮想化を解除する必要があります。Setting these properties requires de-virtualizing the item object. 代わりに SelectedRanges プロパティを使って項目を取得します。Use the SelectedRanges property to get the items instead.

    SelectAll メソッドを呼び出すと、コレクション内のすべての項目を選択できます。You can select all items in a collection by calling the SelectAll method. ただし、すべての項目の選択を解除するメソッドはありません。However, there is no corresponding method to deselect all items. すべての項目の選択を解除するには、DeselectRange を呼び出して ItemIndexRange を渡します。このとき、FirstIndex 値を 0 とし、Length 値をコレクション内の項目数と同じ値にします。You can deselect all items by calling DeselectRange and passing an ItemIndexRange with a FirstIndex value of 0 and a Length value equal to the number of items in the collection. 次の例では、すべての項目を選択するためのオプションが示されています。This is shown in the example below, along with an option to select all items.

    XAMLXAML

    <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>
    

    C#C#

    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));
        }
    }
    

    選択した項目の外観を変更する方法について詳しくは、「項目コンテナーやテンプレート」をご覧ください。For info about how to change the look of selected items, see Item containers and templates.

    ドラッグ アンド ドロップDrag and drop

    ListView コントロールと GridView コントロールは、項目内、項目間、および他の ListView コントロールと GridView コントロール間での項目のドラッグ アンド ドロップをサポートします。ListView and GridView controls support drag and drop of items within themselves, and between themselves and other ListView and GridView controls. ドラッグ アンド ドロップのパターンの実装について詳しくは、「ドラッグ アンド ドロップ」をご覧ください。For more info about implementing the drag and drop pattern, see Drag and drop.

    サンプル コードの入手Get the sample code