Why is the opacity of my ellipse changing automatically when I don't actually change it in the code?

Question

I have an Ellipse in my Windows Universal App and I want to change its fill color when the mouse enters and leaves that ellipse. All I want to do is change the color and nothing else. However the opacity automatically decreases whenever I enter my mouse. Can you please find out the problem in my code.

Thank you.

XAML

        <Ellipse x:Name="glamourEllipse" HorizontalAlignment="Left" Height="226" Margin="594,260,0,0" Stroke="#FFB43F3F" VerticalAlignment="Top" Width="226" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Tapped="glamour_Tapped">
            <Ellipse.Fill>
                <SolidColorBrush Color="#FFB43C3C"/>
            </Ellipse.Fill>
            <Ellipse.RenderTransform>
                <CompositeTransform Rotation="-90.254"/>
            </Ellipse.RenderTransform>
        </Ellipse>

C#

    SolidColorBrush hoverBrush = new SolidColorBrush();

    private void mouse_Enter(object sender, PointerRoutedEventArgs e)
    {

        hoverBrush.Color = Color.FromArgb(100, 140, 40, 40);
        hoverBrush.Opacity = 1;
        nsfwEllipse.Fill = hoverBrush;

    }

    private void mouse_Exit(object sender, PointerRoutedEventArgs e)
    {

        hoverBrush.Color = Color.FromArgb(100, 180, 60, 60);
        hoverBrush.Opacity = 1;
        nsfwEllipse.Fill = hoverBrush;
    }

Answer 1

The problem is likely that you are changing the transparency in the MouseEnter and MouseExit events:

<SolidColorBrush Color="#FFB43C3C"/>

This line sets the colour to 255 alpha, 180 red, 60 green and 60 blue . Your code on the other hand:

hoverBrush.Color = Color.FromArgb(100, 140, 40, 40);
hoverBrush.Color = Color.FromArgb(100, 180, 60, 60);

Both lines specify an alpha of 100 . Now, in our decimal system of mathematics this would be perfectly valid and mean 100% opacity, but in the 8-bit and 32-bit world of the computer, it's not. Basically, that code sets the alpha to 64 hex. (Change the FF in the XAML and you will see the transparency is the same.)

That overload of Color.FromArgb expects that 0 is transparent, and 255 is opaque.

https://msdn.microsoft.com/en-us/library/system.drawing.color.fromargb%28v=vs.110%29.aspx

Basically, change 100 to 255 in both of those Color.FromArgb lines and you're golden.

private void mouse_Enter(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(255, 140, 40, 40);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

private void mouse_Exit(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(255, 180, 60, 60);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

Or, remove that value altogether.

private void mouse_Enter(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(140, 40, 40);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

private void mouse_Exit(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(180, 60, 60);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

Both options have the same effect overall. The second one also guarantees you don't accidentally do it again, as the alpha will always be 255 with it.

Edit: Lastly, for completeness, you could use Hexadecimal in the code as well, which may be the better option as it's all the same that way:

private void mouse_Enter(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(0xFF, 0x8C, 0x28, 0x28);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

private void mouse_Exit(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(0xFF, 0xB4, 0x3C, 0x3C);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

Or:

private void mouse_Enter(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(0x8C, 0x28, 0x28);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}

private void mouse_Exit(object sender, PointerRoutedEventArgs e)
{
    hoverBrush.Color = Color.FromArgb(0xB4, 0x3C, 0x3C);
    hoverBrush.Opacity = 1;
    nsfwEllipse.Fill = hoverBrush;
}