WPF Removing custom ListViewItem mouseover blue rectangle - wpf

Question

I'm using this code for a custom user control of type ListViewItem :
<UserControl.Resources>
<Style x:Key="Properties" TargetType="local:CustomListViewItem">
<Setter Property="ButtonImageSource" Value="{Binding ButtonImageSource, Mode=TwoWay}"/>
<Setter Property="ButtonText" Value="{Binding ButtonText, Mode=TwoWay}"/>
</Style>
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
x:Name="Bd"
Width="{Binding RelativeSource={RelativeSource AncestorType=ListView}, Path=ActualWidth}"
Height="50"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Cursor="Hand"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="{StaticResource DarkGrey34}"
To="{StaticResource DarkGrey80}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="{StaticResource DarkGrey80}"
To="{StaticResource DarkGrey34}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ListViewItem
Padding="0"
HorizontalAlignment="Left"
Style="{StaticResource ListViewItemStyle}"
>
<StackPanel x:Name="Panel" HorizontalAlignment="Left" Orientation="Horizontal">
<Image
Margin="4"
Source="{Binding ButtonImageSource}"
Stretch="Uniform"
Style="{StaticResource ImageShaddow}" />
<TextBlock
Margin="15,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{StaticResource TextBlockStyle}"
Text="{Binding ButtonText}" />
</StackPanel>
</ListViewItem>
and implementation of this CustomListViewItem is:
<ListView
x:Name="MenuButtonsList"
Background="Transparent"
BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<!-- Create file button -->
<comp:ListViewItem
x:Name="BtnCreateFile"
PreviewMouseLeftButtonUp="BtnCreateFile_PreviewMouseLeftButtonUp"
ButtonImageSource="{StaticResource ArticleWhite}"
ButtonText="Create File"
/>
<!-- Open File button -->
<comp:ListViewItem
x:Name="BtnOpenFile"
PreviewMouseLeftButtonUp="BtnOpenFile_PreviewMouseLeftButtonUp"
ButtonImageSource="{StaticResource OpenFile}"
ButtonText="Open File"
/>
<!-- Settings button -->
<comp:ListViewItem
x:Name="BtnSettings"
PreviewMouseLeftButtonUp="BtnSettings_PreviewMouseLeftButtonUp"
ButtonImageSource="{StaticResource SettingsWhite}"
ButtonText="Settings"
/>
</ListView>
Even if the style is customized, the blue rectangle on mouse over it appears.
What I'm missing?

Answer 1

You're going about this all wrong. Creating custom user controls for things like ListViewItem is the old-school WinForms way of doing things, for WPF you instead apply custom templates. Start by using regular ListViewItems in your ListView (which I've simplified here for illustration purposes):
<ListView
x:Name="MenuButtonsList"
Background="Transparent"
BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<!-- Create file button -->
<ListViewItem />
<!-- Open File button -->
<ListViewItem />
<!-- Settings button -->
<ListViewItem />
</ListView>
Now template out ListViewItem. You can do this by placing the cursor over any instance and then in the Properties panel clicking to the right of Common -> Template and selecting "Convert to new resource". This will expand out the Control Template into something you can work with:
<Window.Resources>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<ControlTemplate x:Key="ListViewItemTemplate1" TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
The field you're trying to nuke is this one, just change it to "Transparent":
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
Expanding out the template manually applies the template like so:
<!-- Create file button -->
<ListViewItem Template="{DynamicResource ListViewItemTemplate1}" />
If you want to set this automatically then simply set the style for TargetType="ListViewItem", either in Window.Resources (which will set it to all ListViewItems in the window) or ListView.Resources (which will set it just to the ones in that control instance):
<Style TargetType="ListViewItem">
<Setter Property="Template" Value="{StaticResource ListViewItemTemplate1}" />
</Style>
Upon reading this you might be thinking that it isn't applicable on account of the fact that you also need to override the layout of ListViewItem itself. In that case, you still don't need to use a custom ListViewItem, you instead use a DataTemplate. ControlTemplate is used for the top-most presentation of the ListViewItem, whereas DataTemplate is used to specify how the data within the item is presented. It's a subtle distinction, but core to how this part of WPF has been architected.