How to fix ToggleButton hover detection?

Question

When I hover over the button, it will turn aqua, however it does not switch back to black once removing the cursor.

I am new to C# and I'm trying to get a grasp of the basic application functions. They seem very different from Java's Swing and JavaFX.

private void Mouse_Move(object sender, MouseEventArgs e)
        {
            var element = (UIElement) e.Source;

            var c = Grid.GetColumn(element);
            var r = Grid.GetRow(element);
            if (c == 0 && r == 0)
            {
                MenuButton.Fill = Brushes.Aqua;
            }
            else
            {
                MenuButton.Fill = Brushes.Black;
            }
        }

<Grid ShowGridLines="False" Background="#282828">    
        <Grid.ColumnDefinitions>    
            <ColumnDefinition Width="100"></ColumnDefinition>    
            <ColumnDefinition></ColumnDefinition>    
        </Grid.ColumnDefinitions>    
        <Grid.RowDefinitions>    
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition> 
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="68"></RowDefinition> 
        </Grid.RowDefinitions>

        <Rectangle Grid.Column="0" Grid.RowSpan="1000">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#1c1c1c" Offset="0"/>
                    <GradientStop Color="#1c1c1c" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle x:Name="MenuButton" MouseMove="Mouse_Move" Grid.Column="0" Grid.Row="0">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#1c1c1c" Offset="0"/>
                    <GradientStop Color="#1c1c1c" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <ToggleButton Click="Button_Click" Grid.Row="0" Grid.Column="0" Height="32" Width="32" Checked = "HandleCheck" Unchecked = "HandleUnchecked">
            <ToggleButton.Template>
                <ControlTemplate>
                    <Image Width="32" Height="32" Source="Resources/menu.png"></Image>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>
    </Grid>  

Answer 1

Use MouseLeave and MouseEnter instead of MouseMove

XAML

<Rectangle x:Name="MenuButton" MouseEnter="Mouse_Enter" Grid.Column="0" Grid.Row="0" MouseLeave="Mouse_Leave">

C#

private void Mouse_Enter(object sender, MouseEventArgs e)
{
    var element = (UIElement) e.Source;

    var c = Grid.GetColumn(element);
    var r = Grid.GetRow(element);
    if (c == 0 && r == 0)
    {
        MenuButton.Fill = Brushes.Aqua;
        //Change fill to Aqua when the cursor enters
    }
}

private void Mouse_Leave(object sender, MouseEventArgs e)
{
    var element = (UIElement) e.Source;

    var c = Grid.GetColumn(element);
    var r = Grid.GetRow(element);
    if (c == 0 && r == 0)
    {
        MenuButton.Fill = Brushes.Black;
        //Change fill to Black when the cursor leaves
    }
}