1. Vấn đề phát hiện

Trong quá trình phát triển một ứng dụng desktop mới, giao diện người dùng sử dụng nhiều thành phần ListBox như hình dưới đây:

Sau khi kiểm tra mã XAML được sử dụng:

<!--Danh sách thiết bị-->
<Border Grid.Row="0" Grid.Column="1">
    <ListBox ItemsSource="{Binding DeviceUserInfos}" Style="{StaticResource Style.ListBox.Simple}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <!--Ghi đè template của ListBox-->
        <ListBox.Template>
            <ControlTemplate>
                <Grid>
                    <ScrollViewer Style="{StaticResource Style.ScrollViewer.Default}" ManipulationBoundaryFeedback="UIElement_OnManipulationBoundaryFeedback">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </ListBox.Template>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <controls:DeviceUserItem Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ListBox}, Converter={StaticResource ListBoxWidthConverter}}" Height="100" DeviceUserStatus="{Binding DeviceUserStatus}" DeviceName="{Binding DeviceName}" DeviceUserColor="{Binding DeviceUserColor}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Border>

Khi di chuyển chuột vào các mục trong ListBox, bạn sẽ thấy các mục được chọn có nền màu xanh nhạt theo mặc định. Điều này không phù hợp với yêu cầu thiết kế.

2. Giải pháp:

Để loại bỏ hiệu ứng nền màu xanh khi di chuột qua các mục, cần ghi đè template của ListBoxItem bằng cách tạo một kiểu (Style) mới cho nó:

<Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border Name="border"
                       Padding="7"
                       Background="Transparent"
                       BorderBrush="Transparent"
                       SnapsToDevicePixels="True">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Tiếp theo, áp dụng style này cho thuộc tính ItemContainerStyle của ListBox:

<ListBox ItemsSource="{Binding DeviceUserInfos}" 
         Style="{StaticResource Style.ListBox.Simple}" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         ScrollViewer.VerticalScrollBarVisibility="Visible" 
         ItemContainerStyle="{StaticResource CustomListBoxItemStyle}">
    <!-- Ghi đè template của ListBox -->
    <ListBox.Template>
        <ControlTemplate>
            <Grid>
                <ScrollViewer Style="{StaticResource Style.ScrollViewer.Default}" ManipulationBoundaryFeedback="UIElement_OnManipulationBoundaryFeedback">
                    <ItemsPresenter />
                </ScrollViewer>
            </Grid>
        </ControlTemplate>
    </ListBox.Template>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <controls:DeviceUserItem Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ListBox}, Converter={StaticResource ListBoxWidthConverter}}" 
                                    Height="100" 
                                    DeviceUserStatus="{Binding DeviceUserStatus}" 
                                    DeviceName="{Binding DeviceName}" 
                                    DeviceUserColor="{Binding DeviceUserColor}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

3. Kết quả sau khi thêm style cho ListBoxItem: Màu nền của các mục đã phù hợp với yêu cầu thiết kế, không còn xuất hiện màu xanh mặc định khi di chuột qua.