Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9707

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

$
0
0

はじめに

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

環境

Windows 10
Visual Studio 2017

完成系

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

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

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

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

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

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

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

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

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

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

BasedOnでStaticResourceを設定してOK。

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

Viewing all articles
Browse latest Browse all 9707

Trending Articles