Listbox Item selection

Question

I have a WPF project (C#, Visual Studio 2010, MVVM).

In this project I have a ListBox. When I select the items I am getting a blue box around my objects and I'm not sure where said box comes from. Obviously it's something to do with selection, but I'm not sure what to alter to get it to disappear.

The Listbox is here:

<ListBox ItemsSource="{Binding ChatNodeListViewModel.ChatNodeVMs, Source={StaticResource Locator}}" Background="Transparent" Name="LbNodes" SelectedItem="{Binding ChatNodeListViewModel.SelectedNode, Source={StaticResource Locator}}" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="2000" Height="1600"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Canvas.Left" Value="{Binding XCoord}"/>
                    <Setter Property="Canvas.Top" Value="{Binding YCoord}"/>
                    <EventSetter Event="PreviewMouseLeftButtonDown" Handler="lb_PreviewMouseLeftButtonDown" />

                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}">

                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="DragDelta">
                                    <cmd:EventToCommand Command="{Binding ChatNodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                                </i:EventTrigger>

                            </i:Interaction.Triggers>
                        </Thumb>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding NodeVisualMode}" Value="0">
                            <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeVisualTemplate}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding NodeVisualMode}" Value="1">
                            <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeTemplateTest}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding NodeVisualMode}" Value="2">
                            <Setter TargetName="myThumb" Property="Template" Value="{StaticResource NodeTemplateTest2}" />
                        </DataTrigger>

                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

There is a main ControlTemplate which can be switched out for others (the main one being NodeVisualTemplate). But since this issue seems to happen on all of them, I'm inclined to believe it's further up the tree.

Still, I did do some testing for it, and will show it here:

<ControlTemplate x:Key="NodeVisualTemplate">
            <Grid>
                <Border x:Name="_Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="3" Margin="2" CornerRadius="5,5,5,5" BorderBrush="SteelBlue"                     Visibility="Visible">

                </Border>

            </Grid>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="true">
                    <Setter TargetName="_Border" Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Black" Opacity="1" BlurRadius="20" />
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="_Border" Property="Background" Value="Transparent"/>
                </DataTrigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

Within the border at the top of this template are some text boxes and stuff, but I don't suspect them as being part of the affair. The point is that I've changed the background of this control template. It is 'transparent' in the XAML above, but I've changed it to red and other colours to test. It doesn't get rid of the blue square that surrounds the ListBoxItem.

Here is an image of the horrible blue background I'm getting:

Can I get rid of it? Honestly I'm really at a loss.

Thanks.

Edit: I should mention something else I tried that is rather important here. I went up a layer into the ListBox.ItemContainerStyle part above and just under this line:

<EventSetter Event="PreviewMouseLeftButtonDown" Handler="lb_PreviewMouseLeftButtonDown" />

I added this:

<Style.Triggers>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="FontWeight" Value="Bold" />
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                    </Style.Triggers>

Did it work? No, it didn't. It didn't get rid of the big blue box. It did make my fonts bold though, so I know it at least had that effect.

Answer 1

Your Thumb is still generated inside of a ListBoxItem, Which has ControlTemplate of It's own. You need to put in your ListBoxItem Style, a Setter for Template, and put in there only:

<ControlTemplate TargetType="ListBoxItem">
    <ContentPresenter ContentSource="Content"/>
</ControlTemplate>

Answer 2

I think this is a "standard" thing, wpf does for you in ListBoxes. It highlights the currently selected Item for you. I found a similar thread here: WPF ListBox, how to hide border and change selected item background color?

They fixed it by adding this code to the listbox and setting the HighlightBrushKey to Transparent for this ListBox, did you try that in your case?

<ListBox BorderThickness="0" HorizontalContentAlignment="Stretch"  >
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
            </Style.Resources>
        </Style>
    </ListBox.Resources>                
</ListBox>