WPF C# ListBox IsMouseOver 和 IsSelected 背景

Question

我已经制作了以下用户控件，除了 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>

Answer 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 资源。