Toggle button with conditional mouse over effect

Question

I have a toggle button like this:

<ToggleButton Name="pptSlide_ON_OFF"
              IsChecked="{Binding DataContext.SlideExcluded, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"
              Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="1" Grid.RowSpan="1"
              Background="Transparent"
              Command="{Binding DataContext.SlideOnOffCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}">
    <ToggleButton.Template>
        <ControlTemplate>
            <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
                <Image x:Name ="pptSlide_ON_OFF_image">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SlideExcluded}" Value="true">
                                    <Setter Property="Source" Value="/Import Icons Eye OFF.png"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SlideExcluded}" Value="false">
                                    <Setter Property="Source" Value="/Import Icons Eye.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/MouseOver.png" />
                </Trigger>

                <Trigger Property="ButtonBase.IsPressed"  Value ="True">
                    <Setter TargetName="bg" Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

I would like to have a conditional 'IsMouseOver' trigger if possible, such that when button is not toggled, on mouse over, base image changes to some other image (MouseOver.png) like it is now, and then when it is toggled, to change to a different image (MouseOver2.png).

Answer 1

    <Style TargetType="{x:Type ToggleButton}" x:Key="TButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Height" Value="35" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Name="OuterBorder" BorderThickness="0,1,1,0" >
                        <Border Name="InnerBorder" BorderThickness="2">
                            <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonSingleTrigger}" />
                            <!--<Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />-->
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="false">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonDefaultState}" />
                            <!--<Setter Property="Style" TargetName="OuterBorder" Value="{StaticResource ButtonOuterBHover}" />-->
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonSingleTrigger}" />

                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="true" />
                                <Condition Property="IsChecked" Value="true" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Style" TargetName="InnerBorder" Value="{StaticResource ButtonMultiTrigger}" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

You can use MultiTrigger. I stripped some of your implementation specifics from the example, but the principle should be clear:

<ToggleButton.Template>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
            <Image x:Name ="pptSlide_ON_OFF_image" Source="/Image1.png">
            </Image>
        </Grid>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsChecked" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image2.png"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="False"/>
                    <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image3.png"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="pptSlide_ON_OFF_image" Property="Source" Value="/Image4.png"/>
            </MultiTrigger>


            <Trigger Property="ButtonBase.IsPressed"  Value ="True">
                <Setter TargetName="bg" Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ToggleButton.Template>