WPF - How to combine DataTrigger and Trigger?

Question

NOTE I have asked the related question: How to combine DataTrigger and EventTrigger?

I have a list box containing several items. The item's class implements INotifyPropertyChanged and has a property IsAvailable. I use that property to indicate unavailable options in the list using a different colour.

However, if a selected item is not available, then the foreground colour should be red.

<ListBox>
  <ListBox.Resources>
    <DataTemplate DataType="{x:Type local:InstitutionViewModel}">
      <TextBlock Name="Name" Text="{Binding Name}"/>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsAvailable}" Value="False">
          <Setter TargetName="Name" Property="Foreground" Value="#888"/>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>
  </ListBox.Resources>
</ListBox>

I use the above data trigger to grey out unavailable items.

The problem I'm facing is that the fact that the item is selected has nothing to do with the underlying data to which the template is bound. What I really want is some kind of multi-trigger that supports both a regular Trigger on a dependency property (ListBoxItem.IsSelected) along with a DataTrigger on the bound data item.

Can this be done without introducing the concept of selection into my view model?

For anyone wondering why I do not disable unavailable items, understand that it is a requirement of the application that unavailable options may be selected. There are actually a few list boxes, and selection in one effects what's available in the others. I cannot disable the items as the user would not be able to change their minds or explore different combinations if items were disabled based upon earlier selections.

Durrett

Answer 1

For anyone else who's up against this problem, I found a solution that works for me. Of course, I'm still interested to see other interesting answers.

Here's what I did:

<MultiDataTrigger>
  <MultiDataTrigger.Conditions>
    <Condition Binding="{Binding
      RelativeSource={
        RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},
        Path=IsSelected}" Value="True"/>
    <Condition Binding="{Binding IsAvailable}" Value="False"/>
  </MultiDataTrigger.Conditions>
  <Setter TargetName="Name" Property="Foreground" Value="#F00"/>
</MultiDataTrigger>

There's nothing special about this being a multi trigger though. If you just wanted to style the selected item differently in your data template, you could use:

<DataTrigger Binding="{Binding 
  RelativeSource={
    RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},
    Path=IsSelected}" Value="True">
  <Setter TargetName="Name" Property="Foreground" Value="#888"/>
</DataTrigger>

Durrett

That is exactly what I was going to recommend. As far as I know it is the best solution. – Sovereignty

just hit this same problem. Excellent point dude, forgot about relative source binding. – Wayward

Answer 2

To use it with DataGridRow change binding mode to Self:

Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=... 

Udometer

Additionally, if you are trying to use Path=Selector.IsSelectionActive instead use Path=(Selector.IsSelectionActive) because it is an attached property. – Chavez