Issues with ListBoxItem selection when ItemContainerStyle was changed - wpf

Question

I changed the style of ItemContainerStyle and that was the result:
I enjoyed the result, but when testing usability I noticed that when I select a region without text or image (red region on image) the "IsSelected" doesn't fire and doesn't select the item. Without the style change, that issue not occur..
Someone know the reason e how fix that issue?
Here is my xaml code:
<DockPanel>
<ListBox x:Name="lvCustomers" Margin="0" BorderThickness="0" SelectionMode="Single"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto" Background="{x:Null}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border Name="BackgroundBorder" SnapsToDevicePixels="True"/>
<Border Name="Border">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
<Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Margin="10,0,0,5" HorizontalAlignment="Stretch">
<DockPanel Margin="0,10,10,10" DockPanel.Dock="Left" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Foreground="White" x:Name="customerDetailsName" Text="{Binding Name}" FontSize="16" DockPanel.Dock="Top"/>
<DockPanel DockPanel.Dock="Top">
<TextBlock Foreground="White" x:Name="customerDetailsCityContent" Text="{Binding City}" FontSize="14" />
<TextBlock Foreground="White" x:Name="customerDetailsBarraContent" Text="-" FontSize="12" />
<TextBlock Foreground="White" x:Name="customerDetailsStateContent" Text="{Binding Region}" FontSize="14" />
</DockPanel>
<TextBlock Foreground="White" x:Name="customerDetailsCNPJContent" Text="{Binding CNPJ}" FontSize="14" />
</DockPanel>
<Image x:Name="customerImageStatus" Source="{Binding StatusImage}" Width="22" Height="22" Margin="10,0,25,0" DockPanel.Dock="Right" HorizontalAlignment="Right" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
Thanks in advance.

Answer 1

Please try by setting Background="Transparent" or IsHitTestVisible="True" to grid and border in controltemplate.As to achieve hit test for an transparent object, you should set the background to transparent.