How to remove highlight on button if IsMouseHover is true in wpf

1.6k views Asked by At

I am developing a WPF project. I want to remove highlight (it is like blue in picture) on button if isMouseHover of Button is true. And I am not sure it is called highlight. Maybe it is probably effect, focus etc.. I added BorderBrush is transparent but it didn't work. The code is as follows:

<Image x:Key="LoginImg" Source="..\Images\Login\oturumac.png"
       Stretch="Fill"/>
<Image x:Key="LoginImg_RollOver" Source="..\Images\Login\oturumac_rollover.png"
       Stretch="Fill"/>

<Style  x:Key="LoginButtonStyle" TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Content" Value="{DynamicResource LoginImg_RollOver}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Content" Value="{DynamicResource LoginImg}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Picture is as follows. First picture when IsMouseOver is true:

enter image description here

How can I solve?

Button code is as follows:

 <Button Background="Transparent" BorderBrush="Transparent" Style="{DynamicResource LoginButtonStyle}" Click="btnLogin_Click" HorizontalAlignment="Center"  VerticalAlignment="Top" Width="180" Grid.Column="1" Grid.Row="4" x:Name="btnLogin" TabIndex="2"/>
1

There are 1 answers

0
Sheridan On BEST ANSWER

You'll need to provide a new ControlTemplate for the Button to get rid of the default look and feel. You can just replace the default Button ControlTemplate with a plain Image control and replace your Style Triggers with ControlTemplate Triggers. Try this:

<Button>
    <Button.Template>
        <ControlTemplate>
            <Image Name="Image" Stretch="None" 
Source="pack://application:,,,/AppName;component/Images/Login/oturumac.png" />
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Image" Property="Source" Value="
pack://application:,,,/AppName;component/Images/Login/oturumac_rollover.png" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>