MaterialDesignToolToggleFlatListBox supresses Button clicks of its TabItems

[JDeuker]

Bug explanation

I have a ListBox using the MaterialDesignToolToggleFlatListBox Style. Inside the ListBox ItemTemplate I would like to use a Button. But the Button's Click Event or Command doesn't get recognized, like it was handled before. By clicking the Button only the Tab gets selected.

If I remove the MaterialDesignToolToggleFlatListBox Style, the clicking works.

Version

4.4.0

[nicolaihenriksen]

@JDeuker I am curious to understand the use case you're looking for.

When applying the "toggle" style, I assume you're going for a "toggling behavior" of the items in the ListBox. Placing a Button inside the template sort of contradicts that though? Or would you expect both the Click/Command on the Button to be invoked as well as the toggling of the item?

As you mention, removing the MaterialDesignToolToggleFlatListBox Style allows your button to handle the desired event/command; what is the reason you don't just remove the explicit Style and use the default? Again, I'm not saying there isn't an issue here, I just want to understand it better.

[JDeuker]

@nicolaihenriksen In my case I am using the ListBox like a TabControl. So the selected ListBoxItem is like an active Tab, which will show more Information in an additional ContentControl (bounded on the same ViewModel). The toggling behavior is like activating the Tab. The toggling should not trigger the Button and the Button should not trigger the toggling.

The Command of the Button is for removing the ListBoxItem from the list. Like closing a Tab.

I was experimenting with replacing it with a real TabControl, but there was the same problem like in #2921 I also prefer the look of MaterialDesignToolToggleFlatListBox over the MaterialDesign Tab/NavigationRail or Menu look.

[nicolaihenriksen]

@JDeuker Ok, thanks for the clarification.

In my opinion, you are using the ListBox in a non-standard way, and therefore I am not convinced there should be native support for this type of behavior. @Keboo Thoughts?

With that said, I think you could probably still use the same approach that was used to fix #2921 within your own ItemTemplate. What I believe you need to do, is disable the Ripple when an item is selected. You could add a trigger in your template which sets RippleAssist.IsDisabled=True on the first ancestor of type Ripple when the item is selected.

To be fair, I have not tested this. However, I know that the Ripple handles the PreviewMouseLeftButtonDown (tunelling) event and probably sets it as Handled=True which means the MouseButtonDown/MouseLeftButtonDown (bubbling) events are never actually triggered on the Button in your template. Disabling the Ripple should hopefully allow these events to trigger.

[Keboo]

I played around with it a little bit using the following (modified from the demo app).

<ListBox materialDesign:ListBoxAssist.IsToggle="False" Style="{StaticResource MaterialDesignToolToggleFlatListBox}">
  <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatBold}" />
  <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatItalic}" />
  <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatUnderline}" />
  <ListBoxItem>
    <StackPanel>
      <TextBlock Text="Some text" />
      <Button Content="Click Me" Click="Button_Click" />
    </StackPanel>
  </ListBoxItem>
</ListBox>

The key change is the ListBoxAssist.IsToggle property. This attached property is what is wiring up to the click event and marking the event as handled. This is likely the reason why you are not seeing the button's handle the click event. If you don't care about the toggling nature of the item (which from your description above, it sounds like you might not), you can simply disable it like I did in the snippet above.

[github-actions[bot]]

This issue is marked stale because it has been open 30 days with no activity. Remove stale label or update the issue, otherwise it will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.