ListBox ItemTemplate Background Transparent

Question

I am trying to set the Background to Transparent, however as you can see in the screen shot below when the mouse hovers over the ListBoxItem it shows a blue Rectangle over the item:

I am using MVVM and my implementation is as follows:

<UserControl.Resources>
    <Style x:Key="HyperLinkStyle" TargetType="{x:Type Hyperlink}">
        <Setter Property="Foreground" Value="#FF0066CC"/>
        <Setter Property="TextDecorations" Value="None" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#FF0066CC"/>
                <Setter Property="TextDecorations" Value="Underline" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="True">
                <Setter Property="Cursor" Value="Hand"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid>
    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0, 10, 0, 0">
        <ListBox x:Name="TeamListView" ItemsSource="{Binding Teams}" BorderThickness="0" 
                 SelectionMode="Single" Background="Transparent">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Background" Value="Transparent"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="Transparent"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </DataTemplate.Resources>
                    <TextBlock Margin="0, 0, 0, 5">
                            <Hyperlink Style="{Binding Source={StaticResource HyperLinkStyle}}" 
                                       Command="{Binding ElementName=TeamListView, Path=DataContext.ConnectToTeam}" 
                                       CommandParameter="{Binding}">
                                <TextBlock Text="{Binding Path=DisplayName}" />
                            </Hyperlink>
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

Notes:

1. The hyperlinkstyle is used to give a hyperlink feel to the hyperlink control with in listbox.

2. The listbox 'TeamListView' uses an ItemTemplate DataTemplate. The style for the ItemTemplate is ListBoxItem, by setting background to transparent onMouseHover the intention is to remove the blue with no color on hover.

What am I missing?

Answer 1

Try add this in ListBox.Resources and remove IsMouseOver trigger:

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

In system has default highlight brush depending on your system theme. To change this value, it is necessary to turn to SystemColors.

Quote from MSDN:

The SystemColors class provides access to system brushes and colors, such as ControlBrush, ControlBrushKey, and DesktopBrush. A system brush is a SolidColorBrush object that paints an area with the specified system color. A system brush always produces a solid fill; it can't be used to create a gradient.

You can use system brushes as either a static or a dynamic resource. Use a dynamic resource if you want the brush to update automatically if the user changes the system brush as the application is running; otherwise, use a static resource.

In .NET 4.5 system does not use SystemColors, therefore, you should:

• create the your Style/ControlTemplate

• look for alternatives, for example here: List/Combo Box Background And Selected Colours Under .net 4.5

• See this link, which shows how to remove the difference between the frameworks

Answer 2

If you just want to remove the Highlighting of your ListBoxItem you can just set the system colors to do it like below:

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