Home > Software engineering >  Problem with ListBox and DataTrigger for Chip
Problem with ListBox and DataTrigger for Chip

Time:02-28

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):

Horizontal list of signal categories as Chips.

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):

Chip with selected circle (blue).

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 enter image description here

  • Related