We Keep Coding

How to change the background color of a button in wpf? [duplicate]

I have a button on my page with this XAML:
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Width="50" Height="50" HorizontalContentAlignment="Left"
BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
But when I put mouse over my button, button's background changes to default windows gray background.What's The Problem?
This is the button picture before and after mouseover:
Before:
After:

To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
EDIT: It's a few years late, but you are actually able to set the border brush inside of the border that is in there. Idk if that was pointed out but it doesn't seem like it was...

All of the answers so far involve completely replacing the default button behavior with something else. However, IMHO it is useful and important to understand that it's possible to change just the part you care about, by editing the existing, default template for a XAML element.
In the case of dealing with the hover effect on a WPF button, the change in appearance in a WPF Button element is caused by a Trigger in the default style for the Button, which is based on the IsMouseOver property and sets the Background and BorderBrush properties of the top-level Border element in the control template. The Button element's background is underneath the Border element's background, so changing the Button.Background property doesn't prevent the hover effect from being seen.
With some effort, you could override this behavior with your own setter, but because the element you need to affect is in the template and not directly accessible in your own XAML, that approach would be difficult and IMHO overly complex.
Another option would be to make use the graphic as the Content for the Button rather than the Background. If you need additional content over the graphic, you can combine them with a Grid as the top-level object in the content.
However, if you literally just want to disable the hover effect entirely (rather than just hiding it), you can use the Visual Studio XAML Designer:
While editing your XAML, select the "Design" tab.
In the "Design" tab, find the button for which you want to disable the effect.
Right-click that button, and choose "Edit Template/Edit a Copy...". Select in the prompt you get where you want the new template resource to be placed. This will appear to do nothing, but in fact the Designer will have added new resources where you told it, and changed your button element to reference the style that uses those resources as the button template.
Now, you can go edit that style. The easiest thing is to delete or comment-out (e.g. Ctrl+E, C) the <Trigger Property="IsMouseOver" Value="true">...</Trigger> element. Of course, you can make any change to the template you want at that point.
When you're done, the button style will look something like this:
<p:Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</p:Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<!--<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>-->
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</p:Style>
(Note: you can omit the p: XML namespace qualifications in the actual code…I provide them here only because the Stack Overflow XML code formatter gets confused by <Style/> elements that don't have a fully-qualified name with XML namespace.)
If you want to apply the same style to other buttons, you can just right-click them and choose "Edit Template/Apply Resource" and select the style you just added for the first button. You can even make that style the default style for all buttons, using the normal techniques for applying a default style to elements in XAML.

This worked well for me.
Button Style
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="Transparent">
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Button
<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"
Command="{Binding CloseWindow}">
<Button.Content >
<Grid Margin="0 0 0 0">
<Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" />
</Grid>
</Button.Content>
</Button>
Notes
The button displays a little blue cross, much like the one used to close a window.
By setting the background of the grid to "Transparent", it adds a hittest, which means that if the mouse is anywhere over the button, then it will work. Omit this tag, and the button will only light up if the mouse is over one of the vector lines in the icon (this is not very usable).

Just want to share my button style from my ResourceDictionary that i've been using.
You can freely change the onHover background at the style triggers.
"ColorAnimation To = *your desired BG(i.e #FFCEF7A0)". The button BG will also automatically revert to its original BG after the mouseOver state.You can even set how fast the transition.
Resource Dictionary
<Style x:Key="Flat_Button" TargetType="{x:Type Button}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FontFamily" Value="Arial Narrow"/>
<Setter Property="FontSize" Value="12px"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Opacity="1" Color="White"/>
</Setter.Value>
</Setter>
<Setter Property="Background" >
<Setter.Value>
<SolidColorBrush Opacity="1" Color="#28C2FF" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
SnapsToDevicePixels="True"
BorderThickness="1"
Padding="4,2"
BorderBrush="Gray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#D2F898"
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
all you have to do is call the style.
Example Implementation
<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto">
<StackPanel>
<TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/>
</StackPanel>
</Button>

A slight more difficult answer that uses ControlTemplate and has an animation effect
(adapted from https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-control)
In your resource dictionary define a control template for your button like this one:
<ControlTemplate TargetType="Button" x:Key="testButtonTemplate2">
<Border Name="RootElement">
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>
<Grid Margin="4" >
<Grid.Background>
<SolidColorBrush x:Name="ButtonBackground" Color="Aquamarine"/>
</Grid.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
in your XAML you can use the template above for your button as below:
Define your button
<Button Template="{StaticResource testButtonTemplate2}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White">My button</Button>
Hope it helps

For change button style
1st: define resource styles
<Window.Resources>
<Style x:Key="OvergroundIn" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FF16832F">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FF06731F">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="OvergroundOut" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FFF35E5E">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#FFE34E4E">
<ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
2nd define button code
<Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="2" CornerRadius="3" Margin="2,2,2,2" >
<Button Name="btnFichar" BorderThickness="0" Click="BtnFichar_Click">
<Button.Content>
<Grid>
<TextBlock Margin="0,7,0,7" TextAlignment="Center">Fichar</TextBlock>
</Grid>
</Button.Content>
</Button>
</Border>
3th code behind
public void ShowStatus()
{
switch (((MainDto)this.DataContext).State)
{
case State.IN:
this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(243, 94, 94));
this.btnFichar.Style = Resources["OvergroundIn"] as Style;
this.btnFichar.Content = "Fichar Salida";
break;
case State.OUT:
this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(76, 106, 83));
this.btnFichar.Style = Resources["OvergroundOut"] as Style;
this.btnFichar.Content = "Fichar Entrada";
break;
}
}

