How to remove the Glow of Button on the mouse hover in WPF

Question

I use a simple button in WPF. I put the image for the button on the background. My problem is that when I move the mouse over the button, it gets the default glow and overrides the image specified as the background.

<Button Grid.Column="3" Name="Play" BorderBrush="Transparent" Focusable="False" Width="45" Height="45" Click="Play_Click" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,6,10,6"> <Button.Background > <ImageBrush ImageSource="images/play.png" /> </Button.Background> <Button.Foreground> <ImageBrush ImageSource="images/play.png" /> </Button.Foreground> </Button> 

Please help me.

Answer 1

It is defined in Button ControlTemplate . You must create your own.

for example like that.

 <Style x:Key="MyButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Background="{TemplateBinding Background}"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Then you can apply this style to your button. and set Background to your image.

 <Button Style="{StaticResource MyButtonStyle}" Grid.Column="3" Name="Play" BorderBrush="Transparent" Focusable="False" Width="45" Height="45" Click="Play_Click" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,6,10,6"> <Button.Background > <ImageBrush ImageSource="images/play.png" /> </Button.Background> </Button>