CODEWITHSUNDEEP
c#wpfbindingmahapps.metro
Cristian M
Cristian M

Reputation: 725

Why do multiple DataTriggers on same control not work?

I want to create an image button with different highlighting effects on IsMouseOver and on IsPressed events. The code I'm using:

<Button Style="{StaticResource AccentedSquareButtonStyle}" x:Name="button" Background="Transparent" BorderThickness="0" Foreground="Transparent" Grid.Column="1" HorizontalAlignment="Left" Margin="142,-2,0,0" VerticalAlignment="Top" Width="75">
            <Grid Background="Transparent">
                <ContentControl>
                    <ContentControl.Style>
                        <Style TargetType="{x:Type ContentControl}">
                            <Setter Property="Content" Value="{StaticResource printIcon}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsPressed}" Value="True" >
                                    <Setter Property="Content" Value="{StaticResource printIconClicked}"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True" >
                                    <Setter Property="Content" Value="{StaticResource printIconHighlighted}"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ContentControl.Style>
                </ContentControl>
            </Grid>
        </Button>

The code works only if I use the DataTriggers separately, but in this form only the MouseOver highlighting effect is used. I'm using MahApps framework. What am I doing wrong?

Upvotes: 0

Views: 425

Answers (2)

d.moncada
d.moncada

Reputation: 17392

As you have found out, this has to do with the order in which your Triggers have been defined. Since you're binding to two different paths (both in which are related to the mouse), the order that they are defined is important as it will determine which one is triggered first.

When you click a button, the order of events are:

  1. Mouse hovers over
  2. Button is pressed

So, what happens with your current trigger:

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsPressed}" Value="True" >
    <Setter Property="Content" Value="{StaticResource printIconClicked}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True" >
    <Setter Property="Content" Value="{StaticResource printIconHighlighted}"/>
</DataTrigger>

The mouse hover is the only one that actuality is doing the setting because your mouse pointer is "over" the button while it's pressed. This implementation should work though if you press the button then "drag away" while still holding down left-click. This is not ideal though.

To fix, just swap the order if the data-triggers (since order does matter)

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True" >
    <Setter Property="Content" Value="{StaticResource printIconHighlighted}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsPressed}" Value="True" >
    <Setter Property="Content" Value="{StaticResource printIconClicked}"/>
</DataTrigger>

Upvotes: 2

Hasan Hasanov
Hasan Hasanov

Reputation: 1159

Please see Wpf tutorials blog for detailed explanation about multi triggers. Here is the link: http://www.wpf-tutorial.com/styles/multi-triggers-multitrigger-multidatatrigger/

Let me know if this answers your question.

Upvotes: -1

Related Questions