WPF C# ListBox IsMouseOver 和 IsSelected 背景

Posted 2023-04-12

【中文标题】WPF C# ListBox IsMouseOver 和 IsSelected 背景

【英文标题】：WPF C# ListBox IsMouseOver and IsSelected background

【发布时间】：2020-08-05 12:37:29

【问题描述】：

我已经制作了以下用户控件，除了 2 个背景设置器属性，isMouseOver 和 IsSelected 的值都是透明的，它们什么都不做。

<UserControl.Resources>
        <DataTemplate x:Key="DeviceItemTemplate">
            <Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Green" CornerRadius="20" Height="150" Width="150">
                <StackPanel Orientation="Vertical">
                    <TextBox Name="screenNameTextBox"
                                 Margin="10" Height="20"
                                 Text="Binding Name" />
                    <TextBox
                                 Margin="10" Height="20"
                                 Text="Binding Location" />
                </StackPanel>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="DeviceItemTemplateSelected">
            <Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Orange" CornerRadius="20" Height="150" Width="150" >
                <StackPanel Orientation="Vertical" >
                    <TextBox Name="screenNameTextBox"
                                 Margin="10" Height="20"
                                 Text="Binding Name" />
                    <TextBox
                                 Margin="10" Height="20"
                                 Text="Binding Location" />
                </StackPanel>
            </Border>
        </DataTemplate>

        <Style TargetType="x:Type ListBoxItem" x:Key="DeviceContainerStyle">
            <Setter Property="ContentTemplate" Value="DynamicResource DeviceItemTemplate"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate" Value="DynamicResource DeviceItemTemplateSelected"/>
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Border
        Grid.Column="0"
        Margin="10"
        BorderBrush="Silver"
        BorderThickness="1">

        <ListBox ItemsSource="Binding Devices, UpdateSourceTrigger=PropertyChanged"
                    SelectedItem="Binding SelectedScreen, Mode=TwoWay" 
                    ItemContainerStyle="StaticResource DeviceContainerStyle"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"   >

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Border>

这就是它的样子

我也尝试过白色，但得到了相同的结果。我无法摆脱这个蓝色背景。

请问我忽略了什么？ -----收到mm8回答后-----

将他所有的代码放在资源字典中，对solidcolorbrush和BorderThickness进行了一些更改，并将样式部分从以前的修改为：

<Style BasedOn="StaticResource ListBoxItemSSDS" TargetType="x:Type ListBoxItem" x:Key="DeviceContainerStyle">
            <Setter Property="ContentTemplate" Value="DynamicResource DeviceItemTemplate"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate" Value="DynamicResource DeviceItemTemplateSelected"/>
                </Trigger>
            </Style.Triggers>
        </Style>

【参考方案1】：

您需要为ListBoxItem 定义一个自定义ControlTemplate，以便在设置IsMouseOver 和IsSelected 属性时能够作为它的背景。

您可以在 Visual Studio 或 Blend 中的设计模式下右键单击 ListBoxItem，然后选择“编辑模板”->“编辑副本”将默认模板复制到 XAML 标记中，然后根据您的要求对其进行编辑。

这是它的外观和所涉及的资源：

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<Style x:Key="ListBoxItemStyle1" TargetType="x:Type ListBoxItem">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Padding" Value="4,1"/>
    <Setter Property="HorizontalContentAlignment" Value="Binding HorizontalContentAlignment, RelativeSource=RelativeSource AncestorType=x:Type ItemsControl"/>
    <Setter Property="VerticalContentAlignment" Value="Binding VerticalContentAlignment, RelativeSource=RelativeSource AncestorType=x:Type ItemsControl"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="FocusVisualStyle" Value="StaticResource FocusVisual"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type ListBoxItem">
                <Border x:Name="Bd" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" Padding="TemplateBinding Padding" SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource Item.MouseOver.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource Item.MouseOver.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource Item.SelectedInactive.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource Item.SelectedInactive.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource Item.SelectedActive.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource Item.SelectedActive.Border"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" TargetName="Bd" Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

例如，您可以更改 Color of、Item.MouseOver.Background 和 Item.SelectedActive.Background 资源。