How to Get Rid of Border around ListBox Selected Item in WPF?

Question

I have a ListBox filled with Apples. I wanted to change the selected item to only have a solid background with no border. I followed this suggestion:

Question #146269: Change Wpf Datatemplate for Listbox Item if Selected

Here is my xaml:

<UserControl.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="AppleItemTemplate">
            <Border Opacity="1" Padding="10,5">
                    <TextBlock Foreground="{DynamicResource PrimaryTextColor}">
                    <TextBlock.Text>
                        <Binding Path="DisplayName"/>
                    </TextBlock.Text>
                </TextBlock>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="AppleItemTemplateSelected">
            <Border BorderThickness="0" BorderBrush="Transparent" Padding="10,5" Background="{DynamicResource LeftSidebarBGColorHighlight}">
                <TextBlock Foreground="{DynamicResource PrimaryTextColor}">
                    <TextBlock.Text>
                        <Binding Path="DisplayName"/>
                    </TextBlock.Text>
                </TextBlock>
            </Border>
        </DataTemplate>
        <Style TargetType="{x:Type ListBoxItem}" x:Key="AppleContainerStyle">
            <Setter Property="ContentTemplate" Value="{DynamicResource AppleItemTemplate}"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate" Value="{DynamicResource AppleItemTemplateSelected}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</UserControl.Resources>

<ListBox ItemsSource="{Binding Apples}"
         SelectedItem="{Binding SelectedApple}"
         ItemContainerStyle="{StaticResource AppleContainerStyle}"

         Background="{DynamicResource LeftSidebarBGColor}"
         BorderThickness="0"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch"
         >

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

When I run the program, and select an apple, I get this:

You can see that the XAML is working to apply a grey background color. But there's a white border that shouldn't be there. If you look closely, there are also subtle grey bands on the left and right sides of the box just inside the border. (sad face)

Does anyone know what's wrong with my Data Template or my ListBox settings?

Answer 1

MarkFeldman's answer worked, but there was a mouse click event problem. With the Padding on the Border element, mouse clicks would not register when clicking in the padded area between text items. To fix it, I replaced the Border with a StackPanel, and moved the Padding onto the TextBlock. Padding on the textblock itself registers a click properly.

Final xaml:

<UserControl.Resources>
<ResourceDictionary>
    <ControlTemplate x:Key="AppleItemTemplate">
        <StackPanel Opacity="1">
                <TextBlock Padding="10,5" Foreground="{DynamicResource PrimaryTextColor}">
                <TextBlock.Text>
                    <Binding Path="DisplayName"/>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </ControlTemplate>
    <ControlTemplate x:Key="AppleItemTemplateSelected">
        <StackPanel Background="{DynamicResource LeftSidebarBGColorHighlight}">
            <TextBlock Padding="10,5" Foreground="{DynamicResource PrimaryTextColor}">
                <TextBlock.Text>
                    <Binding Path="DisplayName"/>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </ControlTemplate>
    <Style TargetType="{x:Type ListBoxItem}" x:Key="AppleContainerStyle">
        <Setter Property="Template" Value="{DynamicResource AppleItemTemplate}"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Template" Value="{DynamicResource AppleItemTemplateSelected}"/>
                <Setter Property="BorderThickness" Value="0"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

Answer 2

If you just want to remove the border of selected item,try this :

Add <Setter Property="BorderThickness" Value="0"/> in the trigger "IsSelected".

In my demo , I found it works.