Disable Fluent theme's ripple effect for RadListBox

1 Answer 37 Views
ListBox Styling
Philipp
Top achievements
Rank 2
Iron
Philipp asked on 04 Mar 2022, 09:43 AM

Hello,

I'm developing an application that is based on fluent theme but should not use the ripple effect.

Therefore I followed instuctions in Fluent Theme article and placed in resouces of my MainWindow.xaml

<Window.Resources>
        <Style TargetType="mat:FluentControl" >
            <Setter Property="IsRippleEnabled" Value="False" />
        </Style>
</Window.Resources>

Basically this is working fine. On controls like Buttons or NavigationView the effect disappears. Unfortunately I noticed, that in RadListBox the ripple effect is still active when mouse is over an item of the list.

I attached a small example. It contains just a listbox and a button. Fluent theme is set and ripple should be disabled. For button it works fine. Listbox items still showing the effect.

 

How can I disable the ripple effect also for listbox items?

 

Thanks and regards

Philipp

1 Answer, 1 is accepted

Sort by
0
Accepted
Stenly
Telerik team
answered on 09 Mar 2022, 07:49 AM

Hello Philipp,

This behavior is present because inside the default control template of the RadListBoxItem control, a FluentControl element is present and its IsRippleEnabled property's value is template bound to its parent. With this in mind, you could create a new Style with TargetType="RadListBoxItem" and add a new Setter for the mat:FluentControl.IsRippleEnabled attached property.

The following code snippet shows the abovementioned logic's implementation:

<Window.Resources>
    <Style TargetType="telerik:RadListBoxItem">
        <Setter Property="mat:FluentControl.IsRippleEnabled" Value="False"/>
    </Style>
</Window.Resources>

With that said, I have attached the modified sample project, so, could you give it a try?

Regards,
Stenly
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/.

Philipp
Top achievements
Rank 2
Iron
commented on 09 Mar 2022, 07:56 AM

Hi Stenly,

 

thanks for your response and the explanation. I understand how the approach is working. Your sample works fine and behaves like I expected.

 

Regards

Philipp

Tags
ListBox Styling
Asked by
Philipp
Top achievements
Rank 2
Iron
Answers by
Stenly
Telerik team
Share this question
or