WPFのListViewで選択時のスタイルを変更する

はじめに

ListViewで表示しているテンプレートの選択時のスタイルを変更したかったけど、意外と記事が少ないので残しておくことにしました。

環境

Windows 10
Visual Studio 2017

完成系

完成系といったけど、関係するところだけ抜粋。

<Window.Resources>
    <ResourceDictionary>
        <Style x:Key="listBoxItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="BorderBrush" Value="Silver" />
                    <Setter Property="BorderThickness" Value="10" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</Window.Resources>

<ListView>
    <ListView.ItemContainerStyle>
        <Style BasedOn="{StaticResource listBoxItemStyle}" TargetType="ListBoxItem" />
    </ListView.ItemContainerStyle>
</ListView>

テンプレートのスタイルを適用

Borderの背景、ブラシ、線の太さはテンプレートの設定に準拠しますという宣言。

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

実際に選択時のスタイルを決める

IsSelectedが選択時のスタイル。
IsMouseOverがマウスオーバー時のスタイル。

この指定だと、マウスオーバー時はちょっと透明に、選択時はグレーの枠線が表示されます。

<Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Silver" />
        <Setter Property="BorderThickness" Value="10" />
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Opacity" Value="0.5" />
    </Trigger>
</Style.Triggers>

リストビューのスタイルに設定

BasedOnでStaticResourceを設定してOK。

<ListView>
    <ListView.ItemContainerStyle>
        <Style BasedOn="{StaticResource listBoxItemStyle}" TargetType="ListBoxItem" />
    </ListView.ItemContainerStyle>
</ListView>