Change selection-color of WPF ListViewItem

19
votes

I have a ListView containing some ListViewItems. By default, selecting items makes their background to some deep blue. I would like to apply a style such that selecting an item does not change its look.

In my xaml I already achieved this:

<Style TargetType="ListViewItem">
   <Style.Resources>
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
   </Style.Resources>
</Style>

Unfortunately, this does not do the trick. It just simply makes the selection white instead of blue.

Does anyone have an idea?

Best wishes, Christian

EDIT: Sample Code:

<Window.Resources>
    <Style TargetType="ListViewItem">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>                      
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
        </Style.Resources>
    </Style>
</Window.Resources>



<ListView x:Name="lvTestRun" ItemsSource="{Binding Path=TestRunData}" Margin="177,26,8,53.277" SelectionMode="Multiple">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Status"/>
            <GridViewColumn Header="Duration"/>
            <GridViewColumn Header="Start Time"/>
            <GridViewColumn Header="End Time"/>
        </GridView>
    </ListView.View>
</ListView>

In order to reproduce this, you may have to set the background color of a single ListViewItem to something like green or red.

4
c#wpfxamllistview

4 Answers

31
votes

I'm not sure I understand what you mean by white instead of blue. When a ListViewItem is selected the foreground and background is changed by a trigger. To change the foreground of a ListViewItem you can use this

<ListView ...>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Resources>
                <!-- Foreground for Selected ListViewItem -->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
                                 Color="Black"/>
                <!-- Background for Selected ListViewItem -->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                 Color="Transparent"/>
            </Style.Resources>
        </Style>
    </ListView.ItemContainerStyle>
    ...
</ListView>

Update

Try this for re-templating. I removed all triggers for selected

<ListView ...>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Resources>
                <LinearGradientBrush x:Key="ListItemHoverFill" EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFF1FBFF" Offset="0"/>
                    <GradientStop Color="#FFD5F1FE" Offset="1"/>
                </LinearGradientBrush>
            </Style.Resources>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border CornerRadius="2" SnapsToDevicePixels="True"  
                                BorderThickness="{TemplateBinding BorderThickness}"   
                                BorderBrush="{TemplateBinding BorderBrush}"   
                                Background="{TemplateBinding Background}">
                            <Border Name="InnerBorder" CornerRadius="1" BorderThickness="1">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="11" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <Rectangle Name="UpperHighlight" Visibility="Collapsed" Fill="#75FFFFFF" />
                                    <GridViewRowPresenter Grid.RowSpan="2"   
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"   
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Grid>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource ListItemHoverFill}" />
                                <Setter Property="BorderBrush" Value="#FFCCF0FF" />
                                <Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <!--<Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
                                <Setter Property="BorderBrush" Value="#FF98DDFB" />
                                <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#80FFFFFF" />
                                <Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
                                <Setter TargetName="UpperHighlight" Property="Fill" Value="#40FFFFFF" />
                            </Trigger>-->
                            <!--<MultiTrigger> 
                <MultiTrigger.Conditions> 
                    <Condition Property="IsSelected" Value="True" /> 
                    <Condition Property="Selector.IsSelectionActive" Value="False" /> 
                </MultiTrigger.Conditions> 
                <Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}" /> 
                <Setter Property="BorderBrush" Value="#FFCFCFCF" /> 
            </MultiTrigger>-->
                            <!--<MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="True" />
                                    <Condition Property="IsMouseOver" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}" />
                                <Setter Property="BorderBrush" Value="#FF98DDFB" />
                            </MultiTrigger>-->
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>
11
votes

Have a look at this: http://www.wpftutorial.net/ListBoxSelectionBackground.html or http://dotnetbutchering.blogspot.be/2009/08/how-to-set-wpf-listview-selected-item.html -the same principle applies for the ListView control.

For example, the following triggers based code should do the trick and imitate no change of colour when the selection is changed.

<Style TargetType="{x:Type ListViewItem}">
   <Style.Triggers>
      <Trigger Property="IsSelected" Value="true" >
        <Setter Property="Foreground" Value="YourForegroundColour" />
        <Setter Property="Background" Value="YourBackgroundColour" />
      </Trigger>
   </Style.Triggers>
</Style>
0
votes

What I normally do is define that color in the listview's resource collection. Then for each item I can define a template with the colors I like and when I select I don't get the blue.

I do think you should have some sort of indication that an item is selected though.

0
votes

For also disabling inactive style,

<Style TargetType="ListViewItem">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
    </Style.Resources>
</Style>