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

问题描述

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

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

这是样式声明的开始.我们给了它一个 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(以及 Selector.IsSelectionActive = false) 您会在列表框项上看到渐变背景.

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"

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

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