How to change selected item background color ?

[Ninh]

Hi everyone !
I want to change item background color when select or mouse hover , help me please !

[Shinu]

Hi Ninh,

Please have a look at the following code.

XAML:

<UserControl.Resources>
    <Style x:Key="myLBStyle" TargetType="{x:Type ListBoxItem}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                             Color="Transparent"/>
        </Style.Resources>
    </Style>
</UserControl.Resources>

<ListBox ItemsSource="{Binding Path=FirstNames}"
         ItemContainerStyle="{StaticResource myLBStyle}">

Thanks,
Shinu.

[Ninh]

Hi Shinu ,
 I coded follow you, but I am using RadListBox , it don't change background color  ( ListBox done ). Please tell me the way to change select item background color in RadListBox .
Thanks ,
Ninh.

[Kalin]

Hello Ninh,

In order to set different background colors for selected and highlighted state of the items of RadListBox, you should customize the Style of the RadListBoxItem and more specifically the MouseOverVisual and SelectedVisual elements in the template. You can achieve that by using Implicit Styles. I've attached a sample project to demonstrate exactly the needed approach.

Hope this helps.

Kind regards,
Kalin
the Telerik team

[Amir]

You must be kidding!

Seriously!

For item selection color change there must be that much code
change in App.XAML and several other files! How do you expect people figure
this out.

And you call your libraries the most intuitive RAD! Selling
it for thousands dollars!

What are you smoking out there in Telerik development :-)

[Kalin]

Hello Amir,

Thank you for your feedback. Indeed in this particular case to achieve such a custom appearance of the control you would have to exact and modify the default template of the RadListoBoxItem. As for fact that in the sample project we have modified couple of xaml files - this is so because we are using the Implicit Styling approach. The same result can be achieved with changes in a single file. Note that using Implicit Styles provides the following benefits:

- Custom themes are done much easier - created only via merged dictionaries
- Basing styles on a theme is simple
- Assemblies have smaller size
- Improved Blend support

If you have you any other questions, do not hesitate to contact us.

Regards,
Kalin
Telerik

[Elena]

Hello Kalin,

I'm trying to find a way of shading/changing background colour for some items in my RadListBox, is this easier now or is still as complicated as you describe in this thread?

Kind Regards,

Elena

[Kalin]

Hi Elena,

Depending on the exact requirements you could modify only the default Style of the ListBoxItem - this should be pretty easy when using Implicit Styles. However some changes may required modifications in the ControlTemplate of the ListBoxItem which will evolve some more XAML to be extracted from the default themes.

Please give it a try and if you need further assistance, you could open up a support ticket and attach the project so we can check it on our side and provide you the best solution for the exact requirements. 

Regards,
Kalin
Telerik

[Felix]

I think it is easier if you use a RadTreeView. It would look like a list and you can edit the telerik:RadTreeView.ItemContainerStyle

Just look for Styling the RadTreeViewItem.

[Doug]

RadListBox1.Items(3).ControlStyle.BackColor = Drawing.Color.AliceBlue

[Marco]

Will there be a SelectedBackground property with the next release like: https://docs.telerik.com/devtools/wpf/controls/radgridview/rows/selected-row-background ?

[Marco]

I found a workaround, inspired by this post by Karl: https://www.telerik.com/forums/how-do-i-set-item-template-controls-to-match-the-selection-color#knb2wE6t-EO8wo0LHRNFvQ and this project by Geri: https://www.telerik.com/forums/alternate-row-color-87bbfc014df3#LXZyH8qo-kSD-yK29mAh1g

<Window x:Class="RadLIstBoxStyleProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik ="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <telerik:RadListBox x:Name="lb" ItemsSource="{Binding Path=Dates}">
            <telerik:RadListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}, Path=IsSelected}" Value="True">
                                        <Setter Property="Background" Value="Red"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>
                        <TextBlock Text="{Binding}">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}, Path=IsSelected}" Value="True">
                                            <Setter Property="Foreground" Value="White"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </StackPanel>
                </DataTemplate>
            </telerik:RadListBox.ItemTemplate>
        </telerik:RadListBox>
    </StackPanel>
</Window>

See attachment.

The problem is the big border in some themes (e.g. Windows8theme)

PS: sorry for double post, but i cant edit my last one ...

 

[Stefan]

Hello Marco,

The general approach that is recommended for customizing the default appearance of the components, is to modify their template. Indeed, we made an exception in regards to RadGridView, but I am afraid that we cannot commit to adding such properties for all components. Please, stick to the approach that is already demonstrated in this thread by my colleague.

Regards,
Stefan
Progress Telerik

[Mark]

Thanks M8!! Works like a charm!!!!

Snippet from my DataTemplate using your fix

<DataTemplate x:Key="DialogListDataTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="40" Height="40" Margin="12 0 15 0">
            <Path Data="M10.0885,0.5 C15.384083,0.50000006 19.677,4.7929177 19.677,10.0885 C19.677,15.384083 15.384083,19.677 10.0885,19.677 C4.7929177,19.677 0.5,15.384083 0.5,10.0885 C0.5,4.7929177 4.7929177,0.50000006 10.0885,0.5 z"
                      Stretch="Fill" Stroke="{StaticResource febelcoColorbrushDark}" StrokeThickness="1.5" >
                <Path.Style>
                    <Style TargetType="Path">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}, Path=IsSelected}" Value="True">
                                <Setter Property="Fill" Value="{StaticResource febelcoColorbrushDark}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Grid>
        <StackPanel Grid.Column="1" Orientation="Vertical" Width="480" HorizontalAlignment="Left">
            <TextBlock Text="{Binding Reason}" FontSize="18" TextWrapping="Wrap" />
            <TextBlock Text="{Binding Description}" FontSize="12" TextWrapping="Wrap" />
        </StackPanel>
    </Grid>
