項目コンテナーとテンプレート

[アーティクル]
06/02/2023

ListView コントロールと GridView コントロールでは、項目の配置方法 (水平、垂直、折り返しなど) や、ユーザーが項目を操作する方法を管理しますが、画面に個別の項目を表示する方法については管理しません。項目の視覚エフェクトは、項目コンテナーによって管理されます。リストビューに項目を追加すると、それらはコンテナーに自動的に配置されます。 ListView の既定の項目コンテナーは ListViewItem であり、GridView の既定の項目コンテナーは GridViewItem です。

重要な API:ListView クラス、GridView クラス、ListViewItem クラス、GridViewItem クラス、ItemTemplate プロパティ、ItemContainerStyle プロパティ

注意

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

ListView 項目と GridView 項目

前述のように、ListView 項目は ListViewItem コンテナーに自動的に配置され、GridView 項目は GridViewItem コンテナーに配置されます。これらの項目コンテナーは、独自の組み込みスタイルと対話機能を備えたコントロールですが、高度にカスタマイズすることもできます。ただし、カスタマイズする前に、ListViewItem と GridViewItem の推奨されるスタイルとガイドラインを良く確認してください。

ListViewItems - 主にテキストに重点をおいた項目で、細長い形状です。テキストの左側にアイコンまたは画像が表示されることがあります。
GridViewItems - 通常、項目は正方形であるか、または少なくともそれほど細長くない四角形です。項目は画像に重点をおいており、画像の周囲またはその上にテキストが表示される場合があります。

カスタマイズの概要

コンテナーコントロール (ListViewItem や GridViewItem など) は、 "データテンプレート" と "コントロールテンプレート" という 2 つの重要な部分から構成されており、これらを組み合わせることによって 1 つの項目で表示する最終的な外観が形成されます。

データテンプレート - DataTemplate をリストビューの ItemTemplate プロパティに割り当てて、個別のデータ項目の表示方法を指定します。
コントロールテンプレート - コントロールテンプレートは、表示状態など、フレームワークが担当する項目の視覚エフェクトの一部を提供します。 ItemContainerStyle プロパティを使って、コントロールテンプレートを変更できます。通常では、これを使用して、ブランドに合うようにリストビューの色を変更したり、選択した項目の表示方法を変更したりします。

次の画像は、コントロールテンプレートとデータテンプレートを合わせて 1 つの項目で表示する最終的なビジュアルを形成する方法を示しています。

リストビューコントロールとデータテンプレート

この項目を作成する XAML を次に示します。テンプレートについては、後で説明します。

<ListView Width="220" SelectionMode="Multiple">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="Assets/placeholder.png" Width="44" Height="44"
                       HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind}" Foreground="Black"
                           FontSize="14" Grid.Column="1"
                           VerticalAlignment="Center"
                           Padding="0,0,54,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen"/>
        </Style>
    </ListView.ItemContainerStyle>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

重要

データテンプレートとコントロールテンプレートは、ListView と GridView 以外の多くのコントロールのスタイルをカスタマイズするために使用されます。これには、FlipView などの独自の組み込みスタイルを持つコントロールや、ItemsRepeater などのカスタム作成されたコントロールが含まれます。次の例は ListView/GridView に固有のものですが、その概念は他の多くのコントロールに適用できます。

前提条件

リストビューコントロールの使い方を理解していることを前提としています。詳しくは、ListView と GridViewに関する記事をご覧ください。
また、スタイルをインラインで使用する方法や、リソースとして使用する方法を含む、コントロールスタイルやテンプレートについて理解していることも前提としています。詳しくは、コントロールのスタイルに関するページと「コントロールテンプレート」をご覧ください。

データ

リストビューでデータ項目を表示する方法について詳しく調べる前に、表示されるデータについて理解する必要があります。この例では、NamedColor と呼ばれるデータ型を作成します。これは、Name、Color、Brush という 3 つのプロパティとして公開されている、色の名前、色の値、SolidColorBrush が組み合わされています。

次に、Colors クラスの名前付きの色ごとに NamedColor オブジェクトを使って、List を設定します。このリストは、リストビューの ItemsSource として設定されます。

