CODEWITHSUNDEEP
c#wpfxaml
nikhil
nikhil

Reputation: 1748

Trigger property IsMouseOver not working on ToggleButton

I have a toggle button with the following style as follows. Thing is when I click on the button the image changes fine. Only when I hover over it dosent seem to change the image. Please help what wrong am I doing. I also tried MouseEnter from code behing but still it dosent work.

 <ToggleButton Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left"  Panel.ZIndex="140" Height="41" Width="35" FontSize="9" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <Border BorderThickness="0">
                                                    <Image Source="/AltusClient;component/Images/EasyLocate_open.png" Height="41" Width="35"></Image>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_hover.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_open.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>

                                        <Trigger Property="IsChecked" Value="False">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Border BorderThickness="0">
                                                            <Image Source="/AltusClient;component/Images/EasyLocate_closed.png" Height="41" Width="35"></Image>
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                            <!--<ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <ControlTemplate.Triggers>

                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Content">
                                                <Setter.Value>
                                                    <Border BorderThickness="0">
                                                        <Image Source="/AltusClient;component/Images/EasyLocate_hover.png" Height="41" Width="35"></Image>
                                                    </Border>
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </ToggleButton.Template>-->
                        </ToggleButton>

Upvotes: 0

Views: 1344

Answers (1)

AnjumSKhan
AnjumSKhan

Reputation: 9827

IsMouseOver works perfectly well, there must be some other issue with your Source Uri.

And this also works fine : <EventTrigger RoutedEvent="ToggleButton.MouseEnter">.

EDIT #1

After reading your comments, I took a closer look, and found the issue. IsChecked property is taking precedence, and hence is overriding any changes done by IsMouseOver.

You have to provide MultiTrigger taking care of following 4 conditions : 

1. IsChecked : True, IsMouseOver : True

2. IsChecked : True, IsMouseOver : False

3. IsChecked : False, IsMouseOver : True

4. IsChecked : False, IsMouseOver : False

Eg; 

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsChecked" Value="False"/>
        <Condition Property="IsMouseOver" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderThickness="0">
                    <Image Source="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" Height="41" Width="35"></Image>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</MultiTrigger>

Remove , the template which you provided outside <Style.Triggers>. Everything will now remain within Style.Triggers and MultiTrigger.

I have checked everything, it works fine.

Upvotes: 1

Related Questions