Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable blue border for selected Listview item

I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate. I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.

There are many similar question on SO and I tried a lot of the solutions and none of them worked.

This is what I have already tried:

<ListView.Resources>
            <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"/>
                    <!--SelectedItem without focus-->
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
                </Style.Resources>
            </Style>
        </ListView.Resources>



<ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Panel.ZIndex" Value="150"/>
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter Property="BorderBrush" Value="{x:Null}" />
                        <Setter Property="Background" Value="{x:Null}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
like image 355
Tomas Grosup Avatar asked Jan 16 '23 05:01

Tomas Grosup


2 Answers

You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)

I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application

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

Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources

like image 159
Rachel Avatar answered Jan 25 '23 18:01

Rachel


To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

Found on MSDN Forum

like image 25
Martin Schneider Avatar answered Jan 25 '23 18:01

Martin Schneider