クラスを定義したり、NamedColors リストを設定するためのコードを次に示します。

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace ColorsListApp
{
    public sealed partial class MainPage : Page
    {
        // The list of colors won't change after it's populated, so we use List<T>. 
        // If the data can change, we should use an ObservableCollection<T> intead.
        List<NamedColor> NamedColors = new List<NamedColor>();

        public MainPage()
        {
            this.InitializeComponent();

            // Use reflection to get all the properties of the Colors class.
            IEnumerable<PropertyInfo> propertyInfos = typeof(Colors).GetRuntimeProperties();

            // For each property, create a NamedColor with the property name (color name),
            // and property value (color value). Add it the NamedColors list.
            for (int i = 0; i < propertyInfos.Count(); i++)
            {
                NamedColors.Add(new NamedColor(propertyInfos.ElementAt(i).Name,
                                    (Color)propertyInfos.ElementAt(i).GetValue(null)));
            }

            colorsListView.ItemsSource = NamedColors;
        }
    }

    class NamedColor
    {
        public NamedColor(string colorName, Color colorValue)
        {
            Name = colorName;
            Color = colorValue;
        }

        public string Name { get; set; }

        public Color Color { get; set; }

        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(Color); }
        }
    }
}

データテンプレート

データテンプレートを指定して、リストビューにデータ項目の表示方法を伝えます。

既定では、データ項目は、バインドされているデータオブジェクトの文字列表現としてリストビューに表示されます。リストビューに 'NamedColors' データの表示方法を伝えることなく、リストビューでこのデータを表示する場合、次のように、単に ToString メソッドによって返されたものが表示されます。

XAML

<ListView x:Name="colorsListView"/>

項目の文字列表現を示すリストビュー

データ項目の特定のプロパティに DisplayMemberPath を設定すると、そのプロパティの文字列表現を表示できます。ここでは、NamedColor 項目の Name プロパティに DisplayMemberPath を設定します。

XAML

<ListView x:Name="colorsListView" DisplayMemberPath="Name" />

リストビューで、次のように名前で項目が表示されるようになりました。より便利になりましたが、あまり興味を引くものではなく、多くの情報が隠されたままです。

項目プロパティの文字列表現を示すリストビュー

通常は、よりリッチな表現でデータを表示する必要があります。リストビューでの項目の表示方法を正確に指定するには、DataTemplate を作成します。 DataTemplate の XAML では、個々の項目を表示するために使うコントロールのレイアウトと外観を定義します。レイアウト内のコントロールでは、データオブジェクトのプロパティにバインドすることも、静的コンテンツをインラインで定義することもできます。 DataTemplate は、リストコントロールの ItemTemplate プロパティに割り当てます。

重要

ItemTemplate と DisplayMemberPath を同時に使うことはできません。両方のプロパティが設定されていると、例外が発生します。

ここでは、色の名前や RGB 値が設定された項目の色で四角形を表示する DataTemplate を定義します。

注意

DataTemplate で x:Bind マークアップ拡張を使う場合、DataTemplate に DataType (x:DataType) を指定する必要があります。

XAML

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:NamedColor">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="54"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Width="44" Height="44" Fill="{x:Bind Brush}" Grid.RowSpan="2"/>
                <TextBlock Text="{x:Bind Name}" Grid.Column="1" Grid.ColumnSpan="4"/>
                <TextBlock Text="{x:Bind Color.R}" Grid.Column="1" Grid.Row="1" Foreground="Red"/>
                <TextBlock Text="{x:Bind Color.G}" Grid.Column="2" Grid.Row="1" Foreground="Green"/>
                <TextBlock Text="{x:Bind Color.B}" Grid.Column="3" Grid.Row="1" Foreground="Blue"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

このデータテンプレートを使ってデータ項目を表示すると、次のようになります。

データテンプレートを使ったリストビュー項目

重要

既定では、Listviewitem の内容は左揃えになっています。つまり、HorizontalContentAlignmentProperty は Left に設定されています。水平方向に積み上げられた要素や、同じグリッド行に配置された要素など、水平方向に隣接する複数の要素が ListViewItem 内にある場合、それらはすべて左揃えになり、定義された余白で区切られます。

要素が ListItem の本体全体に収まるようにするためには、ListView 内で Setter を使用して、HorizontalContentAlignmentProperty を Stretch に設定する必要があります。

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

GridView でデータを表示したい場合があります。グリッドレイアウトにより適した方法でデータを表示する、別のデータテンプレートを次に示します。今回は、GridView 用に XAML 内ではなく、リソースとしてデータテンプレートを定義します。

XAML

