Question

我正在尝试更改WPF ListBox中所选项目的背景。

我试图为它实现一种样式，但由于某种原因它没有被应用。我仍然得到一个蓝色的背景。谁能明白为什么？

<UserControl x:Class="Thumbnails"
         xmlns:local="clr-namespace:ContentPresenter"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="350" d:DesignWidth="800">
<UserControl.Resources>
    <local:ThumbImageHeightConverter x:Key="HeightConv" />
    <local:ThumbImageWidthConverter x:Key="WidthConv" />
    <local:InnerGridHeightConverter x:Key="InnerGridHeightConv" />
    <local:ReflectWidthConverter x:Key="ReflectWidthConv" />
    <local:ReflectCenterYConv x:Key="ReflectCenterYConv" />

    <Style x:Name="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="Selector.IsSelected" Value="True">
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type ListBox}">
        <!-- Set the ItemTemplate of the ListBox to a DataTemplate which explains how to display an object of type BitmapImage. -->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid x:Name="ThumbGrid" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBox, Path=ActualHeight}"  >
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="ThumbGridThumbImgRow" ></RowDefinition>
                            <RowDefinition x:Name="GridReflectRow" Height="40" ></RowDefinition>
                        </Grid.RowDefinitions>
                        <Border x:Name="HighlightBorder" BorderThickness="7" BorderBrush="Black" CornerRadius="18" Padding="2" Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Grid x:Name="ThumbInnerGrid">
                                <Grid.Height>
                                    <MultiBinding Converter="{StaticResource InnerGridHeightConv}">
                                        <Binding ElementName="ThumbGrid" Path="ActualHeight" />
                                        <Binding ElementName="HighlightBorder" Path="CornerRadius" />
                                        <Binding ElementName="mask" Path="CornerRadius" />
                                    </MultiBinding>
                                </Grid.Height>
                                <Border x:Name="mask" Background="White" CornerRadius="15" />
                                <StackPanel x:Name="ThumbInnerStack" >
                                    <StackPanel.OpacityMask>
                                        <VisualBrush Visual="{Binding ElementName=mask}"/>
                                    </StackPanel.OpacityMask>
                                    <!--<Image x:Name="ThumbImg" Source="{Binding Path=UriSource}" Stretch="Fill" Width="{Binding}" Height="{Binding Source={StaticResource ThumbImageSize}, Path=ImgHeight}">-->
                                    <Image x:Name="ThumbImg" Stretch="UniformToFill" SnapsToDevicePixels="True" >
                                        <Image.Height>
                                            <MultiBinding Converter="{StaticResource HeightConv}">
                                                <Binding ElementName="HighlightBorder" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Height>
                                        <Image.Width>
                                            <MultiBinding Converter="{StaticResource WidthConv}">
                                                <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Width>
                                        <Image.Source>
                                            <BitmapImage UriSource="{Binding Path=Src}"></BitmapImage>
                                        </Image.Source>
                                    </Image>
                                </StackPanel>
                            </Grid> 
                        </Border>

                        <Border Height="{Binding ElementName=ThumbImg, Path=ActualHeight}" Grid.Row="1" CornerRadius="15" SnapsToDevicePixels="True" Opacity="0.75" >
                            <Border.Width>
                                <MultiBinding Converter="{StaticResource ReflectWidthConv}">
                                    <Binding ElementName="HighlightBorder" Path="ActualWidth" />
                                    <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                </MultiBinding>
                            </Border.Width>
                            <Border.Background>
                                <VisualBrush Visual="{Binding ElementName=ThumbImg}">
                                    <VisualBrush.Transform>
                                        <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200">
                                            <ScaleTransform.CenterY>
                                                <MultiBinding Converter="{StaticResource ReflectCenterYConv}">
                                                    <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                </MultiBinding>
                                            </ScaleTransform.CenterY>
                                        </ScaleTransform>
                                    </VisualBrush.Transform>
                                </VisualBrush>
                            </Border.Background>
                            <Border.OpacityMask>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.3">
                                    <GradientStop Offset="0" Color="Black"></GradientStop>
                                    <GradientStop Offset="0.1" Color="Transparent"></GradientStop>
                                </LinearGradientBrush>
                            </Border.OpacityMask>
                        </Border>
                        <!--<Label x:Name="ThumbTitle" Grid.Row="1" Content="{Binding Path=Title}" HorizontalAlignment="Center"></Label>-->
                        <Label x:Name="ThumbTitle" Grid.Row="1" Content="{Binding ElementName=ThumbInnerGrid, Path=ActualHeight, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"></Label>
                    </Grid> 
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="Background" Value="Black"/>
    </Style>

</UserControl.Resources>

    <UserControl.DataContext>
        <ObjectDataProvider ObjectType="{x:Type local:ThumbImageLoader}" MethodName="LoadImagesv2" IsAsynchronous="True"  />
</UserControl.DataContext>


<!-- This ListBox is the Content of the Window. Normally you would have a panel of some type as the Window's Content, but let's keep it simple. -->
<Grid x:Name="ThumbListBoxGrid">
    <ListBox x:Name="ThumbListBox" ItemsSource="{Binding}" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBoxGrid, Path=ActualHeight}" IsSynchronizedWithCurrentItem="True"  />
</Grid>

有人在这里看到了什么问题吗？

Answer 1

您使用SelectedItem（重点）和Background（未关注）

为ListBox指定SystemColors.HighlightBrushKey SystemColors.ControlBrushKey

<Style TargetType="{x:Type ListBox}">
    <Style.Resources> 
        <!-- Background of selected item when focussed --> 
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
                         Color="White"/> 
        <!-- Background of selected item when not focussed --> 
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                         Color="White" /> 
    </Style.Resources>
    <!--...-->
</Style>

Answer 2

对于将来搜索此内容的任何人来说，当控件不专注于我时，接受的答案实际上不会应用颜色。应该使用以下内容，它似乎按预期工作。

<Style TargetType="ListBox">
    <Style.Resources>
        <!-- Background of selected item when focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFB733" />
        <!-- Background of selected item when not focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFFFB733"/>
    </Style.Resources>
</Style>

ListBox选择的项目背景

2 个答案: