How to change selected item background color ? in UI for WPF

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

高大的春卷 · 理解Sass中变量作用域 | Sass中文网· 1 周前 ·

直爽的遥控器 · 《灵境行者》收藏突破千万，四大逼王之一《天道 ...· 3 周前 ·

听话的眼镜 · Supervisor简介、安装、配置 | ...· 3 月前 ·

力能扛鼎的生姜 · switch游戏合集下载-ns游戏合集-sw ...· 3 月前 ·

呐喊的便当 · 非遗介绍——粤剧简介-粤剧文化-华创在线-以 ...· 5 月前 ·

纯真的冲锋衣 · BAAI 2020 北京智源大会 | 林伟 ...· 6 月前 ·

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

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 Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate .

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

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 Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

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

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 Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.

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.

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

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
Get q uickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More .

Snippet from my DataTemplate using your fix

< DataTemplate x:Key = "DialogListDataTemplate" >

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

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

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes, and more, for FREE?! Register now for DevReach 2.0(20) .

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

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course ! Check it out at https://learn.telerik.com/ .

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 >

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products, quickly just got a fresh new look + new and improved content, including a brand new Blazor course ! Check it out at https://learn.telerik.com/ .

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes, and more, for FREE?! Register now for DevReach 2.0(20) .

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

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes, and more, for FREE?! Register now for DevReach 2.0(20) .

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools VB.NET to C# Converter Testing Framework

Free Tools

Support and Learning

Productivity and Design Tools

Free Tools

VB.NET to C# Converter Testing Framework