<Page.Resources>
    <DataTemplate x:Key="namedColorItemGridTemplate" x:DataType="local:NamedColor">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="96"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
    
            <Rectangle Width="96" Height="96" Fill="{x:Bind Brush}" Grid.ColumnSpan="3" />
            <!-- Name -->
            <Border Background="#AAFFFFFF" Grid.ColumnSpan="3" Height="40" VerticalAlignment="Top">
                <TextBlock Text="{x:Bind Name}" TextWrapping="Wrap" Margin="4,0,0,0"/>
            </Border>
            <!-- RGB -->
            <Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
            <TextBlock Text="{x:Bind Color.R}" Foreground="Red"
                   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.G}" Foreground="Green"
                   Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
                   Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
            <!-- HEX -->
            <Border Background="Gray" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock Text="{x:Bind Color}" Foreground="White" Margin="4,0,0,0"/>
            </Border>
        </Grid>
    </DataTemplate>
</Page.Resources>

...

<GridView x:Name="colorsGridView" 
          ItemTemplate="{StaticResource namedColorItemGridTemplate}"/>

このデータテンプレートを使ってグリッドにデータを表示すると、次のようになります。

データテンプレートを使ったグリッドビュー項目

パフォーマンスに関する考慮事項

データテンプレートは、リストビューの外観を定義する主要な方法です。リストに多数の項目を表示した場合、パフォーマンスが大幅に低下することもあります。

データテンプレートのすべての XAML 要素のインスタンスが、リストビューの各項目用に作成されます。たとえば、前の例のグリッドテンプレートには、10 個の XAML 要素 (1 つの Grid、1 つの Rectangle、3 つの Border、5 つの Textblock) が含まれています。このデータテンプレートを使って 20 個の項目を表示する GridView では、少なくとも要素を 200 個 (20*10=200) 作成します。データテンプレートの要素数を減らすと、リストビューで作成される要素の総数を大幅に減らすことができます。詳しくは、「ListView と GridView の UI の最適化」の項目ごとの要素数の削減に関する記事をご覧ください。

このセクションのグリッドデータテンプレートについて考えてみます。要素数を減らすための手法をいくつか確認しましょう。

XAML

<!-- RGB -->
<Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
<TextBlock Text="{x:Bind Color.R}" Foreground="Red"
           Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.G}" Foreground="Green"
           Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
           Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>

まず、このレイアウトでは 1 つのグリッドを使用します。 1 列の Grid を用意して、StackPanel にこれら 3 つの TextBlock を配置できますが、何度も作成するデータテンプレートでは、レイアウトパネルを他のレイアウトパネル内に埋め込まないようにする方法を探す必要があります。
次に、Border コントロールを使って、Border 要素内に実際に項目を配置することなく背景をレンダリングできます。 Border 要素には子要素を 1 つしか配置できないため、他のレイアウトパネルを追加して、XAML の Border 要素内で 3 つの TextBlock 要素をホストする必要があります。 TextBlock を Border 要素の子要素にしないようにすることで、パネルで TextBlock を保持する必要がなくなります。
最後に、StackPanel 内に TextBlock を配置して、明示的な Border 要素を使用する代わりに、StackPanel で Border プロパティを設定できます。しかし、Border 要素は StackPanel よりも軽量なコントロールであるため、何度もレンダリングするときのパフォーマンスへの影響は少なくなります。

さまざまな項目ごとに異なるレイアウトを使用する

コントロールテンプレート

項目のコントロールテンプレートには、選択、ポインターオーバー、フォーカスなどの状態を表示するビジュアルが含まれています。これらのビジュアルは、データテンプレートの上または下のいずれかにレンダリングされます。 ListView コントロールテンプレートによって描画される一般的な既定のビジュアルの一部を次に示します。

ホバー – 薄い灰色の四角形がデータテンプレートの下に描画されます。
選択 – 薄い青色の四角形がデータテンプレートの下に描画されます。
キーボードフォーカス - 項目テンプレートの上に描画される視認性の高いフォーカス表示。

リストビューの状態のビジュアル

リストビューでは、データテンプレートとコントロールテンプレートの要素を組み合わせて、画面にレンダリングする最終的なビジュアルを作成します。ここでは、状態のビジュアルがリストビューのコンテキスト内で表示されています。

異なる状態の項目を含むリストビュー

ListViewItemPresenter

データテンプレートについて上で説明したとおり、各項目で作成する XAML 要素の数は、リストビューのパフォーマンスに大きな影響を与えます。データテンプレートとコントロールテンプレートを組み合わせて各項目を表示するため、項目を表示するために必要な実際の要素数には、両方のテンプレートの要素が含まれます。

ListView コントロールと GridView コントロールを最適化して、項目ごとに作成する XAML 要素の数を減らします。 ListViewItem のビジュアルは ListViewItemPresenter によって作成されます。これは、多数の UIElement によるオーバーヘッドなしで、フォーカス、選択などの表示状態で複雑なビジュアルを表示する特別な XAML 要素です。

