更改选定颜色列表框

Posted 2023-02-21

【中文标题】更改选定颜色列表框

【英文标题】：Change the Selected Color Listbox

【发布时间】：2011-07-28 01:13:37

【问题描述】：

我想更改选定背景并让它显示一个带圆角的渐变。我搜索了谷歌，发现有些人确实通过覆盖默认颜色来更改所选颜色。有什么办法可以做到这一点吗？我在想有没有办法在选择项目时显示圆角边框作为背景？

【参考方案1】：

这是 ListBoxItem 的默认样式（这是我们想要更改的）。如果您使用的是 Expression Blend 4，则可以通过右键单击“对象和时间线”控件中的列表框项来“检索”此样式。

<Style x:Key="ListBoxItemStyle1" TargetType="x:Type ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <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="Padding" Value="2,0,0,0"/>
    <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>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="DynamicResource x:Static SystemColors.HighlightBrushKey"/>
                        <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.HighlightTextBrushKey"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="DynamicResource x:Static SystemColors.ControlBrushKey"/>
                        <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.ControlTextBrushKey"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

让我们抽出一些重要的部分，以便您学会自己做。

<Style x:Key="ListBoxItemStyle1" TargetType="x:Type ListBoxItem">

这是样式声明的开始。我们给了它一个 x:Key 以便可以从资源字典中检索它，并且我们为 ListBoxItem 设置了 TargetType。

现在，我们要查找要更改的样式部分。在这种情况下，我们将继续在新的 ControlTemplate 上查找作为 MultiTrigger 的样式部分。

<MultiTrigger>
<MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="true"/>
        <Condition Property="Selector.IsSelectionActive" Value="false"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" TargetName="Bd" Value="DynamicResource x:Static SystemColors.ControlBrushKey"/>
    <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.ControlTextBrushKey"/>
</MultiTrigger>

这个 MultiTrigger 需要 2 个属性来匹配值才能被激活。此触发器在激活时会将背景颜色更改为 Value="..." 并将前景色更改为 Value="..."。为了获得渐变背景，我们需要将 Background Value="..." 中的值更改为不同的画笔。让我们快速创建一个小渐变笔刷（颜色也很丰富！）

<LinearGradientBrush x:Key="GradientBrush" StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>

现在让我们将它应用到这个触发器的背景。

<Setter Property="Background" TargetName="Bd" Value="StaticResource GradientBrush"/>

现在，当将此样式应用于 ListBoxItem 并且 ListBoxItem IsSelected = True（和 Selector.IsSelectionActive = false）时，您将在 listboxitem 上看到渐变背景。

现在，您还需要圆角。如果我们走到 ControlTemplate 的顶部，我们会看到一个边界声明。

<Border x:Name="Bd"

在该声明中，我们希望添加一个 CornerRadius 属性来使 ListBoxItem 上的角变圆。

CornerRadius="5"

现在，您应该能够创建一个圆角半径、线性渐变背景的列表框项。我希望你能自己从这里继续前进。

【讨论】：

哇，这是很棒的迷你教程。你就是男人。首先它不起作用，但改变GradientBrushname 起作用了。我认为它在任何方面都有一些冲突。这是一个绝妙的答案

【参考方案2】：

我的博客here 上有一个示例。它覆盖了 ControlTemplate 和它使用的颜色。