芯片的ListBox和DataTrigger问题
我的 ListBoxItem 和 DataTrigger 遇到问题。 我想在用鼠标单击 Chip 项目时更改 Chip 项目的 Background 颜色。
我认为问题出在这行代码中
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBoxItem},Path=IsSelected}"
Value="True">
<Setter Property="IconBackground"
Value="#1b5eb2" />
<Setter Property="Opacity"
Value="1"></Setter>
</DataTrigger>
运行我的代码我得到了一个信号类别列表（如下面的屏幕截图所示）：
但是，当我用鼠标单击它们时圆圈的颜色不会改变。
它应该像这样工作（单击时）：
我尝试了一些方法并检查了很多有关 DataTrigger 的主题，但我不能似乎明白了。
我的 .xaml 视图
<ListBox Name="SignalCategories"
ItemsSource="{Binding DefinedSignalCategories}"
SelectionMode="Single"
HorizontalAlignment="Center"
VerticalAlignment="Top"
BorderThickness="0">
<!--changing default ListBoxItem to hide selection highlight-->
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<!--changing default orientation-->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--custom view-->
<materialDesign:Chip Content="{Binding Name}"
Margin="5"
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}">
<materialDesign:Chip.Style>
<Style TargetType="{x:Type materialDesign:Chip}">
<Setter Property="Opacity"
Value="0.85" />
<Setter Property="IconBackground"
Value="Gray"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Opacity"
Value="1" />
<Setter Property="IconBackground"
Value="#1b5eb2">
</Setter>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBoxItem},Path=IsSelected}"
Value="True">
<Setter Property="IconBackground"
Value="#1b5eb2" />
<Setter Property="Opacity"
Value="1"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</materialDesign:Chip.Style>
<materialDesign:Chip.Icon>
<materialDesign:PackIcon Kind="{Binding IconName}" />
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have a problem with ListBoxItem and DataTrigger.
I want to change the Background color of my Chip item when the chip item is clicked with the mouse.
I think the problem is in this line of code
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBoxItem},Path=IsSelected}"
Value="True">
<Setter Property="IconBackground"
Value="#1b5eb2" />
<Setter Property="Opacity"
Value="1"></Setter>
</DataTrigger>
Running my code I got a list of signals category (like in the screenshot below):
However, when I click on them with my mouse the color of the circle does not change.
It should be working like this (when clicked):
I tried a couple of things and checked a lot of topics about DataTrigger, but i can't seem to figure it out.
My .xaml view
<ListBox Name="SignalCategories"
ItemsSource="{Binding DefinedSignalCategories}"
SelectionMode="Single"
HorizontalAlignment="Center"
VerticalAlignment="Top"
BorderThickness="0">
<!--changing default ListBoxItem to hide selection highlight-->
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<!--changing default orientation-->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--custom view-->
<materialDesign:Chip Content="{Binding Name}"
Margin="5"
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}">
<materialDesign:Chip.Style>
<Style TargetType="{x:Type materialDesign:Chip}">
<Setter Property="Opacity"
Value="0.85" />
<Setter Property="IconBackground"
Value="Gray"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Opacity"
Value="1" />
<Setter Property="IconBackground"
Value="#1b5eb2">
</Setter>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBoxItem},Path=IsSelected}"
Value="True">
<Setter Property="IconBackground"
Value="#1b5eb2" />
<Setter Property="Opacity"
Value="1"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</materialDesign:Chip.Style>
<materialDesign:Chip.Icon>
<materialDesign:PackIcon Kind="{Binding IconName}" />
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这不起作用的原因是您滥用了
Chip控件。它是派生自ButtonBase,这意味着它基本上是一个按钮。它处理鼠标单击事件，这会设置 将相应路由事件参数的e.Handled标志设置为true。请参阅Handled 的概念供参考。因此，
Chip上的单击会被ListBoxItem忽略，因此不会被选中。当然，您可以使用在代码隐藏中使用handledEventsToo注册点击处理程序的解决方法，如本文所述，然后在可视化树中搜索ListBoxItem并设置 < code>IsSelected 为true，但我不推荐它，因为它首先是错误的控件。由于Chip是一个按钮，因此它具有“鼠标悬停”和“按下”的视觉状态以及其他状态和大量您不需要或不需要的标记必须重写才能使按钮表现得好像它不是一个按钮。这没有道理。您可以做的是 复制
Chip的默认样式的要点，并用它制作一个DataTemplate或自定义控件。以下数据模板应该适合您。此模板与您的用例的
Chip模板几乎相同，但是，您可能需要考虑创建自己的模板并对其进行大幅简化，以满足您的需求。The reason why this does not work is that you are misusing the
Chipcontrol. It is a type derived fromButtonBase, which means it is basically a button. It handles mouse click events, which sets thee.Handledflag of the corresponding routed event arguments totrue. See The Concept of Handled for reference.Consequently, the click on the
Chipis ignored by theListBoxItemand is therefore not selected. You could of course use the workaround of registering a click handler in code-behind withhandledEventsTooas described in the article and then search up the visual tree for aListBoxItemand setIsSelectedtotrue, but I would not recommend it, since it is the wrong control to use in the first place. AsChipis a button, it has visual states for Mouse Over and Pressed and other states and lots of markup that you either do not need or have to override in order to make the button act as if it was not a button. That does not make sense.What you can do instead is copy the essentials of the default style for
Chipand make aDataTemplateor a custom control out of it. The following data template should work for you.This template is almost identical to the
Chiptemplate for your use-case, however, you might want to consider creating your own template and simplify it drastically to fit your requirements only.我发现问题似乎出在
materialDesign:Chip上。我在没有使用materialDesign的情况下重做了它，现在它可以正常工作了。
工作代码：
输出：
I figured it out looks like the problem is with
materialDesign:Chip.I've redone it without using materialDesign and now it's working correctly.
Working Code:
Output:
