3

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:

ListViewItem Screen Shot

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?

Anatoliy Nikolaev
  • 22,370
  • 15
  • 69
  • 68
Tarun Arora
  • 4,692
  • 4
  • 30
  • 40

2 Answers2

1

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>
Nitin
  • 18,344
  • 2
  • 36
  • 53
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:

Community
  • 1
  • 1
Anatoliy Nikolaev
  • 22,370
  • 15
  • 69
  • 68
  • i don't understand why you have to change the system color itself , why can't it be replaced by a different value source? – eran otzap Sep 22 '13 at 15:56
  • @eran otzap: I did not little understand, can you describe in detail your question? – Anatoliy Nikolaev Sep 22 '13 at 15:59
  • why are giving a new value to SystemColors.HighlightBrushKey and not the Background of the listboxitem , why is that ? why can't the Background property of the ListBoxItem be changed directly ? – eran otzap Sep 22 '13 at 16:17
  • 1
    Thank you sir! That was it, .NET 4.5, your suggestion solved it. Thank you. I followed the answer here, http://stackoverflow.com/questions/12007918/list-combo-box-background-and-selected-colours-under-net-4-5 – Tarun Arora Sep 22 '13 at 16:18
  • @eran otzap: Please read quote in my answer. `SystemColors` - This is the class that contains static variables in the colors. This is done because, system has default highlight brush *depending* on your system theme. It turns out, that the values of colors the system are taken from this class `SystemColors` and does not take the color that you're setting in the trigger. This construction it was designed by WPF developers. – Anatoliy Nikolaev Sep 22 '13 at 16:24