Hovered ListBoxItem show weird behaviour about adonis-ui

[benruehl]

Hey @Mgamerz, thanks for reporting this.
I was able to reproduce the behavior you described. I will see if I can find a reason for this and hope to develop a fix as well.

[rasyidf]

I think the problem is with the ripple effect.

[benruehl]

Thank you for reporting this.

A few questions:

• What do you mean with 'GeneratedItemTemplate'? There is no such property as far as I know. Do you simply mean 'ItemTemplate' or is there anything special to it?
• Did you enable the ripple effect on the list box? It is supported by the template but not visible by default.
• Did you set some kind of Content or ContentTemplate properties in your ItemTemplate?

It might be worth posting your xaml here so I can better see what exactly lead to this result.

In the meantime you can try the following to fix it temporarily:

1. Take AdonisUI's default ListBoxItem style from AdonisUI.ClassicTheme/DefaultStyles/ListBox.xaml

2. Copy it into your App.xaml resources right after the lines that include AdonisUI. You can also put it into a separate ResourceDictionary file and include it there. Give it a new key like ListBoxItemWithoutRippleStyle.

3. Remove the RippleHost control and associated triggers from the style's control template.

4. Create a new default ListBox style and assign the ListBoxItem style to it, e.g. like:

<Style TargetType="ListBox"
       BasedOn="{StaticResource {x:Type ListBox}">
    <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemWithoutRippleStyle}"/>
</Style>

5. Put that style in the same location as you chose for your ListBoxItem style.

In case it is really a problem with the ripple effect, it should be gone now. Currently I am not able to test this approach myself, so I apologize in case this does not work.

[rasyidf]

What do you mean with 'GeneratedItemTemplate'? There is no such property as far as I know. Do you simply mean 'ItemTemplate' or is there anything special to it?

Yes, I mean ItemTemplate, it just generated by adding data template

Did you enable the ripple effect on the list box? It is supported by the template but not visible by default.

I didn't enable it. I don't even know where the switch code.

Did you set some kind of Content or ContentTemplate properties in your ItemTemplate?

No, it just data template with binding.

Anyway, the solution works well for me, thank you so much.

[Mgamerz]

Just wanted to chime in that this removal of ripple effect also fixed an issue I was having where I had a listbox that had a stackpanel in it with a checkbox, an image, and some text. The check would appear and then fade out when being checked and would blank almost immediately when being unchecked. Hopefully this info helps someone someday.

[benruehl]

So, I think i was able to fix it. At least it works perfectly in my test scenario now. As I could not reproduce @rasyidf's setup I cannot be entirely sure if it solves his issues as well. But from looking at the description and image he provided I am very optimistic that it should be fixed now as well.

Additionally, I have removed the ripple host from the default ListBoxItem style as it is not required for most use cases. This should also improve performance a little on ListBoxes with many items. In case someone needs a ListBox where each item feels more like a button that executes some action on click, there is now a separate RippleListBoxItem style which can be used. This felt like a cleaner solution to me.

PS: Explanation
Just in case someone is interested what lead to the CheckBoxes fading out, I will try to explain it here.

First, a little background knowledge: When using the light theme, text is black. This does not look good on the blue accent color though where white text is more appropriate. So, when a ripple starts it has to transition the foreground color from black into white. In order to get the perfect transition here, the color switches exactly at the edge of the ripple ellipse. To make this possible the ripple host duplicates the actual content but with its duplicated version having white foreground. The ripple ellipse is actually an opacity mask which blends the duplicated content and the blue background over the existing content. This works as long as the duplicated content is an exact copy only with different colors. All this is also documented here.

Now about the actual issue: Somehow the DataContext was not inherited down the visual tree inside the ripple host's duplicated content. That's why clicking a CheckBox would set it to IsChecked="True" but the ripple started to blend in the duplicated CheckBox which has its own state still being on IsChecked="False". It looked like fading out because this is the only change the ripple does here. The actual elliptical color animation is not visible here because ListBoxItems switch their background to the same accent color instantly when selected.

The current state: The DataContext is now inherited correctly so when the CheckBox is checked now the duplicated one receives the check as well. The problem still remains though when not using bindings. When a child control like a CheckBox inside a control with ripple like a Button changes parts of its state, the duplicated CheckBox can only know about this if there has been a binding to a shared DataContext defined. So that both CheckBoxes' state is bound to the same property in some view model.

This might be a limitation which needs to be solved in the future but it was sufficient for all previous cases so far. I expect it to be a relatively rare scenario to have an interactive element like a CheckBox inside a control with a ripple host like a Button which is already interactive as well. One would not put a TabControl inside a MenuItem as well, I guess. But we'll see how long it takes until someone comes up with that ;)