Change BorderBrush when button IsPressed

I'm creating a WPF application for a touchscreen.
There should be a button on the screen with an Icon (image).
The code below shows how the button should look like.
So far so good..
What I would like to achieve is that when you press the button, the first BorderBrush color should change from “#0070b8” to “#00395c” and the second BorderBrush color should change from “#e3e3e3” to “#727272”.
Could someone please help me how to achieve this?
<Button Width="64" Height="64" Grid.Row="1" Margin="1,1" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="Resources\Home_Icon_2.bmp" Width="54" Height="54"></Image>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border CornerRadius="6" Background="{TemplateBinding Background}" Name="button" Width="64">
<Grid>
<Border BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="button" Property="Background" Value="#e3e3e3" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#c6c3c6" />
</Style>
</Button.Style>
</Button>

You could always set the brush color in your click event:
private void btnYourButton_Click(object sender, RoutedEventArgs e)
{
btnYourButton.BorderBrush = (Brush)new BrushConverter().ConvertFrom("#00395c");
}

This would be one solution. Note that we've assigned our brushes to separate resources so that we don't have magic numbers in our style. This is ideal for when you need to use the same colour scheme across multiple controls, and saves a lot of time when you want to change said colour scheme.
<Style x:Key="AdtakrButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="ButtonBorder" CornerRadius="5" BorderThickness="{DynamicResource AdtakrButtonBorderThickness}" BorderBrush="{DynamicResource AdtakrBlack}" Background="{DynamicResource AdtakrWhite}" Margin="{DynamicResource ButtonMargin}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,0" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource AdtakrGrey2}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
<Setter Property="Background" Value="{DynamicResource AdtakrGrey1}" TargetName="ButtonBorder"/>
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
<Setter Property="BorderBrush" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="{DynamicResource AdtakrDefFontSize}"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="Height" Value="40"/>
<Setter Property="ToolTipService.ShowOnDisabled" Value="True"/>
</Style>
If you need to have it change between more than 1 colour, then your best bet is to have a command on your databound VM and the command changes a colour property that the button also binds to. Alternatively, if it's supposed to reflect 3 states, using a toggle button with the three state option is probably your better bet, as then you can set triggers against the IsChecked property of the button.

Found the solution!
By giving the borders a name and then they are accessible in the Trigger Property
<Button Width="64" Height="64" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="Images\Home_Icon_2.png" Width="54" Height="54"></Image>
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="button" CornerRadius="6" Background="{TemplateBinding Background}" Width="64">
<Grid>
<Border x:Name="border1" BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border x:Name="border2" BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="1" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="button" Property="Background" Value="#e3e3e3" />
<Setter TargetName="border1" Property="BorderBrush" Value="#00395c" />
<Setter TargetName="border2" Property="BorderBrush" Value="#727272" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#c6c3c6" />
</Style>
</Button.Style>
</Button>

How do I get a rectangle within my button to change colour on hover?

How do I get a rectactangle inside of my button to flip it's colour
on hover, I seem to need the 'fill' property which isn't inside of a
button.
Here is what I want:
See the blue rectangle under at the bottom of the button on hover I need that to
change from the button colour to the blue colour.
I have tried this:
<Style TargetType="{x:Type Button}" x:Key="MenuButton">
<Setter Property="Background" Value="#d8d8d8" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="anything" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<!-- Inner Rectangle with rounded corners. -->
<Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
<!-- Present Content (text) of the button. -->
<DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
<ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
</DockPanel>
<Rectangle x:Name="test" Fill="{TemplateBinding anything }" Height="4" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#d2d2d2"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="anything" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
Obviously that would have worked if fill was a property in button, am I thinking of this totally wrong?
Thanks All!

You will have to use ControlTemplate.Triggers and then you can access your rectangle with TargetName inside your setter.
Like this:
<Style TargetType="{x:Type Button}" x:Key="MenuButton">
<Setter Property="Background" Value="#d8d8d8" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<!-- Inner Rectangle with rounded corners. -->
<Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
<!-- Present Content (text) of the button. -->
<DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
<ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
</DockPanel>
<Rectangle x:Name="test" Fill="Black" Height="4" VerticalAlignment="Bottom"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#d2d2d2"/>
<Setter Property="Foreground" Value="White"/>
<Setter TargetName="test" Property="Fill" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Change particular button Background color on Mouse over in xaml wpf

