ItemsControlのテンプレートをカスタマイズする

dotnet wpf xaml

Template

コントロール全体の設定。 全体をScrollViewerで囲ったり、Borderで装飾したりするときは、ここで設定する。

ItemsPresenterには、ItemsPanelの内容が入る。

<ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
        <ScrollViewer Focusable="False">
            <ItemsPresenter/>
        </ScrollViewer>
    </ControlTemplate>
</ItemsControl.Template>

ItemsPanel

コレクションを乗せるPanelを指定。

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

ItemContainerStyle

コレクションの各オブジェクトを格納するコンテナーの設定。 これがItemsPanelに乗る。

ContentPresenterには、ItemTemplateの内容が入る。

<ItemsControl.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="BorderThickness" Value="1"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        >
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#9999CCFF"/>
                <Setter Property="BorderBrush" Value="#3399FF"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ItemsControl.ItemContainerStyle>

ItemTemplate

各オブジェクトの表示形式を指定。 下記の例では、各オブジェクトのNameプロパティを表示する。

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Name}"/>
    </DataTemplate>
</ItemsControl.ItemTemplate>