更改选定的颜色列表框 [英] Change the Selected Color Listbox

问题描述

我想更改选定背景"并使它显示带有圆角的渐变.我搜索了Google，发现有些人确实通过覆盖默认颜色来更改所选颜色.有什么办法可以做到吗?我在想选择某项时是否有任何方法可以显示圆角边框作为背景?

I want to change the Selected Background and have it display a gradient with round corners. I've searched Google and found that some people do change the selected color by overriding the default color. Is there any way I can do this? I was thinking is there any way to display a round cornered border as the background when an item is selected?

推荐答案

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

Here is the default style for a ListBoxItem (which is what we want to change). This style can be "retrieved" if you are using Expression Blend 4 by right clicking on a listboxitem in the Objects and Timelines control.

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

让我们抽出一些重要的部分，以便您自己学习.

Let's pull out some important parts so that you learn to do this yourself.

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

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

This is the start of the Style declaration. We've given it a x:Key so it can be retrieved from a resource dictionary, and we've set the TargetType for ListBoxItem.

现在，我们要查找样式中要更改的部分.在这种情况下，我们将在新的ControlTemplate上查找样式的一部分，该部分是MultiTrigger.

Now, we want to look for the portion of the style that we want to change. In this case, we're going to go down and look for a section of the style that is a MultiTrigger on the new ControlTemplate.

<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 ="..."中的值更改为其他画笔.让我们创建一个快速的小渐变笔刷(也非常彩色！)

This MultiTrigger needs 2 properties to match the values in order to be activated. This trigger, when activated, will change the background color to Value="..." and the foreground color to Value="...". In order to get a gradient background, we need to change the value in the Background Value="..." to a different brush. Let's create a quick little gradient brush (very colorful one too!)

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

因此，现在将其应用于此触发器的背景.

So now let's apply this to the Background of this trigger.

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

现在，当将此样式应用于ListBoxItem且ListBoxItem IsSelected = True时(和

Now, when this style is applied to the ListBoxItem, and the ListBoxItem IsSelected = True (and Selector.IsSelectionActive = false) you'll see a gradient background on the listboxitem.

现在，您还想要圆角.如果我们转到ControlTemplate的顶部，则会看到边框声明.

Now, you also wanted rounded corners. If we go way up to the top of the ControlTemplate, we'll see a border declaration.

<Border x:Name="Bd"

在该声明中，我们想添加一个CornerRadius属性，以使ListBoxItem上的角变圆.

In that declaration, we want to add a CornerRadius attribute to get the corners rounded on the ListBoxItem.

CornerRadius="5"

现在，您应该能够创建一个圆角半径，线性渐变背景listboxitem.希望您能够自己在这里进行.

And now, you should be able to create a corner radius, linear gradient background listboxitem. I hope that you'll be able to carry on from here on your own.

这篇关于更改选定的颜色列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！