I am struggling with the issue for last three days.
I have to change particular Button background color on mouse over and Button Content should be delete, But i got issue that all button changed if i am hovering of button.
I put my design In resource dictionary
Below is my design code
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>`<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BaseShape" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonHoverBorderBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonHighlight" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState> </VisualStateGroup></VisualStateManager.VisualStateGroups>'
<Border x:Name="BaseShape" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="ButtonHighlight" Margin="1" RadiusX="9" RadiusY="9" Stroke="{StaticResource ButtonHoverHighlightBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" Opacity="0" />
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle x:Name="FocusedVisualElement" Stroke="{StaticResource ButtonFocusedBorderBrush}" StrokeThickness="1" RadiusX="10" RadiusY="10" Opacity="0" />
<Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource DisabledBackgroundBrush}" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />
<Button Content="delete" Name="xyz" Width="70"Margin="0,65,59,4" HorizontalAlignment="Right">
</Button>`
and
Xaml
File with design is
and i need fix only design side not in code behind

I'm assuming by "Button background color on mouse over and Button Content should be delete" you mean that you want to change the colour and hide the content while your mouse is over the button. If so, why don't you do something like this
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="SkyBlue"/>
<Setter Property="Foreground" Value="SkyBlue"/>
</Trigger>
</Style.Triggers>
</Style>
While it doesn't delete the content it sets the foreground and background to the same colour so it is hidden from the user.
Edited to address your comments
You seem to be trying to use a DataTrigger; as this answer suggests Triggers are ideal for making changes on things like OnMouseOver and DataTriggers are ideal for making changes on data changes. So unless I'm missing something, you should be using a Trigger not a DataTrigger.
An obvious solution to your style-variation problem is to create a default style with most of your styling in and then a second style that overrides the changing elements. In this case your second style would give it the "hide my text on mouse over" behaviour.
Your default style could be something like this
<Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
And your second style could be something like this
<Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Then you'd use them like this
<Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>
In the ButtonDefaultStyle cases the white text on a blue background is changed to blue text on a white background on mouse over. In the ButtonHideTextOnMouseOverStyle case the white text on a blue background is changed to white text on a white background on mouse over.
The full example is here
<Window x:Class="Button_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Button_Test"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ButtonHideTextOnMouseOverStyle" BasedOn="{StaticResource ButtonDefaultStyle}" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBlock Text="Buttons"/>
<Button Content="First Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Second Button" Style="{StaticResource ButtonDefaultStyle}"/>
<Button Content="Delete" Style="{StaticResource ButtonHideTextOnMouseOverStyle}"/>
</StackPanel>
</Window>

Background does not change of button C# WPF

I am trying to change style on mouseover.
My Code is:
<Button Name="register" Content="Register" Margin="15,410,20,0" Padding="6" FontSize="18" VerticalAlignment="Top" Background="#FF0090D6" BorderBrush="#FF0090D6" Foreground="White">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
But the Background is the same default thing. But when i change property to BorderThickness then it works.
What am i doing wrong?

In the default template of button, there is trigger in ControlTemplate which set Background of button to #FFBEE6FD and since control template triggers have higher precedence compared to Style triggers that's why your trigger never works.
For that to achieve you have to override default template of button and remove that trigger from it so that your style trigger gets applied.
Here is the default template with that specific trigger commented out. In case you want to override BorderBrush as well, get rid of it as well from the template.
<ControlTemplate x:Key="DefaultTemplateOfButton" TargetType="ButtonBase">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="border"
SnapsToDevicePixels="True">
<ContentPresenter RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
Name="contentPresenter"
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
Focusable="False" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<!--<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFBEE6FD</SolidColorBrush>
</Setter.Value>
</Setter>-->
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF3C7FB1</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFC4E5F6</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF2C628B</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFBCDDEE</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF245A83</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="Panel.Background" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFF4F4F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FFADB2B5</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter">
<Setter.Value>
<SolidColorBrush>#FF838383</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
How to set the control template to button?
Define the template somewhere under resource section of parent panel or UserControl and can be applied via StaticResource:
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="MyTemplate"
TargetType="ButtonBase">
.......
</Grid.Resources>
<Button Name="register" Template="{StaticResource MyTemplate}"...>
</Grid>

Edit: As Rohit pointed out in the comments,
This won't work on Windows 8 because of some changes in PresentationFramework where default template of button is declared. ... In Windows 7 default template of button doesn't have that ControlTemplate trigger. That's why your posted code works fine on Windows7 but it won't work on Windows 8 and higher.
Rohit's answer about DependencyProperty Precedence being the cause is correct, but there's a much simpler way of fixing it than overwriting the Button's Template.
If you review the DependencyProperty Precedence List, you'll notice that properties set in the <Tag> have a higher precedence than Triggered properties, which is why your button will always use the background you have defined in your <Button> tag.
If you move the Background property to the <Style> itself, then triggered property will work since Triggered properties take precedence over properties defined in a Style.
<Button Name="register" Content="Register" ...>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#FF0090D6" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

You have to override the default template for achieve this.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Hope this helps.

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkGoldenrod"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Above code perfectly works,
Even with this user can change the background color of button in runtime/codebehind