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>
CodePudding user response:
The reason why this does not work is that you are misusing the Chip
control. It is a type