I am using a ListView
with a WrapPanel
as its ItemsPanel
. I need to change the style of selected items - use a different background color and add a border around the selected items, like Windows 7's Explorer does.
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just simply design ControlTemplate
for Default type and Selected type. Then you can set Selected ControlTemplate
when any item in the ListView is selected, otherwise keep Default type.
<Window.Resources>
<ControlTemplate x:Key="DEFAULT">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Green" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</ControlTemplate>
<ControlTemplate x:Key="SELECTED_TYPE">
<Border BorderBrush="Gray" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</Border>
</ControlTemplate>
<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="White"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template" Value="{StaticResource SELECTED_TYPE}"/>
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Template" Value="{StaticResource DEFAULT}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListItemStyle}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>