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

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 つの重要な部分 ( データテンプレート と コントロールテンプレート) で構成されます。

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

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

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

この項目を作成する 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>

Important

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

[前提条件]

リストビューコントロールの使用方法がわかっていることを前提としています。詳細については、 ListView と GridView に関する記事を参照してください。
また、スタイルをインラインで使用する方法やリソースとして使用する方法など、コントロールのスタイルとテンプレートについても理解していることを前提としています。詳細については、「コントロールとコントロールテンプレートのスタイル設定」を参照してください。

データ

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

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

XAML

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

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

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

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

Important

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>

このデータテンプレートで表示されるデータ項目の外観を次に示します。

データテンプレートを使用したリストビューアイテム

Important

ListViewItems の既定では、コンテンツは左揃えになっています。つまり、 HorizontalContentAlignmentProperty は Left に設定されています。水平積み上げ要素や同じ Grid 行に配置された要素など、水平方向に隣接する 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 Borders、5 TextBlocks) があります。このデータテンプレートを使用して画面上に 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"/>

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

アイテムごとに異なるレイアウトを使用する

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

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

ホバー – データテンプレートの下に描画された薄い灰色の四角形。
選択 – データテンプレートの下に描画される水色の四角形。
キーボードフォーカス – 項目テンプレートの上に描画された高可視性フォーカスビジュアル。

リストビューの状態視覚効果

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

異なる状態の項目を含む Lsit ビュー

ListViewItemPresenter

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

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

注

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

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

この例では、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 プロパティ () への <ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/> があります。 Padding プロパティを設定すると、その値は実際には ListViewItemPresenter ContentMargin プロパティに渡されます。

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

注

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

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

[ドキュメントアウトライン] ウィンドウを開きます (その他の Windows > ドキュメントアウトライン>表示)。
変更するリスト要素またはグリッド要素を選択します。この例では、 colorsGridView 要素を変更します。
右クリックして、 [追加テンプレートの編集] > 生成された項目コンテナーの編集 (ItemContainerStyle) > コピーの編集を選択します。
[スタイルリソースの作成]ダイアログボックスで、スタイルの名前を入力します。この例では、 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 が [複数] に設定されている場合、項目のコントロールテンプレートの一部として選択チェックボックスが表示されます。 SelectionCheckMarkVisualEnabled プロパティを使用すると、複数選択モードで選択チェックボックスをオフにすることができます。ただし、このプロパティは他の選択モードでは無視されるため、拡張選択モードまたは単一選択モードではチェックボックスをオンにできません。

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

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

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

選択モード	単一または拡張	複数
インライン
オーバーレイ

注

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

また、チェックボックスの色を変更するブラシプロパティがいくつかあります。次に、他のブラシプロパティと共に説明します。

ブラシ

プロパティの多くは、さまざまな表示状態に使用されるブラシを指定します。ブランドの色に合わせて変更することもできます。

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

注

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

状態/ブラシ名	インラインスタイル	オーバーレイスタイル
標準 CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
押した PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
選択済み SelectedForeground="Navy" SelectedBackground="カーキ" CheckBrush="Green" CheckBoxBrush="Red" (インラインのみ)
PointerOverSelected SelectedPointerOverBackground="ラベンダー" SelectedForeground="Navy" SelectedBackground="カーキ" (オーバーレイのみ) CheckBrush="緑" CheckBoxBrush="Red" (インラインのみ)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="カーキ" (オーバーレイのみ) CheckBrush="緑" CheckBoxBrush="Red" (インラインのみ)
フォーカス FocusBorderBrush="真紅" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

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

展開された XAML 項目テンプレート

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

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

注

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

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

展開されたテンプレートをコピーするには

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

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

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

generic.xaml から展開されたテンプレートのコピーがアプリに作成され、必要に応じて変更できます。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-11-25

次の方法で共有

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

ListView 項目 と GridView 項目

カスタマイズの概要

[前提条件]

データ

データ テンプレート

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

アイテムごとに異なるレイアウトを使用する

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

ListViewItemPresenter

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

ブラシ

展開された XAML 項目テンプレート

関連資料

フィードバック

その他のリソース

ListView 項目と GridView 項目

データテンプレート

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