</DataTemplate>

 

[Kevin]

Hi everyone,

How is it possible to change the border color of the selected and mousover item with this solutions?

I'm editing the style liket this:

<Grid.Style>
                             <Style TargetType="Grid">
                                 <Style.Triggers>
                                     <DataTrigger
                                         Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}, Path=IsSelected}"
                                         Value="True">
                                         <Setter Property="Background" Value="Red" />
                                     </DataTrigger>
                                     <DataTrigger
                                         Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}, Path=IsMouseOver}"
                                         Value="True">
                                         <Setter Property="Background" Value="Green" />
                                     </DataTrigger>
                                 </Style.Triggers>
                             </Style>
                         </Grid.Style>

 

But it does not change the complete background on mouseover + select.

On the attached image you can see the red on selected + green on mouseover background on the items, and the default yellow surrounding that I am trying to change.

What properties do I need to change?

Best regards,

Kevin

[Martin Ivanov]

Hello Kevin,

The mouse over and the selected background colors of RadListBoxItem are hardcoded in its ControlTemplate. To change those, you will need to extract the ControlTemplate of RadListBoxItem and change the colors there. Or if you use one of the latest themes (VisualStudio2019, Crystal, Fluent and Material), instead of extracting the template, you can use the ThemeHelper's attached properties.

Regards,
Martin Ivanov
Progress Telerik

[Kevin]

Hi Martin,

I'm using the latest Version of nuget (Telerik.UI.for.Wpf.NetCore.Xaml" Version="2020.3.915) and VisualStudio 2019.

Using the ThemeHelper on <telerik:RadListBox> does not change the UI.

 

   <telerik:RadListBox Name="InbasketListBox"
                                ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                                ItemsSource="{Binding InbasketItems}"
                                telerik:ListBoxSelectedItemsBehavior.SelectedItemsSource="{Binding SelectedInbasketItems}"
                                telerik:ScrollingSettingsBehavior.ScrollStep="180"
                                Visibility="{Binding ShowThumbnailList, Converter={StaticResource BooleanToVisibilityConverter}}"
                                Background="{StaticResource BrushBackgroundLightGrey}" Width="Auto"
                                SelectionMode="Extended"
                                SelectionChanged="ItemsControlSelector_OnSelectionChanged"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                ScrollViewer.CanContentScroll="False"
                                xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
                                helpers:ThemeHelper.MouseOverBrush="LightGoldenrodYellow"
                                helpers:ThemeHelper.PressedBrush="{telerik:VisualStudio2019Resource ResourceKey=ValidationBrush}"
                                helpers:ThemeHelper.CheckedBrush="{StaticResource MyCheckedBrush}">

 

Extracting the template also only provides me with the "empty template" option, not "copy template" like described in the documenation.

Note: I'm using an itemtemplate in my radlistbox.

 

Regards,

Kevin

[Martin Ivanov]

Hello Kevin,

The ThemeHelper class should be used on the RadListBoxItem elements. For example:

<Setter Property="telerik:ThemeHelper.FocusBrush" Value="Red" />
<! -- OR -->
<telerik:RadListBoxItem telerik:ThemeHelper.FocusBrush="Red" />

About the template extraction I would recommend you to go copy/paste the required resources from the Telerik.Windows.Controls.xaml file instead of using the Visual Studio's extracting tool. This is the first approach described in the Editing Control Templates article.

Regards,
Martin Ivanov
Progress Telerik

[Kevin]

Hi Martin,

I already tried this, and it does not work for the themehelper properties (focus/pressed etc.):

<Setter Property="telerik:ThemeHelper.FocusBrush" Value="Red" />

 

I use it like this:

<Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
           <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
           <EventSetter Event="MouseLeftButtonDown" Handler="InbasketItem_MouseLeftButtonDown" />
           <Setter Property="helpers:ThemeHelper.FocusBrush" Value="Red" />
           <Setter Property="helpers:ThemeHelper.PressedBrush" Value="Red" />
           <Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="Red" />
       </Style>

 

The first 2 setters are working (mouse down, dragdrop), the themehelpers are ignored.

<telerik:RadListBox Name="InbasketListBox"
              ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                                ItemsSource="{Binding InbasketItems}"
                                ...
       <telerik:RadListBox.ItemTemplate>
                    <DataTemplate>
                             ...
                    </DataTemplate>
       </telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>

[Dinko | Tech Support Engineer]

Hi Kevin,

Thank you for the provided details.

We are checking your scenario, and we need more time. We will contact you again in the next couple of days with more information.

Regards,
Dinko
Progress Telerik

[Martin Ivanov]

Кеvin,

I've tested your code snippet and the ThemeHelper settings work properly on my side. The only color that doesn't change is the background of the selected item. To change this, you can set the ThemeHelper.CheckedBrsuh property. I've attached a small example based on your code. The project is based on the Xaml version of the Telerik dlls. I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Kevin]

Hi,

Thank you, with your example I saw how it works.

You have to also set a fixed theme (telerik:StyleManager.Theme="VisualStudio2019") for the ThemeHelper to work, I was missing this.

Best regards,

Kevin

[Martin Ivanov]

Hello Kevin,

Yes. The theme setting is required because the ThemeHelper is supported only by the  VisualStudio2019, Crystal, Fluent and Material themes.

Regards,
Martin Ivanov
Progress Telerik