注意

Windows 用 UWP アプリでは、ListViewItem と GridViewItem の両方で ListViewItemPresenter が使用されます。GridViewItemPresenter は非推奨であり、使用しないでください。 ListViewItem と GridViewItem では、ListViewItemPresenter に異なるプロパティ値を設定して、異なる既定の外観を実現します。

項目コンテナーの外観を変更するには、ItemContainerStyle プロパティを使い、TargetType に ListViewItem または GridViewItem を設定した Style を提供します。

この例では、ListViewItem にパディングを追加して、リストの項目の間に余白を作成します。

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <!-- DataTemplate XAML shown in previous ListView example -->
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0,4"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

これで、項目の間に余白が入り、次のようにリストビューが表示されます。

パディングを適用したリストビューの項目

ListViewItem の既定のスタイルの場合、ListViewItemPresenter の ContentMargin プロパティには、ListViewItem の Padding プロパティへの TemplateBinding があります (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>)。 Padding プロパティを設定すると、この値は実際に ListViewItemPresenter の ContentMargin プロパティに渡されます。

ListViewItems プロパティにテンプレートバインドされていないその他の ListViewItemPresenter プロパティを変更するには、プロパティを変更できる新しい ListViewItemPresenter を使って ListViewItem を再テンプレート化する必要があります。

注意

ListViewItem と GridViewItem の既定のスタイルでは、ListViewItemPresenter に多くのプロパティが設定されています。常に既定のスタイルのコピーから始めて、必要なプロパティのみ変更することをお勧めします。そうしなければ、一部のプロパティを正しく設定されていないことが原因で、ビジュアルが期待どおりに表示されない可能性があります。

Visual Studio で既定のテンプレートのコピーを作成するには

[ドキュメントアウトライン] ウィンドウを開きます ([表示] > [その他のウィンドウ] > [ドキュメントアウトライン])。
変更するリストまたはグリッドの要素を選びます。この例では、colorsGridView 要素を変更します。
右クリックして、[追加テンプレートの編集] > [生成されたアイテムコンテナーの編集 (ItemContainerStyle)] > [コピーして編集] の順に選びます。
[Style リソースの作成] ダイアログボックスで、スタイルの名前を入力します。この例では、colorsGridViewItemStyle を使います。

次の XAML で示すように、既定のスタイルのコピーをリソースとしてアプリに追加し、GridView.ItemContainerStyle プロパティをそのリソースに設定します。

<Style x:Key="colorsGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="Overlay" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                    SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

<GridView x:Name="colorsGridView" ItemContainerStyle="{StaticResource colorsGridViewItemStyle}"/>

これで、ListViewItemPresenter のプロパティを変更して、選択チェックボックス、項目の配置、ブラシの色の表示状態を制御できるようになりました。

インラインとオーバーレイの選択ビジュアル

ListView と GridView では、コントロールや SelectionMode に応じて、選択されている項目をさまざまな方法で示します。リストビューの選択について詳しくは、ListView と GridViewに関するページをご覧ください。

SelectionMode を Multiple に設定すると、選択チェックボックスは項目のコントロールテンプレートの一部として表示されます。 SelectionCheckMarkVisualEnabled プロパティを使って、Multiple 選択モードの選択チェックボックスをオフにできます。しかし、このプロパティは他の選択モードでは無視されるため、Extended または Single 選択モードのチェックボックスをオンにすることはできません。

CheckMode プロパティを設定して、インラインスタイルまたはオーバーレイスタイルのどちらを使ってチェックボックスを表示するかを指定できます。

インライン:このスタイルは、コンテンツの左側にチェックボックスを表示し、項目コンテナーの背景を色付けすることで、選択された状態を示します。これは、ListView の既定のスタイルです。
オーバーレイ:このスタイルは、コンテンツの上部にチェックボックスを表示し、項目コンテナーの境界線のみを色付けすることで、選択された状態を示します。これは、GridView の既定のスタイルです。

この表は、選択された状態を示すために使用する既定のビジュアルを示しています。

SelectionMode:	Single、Extended	複数
インライン
オーバーレイ

注意

この例と次の例では、コントロールテンプレートによって提供されているビジュアルを強調するために、データテンプレートなしでシンプルな文字列データ項目を表示しています。

また、チェックボックスの色を変更するためのブラシプロパティも複数用意されています。これらについては、以下で他のブラシプロパティと共に確認します。

ブラシ

多くのプロパティでは、異なる表示状態で使用するブラシを指定します。ブランドの色に合わせて、これらを変更する必要がある場合もあります。

