Search code examples
wpfbuttonhighlightselectedismouseover

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


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"/>

Solution

  • 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>