wpfxamlselecteditemlistboxitemlistbox-control

Issues with ListBoxItem selection when ItemContainerStyle was changed


I changed the style of ItemContainerStyle and that was the result:

enter image description here

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.


Solution

  • 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.