All geek questions in one place

List of selected list items

I am trying to change the background of a selected item in a ListBox WPF.

I tried to implement a style for it, but for some reason it doesn't apply. I am still getting a blue background. Can anyone understand why?

<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 Content, but let keep it simple. --> <Grid x:Name="ThumbListBoxGrid"> <ListBox x:Name="ThumbListBox" ItemsSource="{Binding}" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBoxGrid, Path=ActualHeight}" IsSynchronizedWithCurrentItem="True" /> </Grid>

Does anyone see what's wrong here?

+2
source share
2 answers

You specify a SelectedItem Background for a ListBox with SystemColors.HighlightBrushKey (focused) and SystemColors.ControlBrushKey (not focused)

 <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>
+14
source

For those who are looking for this in the future, the accepted answer does not actually apply color when the control does not focus on me. Instead, use the following: it works as intended.

 <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>
+6
source

Source: https://habr.com/ru/post/1394032/

More articles:


All Articles