Changing a button color on hover in xaml

Question

I want to change a button's color on hover.

This is my xaml code.

<Window x:Class="OfflineIM.UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Vytru | Offline IM" Height="300" Width="550" ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Icon="/OfflineIM.UI;component/Images/368x368.ico">
    <Grid Name="MainGrid">
        <Grid Name="HeaderGrid" VerticalAlignment="Top" HorizontalAlignment="Center" Width="550" Height="130">

            <Image VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="250" Margin="5,10,10,10" Source="Images\offlineIM-logo.png" />
        </Grid>
        <Grid Name="ContentGrid" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="160" Width="550">
            <Grid Margin="20,10,20,80" Background="#5F68686A">
                <TextBlock Margin="170,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="companyNameTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
                <TextBlock Margin="5,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Company Name:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
                <TextBlock Margin="5,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Number of Users:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
                <TextBlock Margin="170,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="NumberOfUsersTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
                <TextBlock Margin="5,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Support and subscription:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
                <TextBlock Margin="170,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="SupportAndSubscriptionTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
            </Grid>
            <Button Height="50" HorizontalAlignment="Right" Name="aboutButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,20,15" Cursor="Hand" ToolTip="About" ClickMode="Release" Click="aboutButton_Click">
                <Button.Background>
                    <ImageBrush ImageSource="/OfflineIM.UI;component/Images/About.png" />
                </Button.Background>
            </Button>

            <Button Height="50" HorizontalAlignment="Right" Name="updateLicenseButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,75,15" Cursor="Hand" ToolTip="Update License" ClickMode="Release" Click="updateLicenseButton_Click">
                <Button.Background>
                    <ImageBrush ImageSource="/OfflineIM.UI;component/Images/UpdateLicense.png" />
                </Button.Background>
            </Button>
            <Button Height="50" HorizontalAlignment="Left" Name="StartButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="20,0,10,15" Cursor="Hand" ToolTip="Start Service" ClickMode="Release" Click="StartButton_Click">
                <Button.Background>
                    <ImageBrush ImageSource="/OfflineIM.UI;component/Images/Start.png" />
                </Button.Background>
            </Button>
            <Button Height="50" HorizontalAlignment="Left" Name="StopButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="75,0,10,15" Cursor="Hand" ToolTip="Stop Service" ClickMode="Release" Click="StopButton_Click">
                <Button.Background>
                    <ImageBrush ImageSource="/OfflineIM.UI;component/Images/Stop.png" />
                </Button.Background>
            </Button>
            <TextBlock Margin="135,5,20,14" VerticalAlignment="Bottom" HorizontalAlignment="Left" Text="" Name="ErrorTextBlock" Foreground="#FF58595B" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
        </Grid>
    </Grid>
</Window>

Answer 1

You can try with this code

1 Style based on triggers

<Style x:Key="myStyle" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver"
                  Value="True">
            <Setter Property="Background"
                   Value="{StaticResource mouseOverColor}" />
          </Trigger>
        </ControlTemplate.Triggers>
        <ContentPresenter />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>  

2 Code with Ressource and Control

<Window x:Class="MouseOverTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300">
  <Window.Resources>
    <SolidColorBrush x:Key="mouseOverColor"
                    Color="Red" />
  </Window.Resources>
  <Grid>
    <Button Content="Click"></Button> 
  </Grid>
</Window>