次の表は、ListViewItem の一般的な表示状態と選択された表示状態、および各状態のビジュアルのレンダリングで使用するブラシを示しています。画像は、インラインとオーバーレイの両方の選択視覚スタイルにおける、ブラシの効果を示しています。

注意

この表では、ブラシで変更する色の値はハードコードされた名前付きの色です。テンプレートのどこに適用されるかをはっきりと理解できるように、この色を選択しています。これらは、表示状態の既定の色ではありません。アプリの既定の色を変更する場合は、既定のテンプレートで設定されているように、ブラシのリソースを使って色の値を変更する必要があります。

状態またはブラシの名前	インラインスタイル	オーバーレイスタイル
Normal CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
Pressed PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
Selected SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Green" CheckBoxBrush="Red" (インラインのみ)
PointerOverSelected SelectedPointerOverBackground="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (オーバーレイのみ) CheckBrush="Green" CheckBoxBrush="Red" (インラインのみ)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (オーバーレイのみ) CheckBrush="Green" CheckBoxBrush="Red" (インラインのみ)
Focused FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter には、データのプレースホルダーやドラッグ状態用のブラシプロパティが他にもあります。リストビューで段階的読み込みやドラッグアンドドロップを使用する場合は、このような追加のブラシプロパティを変更する必要があるかについても検討することをお勧めします。変更できるプロパティの完全な一覧については、ListViewItemPresenter クラスをご覧ください。

展開時の XAML 項目テンプレート

たとえば、ListViewItemPresenter プロパティで許可されていない変更を行う必要がある場合や、チェックボックスの位置を変更する必要がある場合は、ListViewItemExpanded テンプレートまたは GridViewItemExpanded テンプレートを使用できます。これらのテンプレートは、generic.xaml の既定のスタイルに含まれています。これらは、個別の UIElement からすべてのビジュアルをビルドする標準の XAML パターンに従います。

前述のように、項目テンプレート内の UIElement の数は、リストビューのパフォーマンスに大きな影響を与えます。 ListViewItemPresenter を展開時の XAML テンプレートに置き換えると、要素の数が大幅に増大するため、リストビューで多数の項目を表示する場合や、パフォーマンスを懸念する場合は推奨されません。

注意

ListViewItemPresenter は、リストビューの ItemsPanel が ItemsWrapGrid または ItemsStackPanel である場合にのみサポートされます。 VariableSizedWrapGrid、WrapGrid、または StackPanel を使うように ItemsPanel を変更すると、項目テンプレートは展開時の XAML テンプレートに自動的に切り替わります。詳しくは、「ListView と GridView の UI の最適化」をご覧ください。

展開時の XAML テンプレートをカスタマイズするには、アプリでコピーを作成し、コピーに ItemContainerStyle プロパティを設定します。

展開時のテンプレートをコピーするには

次に示すように、ListView または GridView に ItemContainerStyle プロパティを設定します。

<ListView ItemContainerStyle="{StaticResource ListViewItemExpanded}"/>
<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"/>

Visual Studio の [プロパティ] ウィンドウで、[その他] セクションを展開し、ItemContainerStyle プロパティを見つけます。 (ListView または GridView が選択されていることを確認します)。
ItemContainerStyle プロパティのプロパティマーカーをクリックします。 (TextBox の横にある小さなボックスです。StaticResource に設定されていることを示す緑色で表示されます)。プロパティメニューが開きます。
プロパティメニューで、 [新しいリソースに変換] をクリックします。
[Style リソースの作成] ダイアログボックスで、リソースの名前を入力し、[OK] をクリックします。

generic.xaml の展開時のテンプレートのコピーがアプリで作成され、必要に応じて変更できるようになります。

項目コンテナーとテンプレート

ListView 項目と GridView 項目

カスタマイズの概要

前提条件

データ

データテンプレート

パフォーマンスに関する考慮事項

さまざまな項目ごとに異なるレイアウトを使用する

コントロールテンプレート

ListViewItemPresenter

インラインとオーバーレイの選択ビジュアル

ブラシ

展開時の XAML 項目テンプレート

フィードバック

その他のリソース

項目コンテナーとテンプレート

ListView 項目と GridView 項目

カスタマイズの概要

前提条件

データ

データ テンプレート

パフォーマンスに関する考慮事項

さまざまな項目ごとに異なるレイアウトを使用する

コントロール テンプレート

ListViewItemPresenter

インラインとオーバーレイの選択ビジュアル

ブラシ

展開時の XAML 項目テンプレート

関連記事

フィードバック

その他のリソース

データテンプレート

コントロールテンプレート