Question

I’m playing around with wpf and I saw the following article:
WPF ListView Inactive Selection Color

I want to do something similar. I want to put a border around an a listviewitem when it is selected and i want to not change the background color. The reason I want this is I want a color coded listview and I still want to see the color when it’s selected, but i want to know it’s selected by it having a border around it.

Any ideas?

UPDATE:

I tried the below answer and it got me half way, it does put a border around the listviewitem but it overrides my background color. I can’t get the right syntax i tried(Notice the BasedOn):

    <Style x:Key="SourceListView" TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}"/>
    </Style>

    <Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource SourceListView}" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border
                             x:Name="Border"
                             BorderBrush="Transparent"
                             BorderThickness="1">
                        <GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}" Content="{TemplateBinding Content}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I then tried this:

    <Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}"/>
        <Setter Property="Template">
            ...//Same as above
        </Setter>
    </Style>

Both attempts just set the background to white(or transparent I don’t know). I know it’s just syntax and I’d appreciate another nudge in the right direction 🙂

Answer 1

Change the ItemContainerStyle on the ListView to a style that doesn’t change the background when an item is selected but instead changes the color of a border. Below is an example:

  <Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}">
     <Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}" />
     <Setter Property="Template">
        <Setter.Value>
           <ControlTemplate TargetType="{x:Type ListViewItem}">
              <Border
                 x:Name="Border"
                 BorderBrush="Transparent"
                 BorderThickness="1"
                 Background="{TemplateBinding Background}">
                 <GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}" Content="{TemplateBinding Content}"/>
              </Border>
              <ControlTemplate.Triggers>
                 <Trigger Property="IsSelected" Value="true">
                    <Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
                 </Trigger>
              </ControlTemplate.Triggers>
           </ControlTemplate>
        </Setter.Value>
     </Setter>
  </Style>

And then use the style like this:

<ListView ItemContainerStyle="{StaticResource MyListViewItemStyle}">
   ...
</ListView>