Search code examples
c#.netwpflistviewlistviewitem

Selection style for ListView with a WrapPanel


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>

Solution

  • 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>