Changing color of item and its controls in ListView

[KTK]

Hello,

I have a RadListView with custom VisualItem (see first png) and my goal is to remove the highlight on selected item. Is there a way how to disable this feature in program so I dont have to create new theme?

And second question is about that little X buttons, I want to assign them a theme, but they are not RadButtons, but RadButtonElements and they seems to have no Theme property.


Thank you.

[Ralitsa]

Hello Jan,

Thank you for contacting us. 

In order to customize the selected item, you can subscribe to the VisualItemFormatting event and change the BackColor or other properties. Please take a look at the following code snippet: 

void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Selected == true)
    {
        e.VisualItem.BackColor = Color.Transparent;
        e.VisualItem.NumberOfColors = 1;
        e.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

In regards to your second question, you can use the API for overriding theme setting at time and the changes will apply only over the desired item. More information can be found on the following article: Override Theme Settings at Run Time. We introduced this functionality with the UI for WinForms Q3 2015 release. 

In the attachments, you can find a sample demo demonstrating how to change the themes setting of RadButtonElement.

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Ralitsa
Telerik

[KTK]

Hello Ralista,
Thank you for your help! I tried your solution but it didnt work for me the way I wanted to. Mainly because I provided you poor information about the problem. I am sorry. Can you please try to help me out once more?

In my application I have custom theme for RadButton built in Visual Style Builder, is there a way how I can bind this theme to the RadButtonElement? I tried to follow these insctructions : http://www.telerik.com/forums/apply-theme-to-radbuttonelement but without success. Maybe the source is outdated.
By changing the Theme, I was thinking to change the Theme property, rather than changing colors one by one. Something like

this.radButton1.ThemeName = "MyCustonTheme";

 

Subscribing to the VisualItemFormatting works great, but I have no clue how to preserve the mouse hover effect. I still want the item to be "semi-highlighted" like the others after running mouse over them. Is that possible within the code, or should I be trying to make my own theme in Visual Style Builder that serves my needs?

 

Thank you,

Jan

[Ralitsa]

Hi Jan,

Thank you for provided detailed description of your case. 

We provide a way to apply custom themes per control. You can set the ThemeName property of RadListView and the theme will apply on the RadButtonElement from the custom SimpleListViewVisualItem. In the code snippet below you can find a sample how to achieve it: 

ThemeResolutionService.LoadPackageFile(@"C:\TelerikMetroCustom.tssp");
this.radListView1.ThemeName = "TelerikMetroCustom";

More information how to apply custom theme can be found here: Themes >> Using custom themes. 

By default the style settings are not changed when hovering a selected item. You can achieve it by modifying the theme or using the API for overriding theme settings. 

In order to change the settings in a custom theme you need to follow these steps: 
1. Start the Visual Style Builder application 
2. Load your custom theme 
3. Select SimpleListViewVisualItem and add new Element State - SimpleListViewVisualItem.ContainsMouse.MouseOver.IsHotTracking.Current.Selected 
4. Change all necessary properties to customize the desired color like BackColor, NumberOfColors, etc. 
5. Save the theme and load it in your application.

If you want to override the theme settings, you can take a look at the following code snippet how to achieve it: 

void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Selected == true)
    {
        e.VisualItem.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Aquamarine, "ContainsMouse.MouseOver.IsHotTracking.Current.Selected");
        e.VisualItem.SetThemeValueOverride(LightVisualElement.NumberOfColorsProperty, 1, "ContainsMouse.MouseOver.IsHotTracking.Current.Selected");

        e.VisualItem.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Transparent, "Selected");
        e.VisualItem.SetThemeValueOverride(LightVisualElement.NumberOfColorsProperty, 1, "Selected");
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

In the attachments you can find sample demo demonstrating how to load custom theme and override the setting and a gif showing how to modify the theme using Visual Style Builder. 

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Ralitsa
Telerik

[KTK]

Adding element states in Visual builder is neat thing I didnt know and exactly what I needed.

Thank you very much!