background_color Transparency Fixes

testbed/tests/widgets/properties.py

@@ -381,8 +381,6 @@ async def test_background_color(widget, probe):
     for color in COLORS:
         widget.style.background_color = color
         await probe.redraw("Widget background color should be %s" % color)
-        if not getattr(probe, "background_supports_alpha", True):
-            color.a = 1
         assert_color(probe.background_color, color)
 
 
@@ -405,12 +403,11 @@ async def test_background_color_reset(widget, probe):
 async def test_background_color_transparent(widget, probe):
     "Background transparency is supported"
     original = probe.background_color
-    supports_alpha = getattr(probe, "background_supports_alpha", True)
 
     # Change the background color to transparent
     widget.style.background_color = TRANSPARENT
     await probe.redraw("Widget background color should be TRANSPARENT")
-    assert_color(probe.background_color, TRANSPARENT if supports_alpha else original)
+    assert_color(probe.background_color, TRANSPARENT)
 
     # Restore original background color
     del widget.style.background_color

winforms/src/toga_winforms/colors.py

@@ -1,16 +1,64 @@
 from System.Drawing import Color
-from travertino.colors import TRANSPARENT
+from travertino.colors import TRANSPARENT, rgb, rgba
 
 CACHE = {TRANSPARENT: Color.Transparent}
 
 
-def native_color(c):
+def native_color(toga_color):
     try:
-        color = CACHE[c]
+        color = CACHE[toga_color]
     except KeyError:
         color = Color.FromArgb(
-            int(c.rgba.a * 255), int(c.rgba.r), int(c.rgba.g), int(c.rgba.b)
+            int(toga_color.rgba.a * 255),
+            int(toga_color.rgba.r),
+            int(toga_color.rgba.g),
+            int(toga_color.rgba.b),
         )
-        CACHE[c] = color
+        CACHE[toga_color] = color
 
     return color
+
+
+def toga_color(native_color):
+    return rgba(native_color.R, native_color.G, native_color.B, native_color.A / 255)
+
+
+def alpha_blending_over_operation(child_color, parent_color):
+    # The blending operation I have implemented here is the "over" operation and
+    # replicates CSS's rgba mechanism. For the formula used here, see:
+    # https://en.wikipedia.org/wiki/Alpha_compositing#Description
+
+    blended_alpha = child_color.a + ((1 - child_color.a) * parent_color.a)
+
+    # Check if the blended alpha is zero, indicating no blending
+    if blended_alpha == 0:
+        # If both child and parent alphas are 0, no blending occurs, so return child color.
+        return child_color
+
+    blended_color = rgb(
+        # Red Component
+        (
+            (
+                (child_color.r * child_color.a)
+                + (parent_color.r * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+        # Green Component
+        (
+            (
+                (child_color.g * child_color.a)
+                + (parent_color.g * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+        # Blue Component
+        (
+            (
+                (child_color.b * child_color.a)
+                + (parent_color.b * parent_color.a * (1 - child_color.a))
+            )
+            / blended_alpha
+        ),
+    )
+    return blended_color

winforms/src/toga_winforms/widgets/base.py

@@ -2,15 +2,15 @@
 from decimal import ROUND_HALF_EVEN, Decimal
 
 from System.Drawing import (
-    Color,
     Point,
     Size,
     SystemColors,
 )
 from travertino.size import at_least
 
-from toga.colors import TRANSPARENT
-from toga_winforms.colors import native_color
+import toga
+from toga.colors import TRANSPARENT, rgba
+from toga_winforms.colors import alpha_blending_over_operation, native_color, toga_color
 
 
 class Scalable:
@@ -37,10 +37,6 @@ def scale_round(self, value, rounding):
 
 
 class Widget(ABC, Scalable):
-    # In some widgets, attempting to set a background color with any alpha value other
-    # than 1 raises "System.ArgumentException: Control does not support transparent
-    # background colors". Those widgets should set this attribute to False.
-    _background_supports_alpha = True
 
     def __init__(self, interface):
         self.interface = interface
@@ -119,17 +115,27 @@ def set_color(self, color):
             self.native.ForeColor = native_color(color)
 
     def set_background_color(self, color):
-        if not hasattr(self, "_default_background"):
-            self._default_background = self.native.BackColor
-        if color is None or (
-            color == TRANSPARENT and not self._background_supports_alpha
-        ):
-            self.native.BackColor = self._default_background
+        if color is None or (color == TRANSPARENT and (not self.interface.parent)):
+            self.native.BackColor = SystemColors.Control
         else:
-            win_color = native_color(color)
-            if not self._background_supports_alpha:
-                win_color = Color.FromArgb(255, win_color.R, win_color.G, win_color.B)
-            self.native.BackColor = win_color
+            if self.interface.parent:
+                parent_color = toga_color(
+                    self.interface.parent._impl.native.BackColor
+                ).rgba
+                if color is TRANSPARENT:
+                    requested_color = rgba(0, 0, 0, 0)
+                else:
+                    requested_color = color.rgba
+                blended_color = alpha_blending_over_operation(
+                    requested_color, parent_color
+                )
+                self.native.BackColor = native_color(blended_color)
+            else:
+                self.native.BackColor = native_color(color)
+
+        if isinstance(self.interface, toga.Box):
+            for child in self.interface.children:
+                child._impl.set_background_color(child.style.background_color)
 
     # INTERFACE
 
@@ -151,8 +157,7 @@ def refresh(self):
         # doesn't actually support transparency. It just copies the parent's
         # BackColor to the widget. So, if a widget's parent changes then we need
         # to reapply background_color to copy the new parent's BackColor.
-        if self.interface.style.background_color in {None, TRANSPARENT}:
-            self.set_background_color(self.interface.style.background_color)
+        self.set_background_color(self.interface.style.background_color)
 
     def rehint(self):
         pass

winforms/src/toga_winforms/widgets/box.py

@@ -1,17 +1,8 @@
 import System.Windows.Forms as WinForms
 
-from toga.colors import TRANSPARENT
-
 from .base import Widget
 
 
 class Box(Widget):
     def create(self):
         self.native = WinForms.Panel()
-
-    def set_background_color(self, color):
-        if color in {None, TRANSPARENT}:
-            if self.interface.parent:
-                self.native.BackColor = self.interface.parent._impl.native.BackColor
-        else:
-            super().set_background_color(color)

winforms/src/toga_winforms/widgets/button.py

@@ -3,12 +3,13 @@
 import System.Windows.Forms as WinForms
 from travertino.size import at_least
 
+from toga.colors import TRANSPARENT
+
 from ..libs.wrapper import WeakrefCallable
 from .base import Widget
 
 
 class Button(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = WinForms.Button()
@@ -44,6 +45,12 @@ def set_icon(self, icon):
         else:
             self.native.Image = None
 
+    def set_background_color(self, color):
+        if color in {None, TRANSPARENT}:
+            super().set_background_color(None)
+        else:
+            super().set_background_color(color)
+
     def rehint(self):
         self.interface.intrinsic.width = self.scale_out(
             at_least(self.native.PreferredSize.Width), ROUND_UP

winforms/src/toga_winforms/widgets/dateinput.py

@@ -17,7 +17,6 @@ def native_date(py_date):
 
 
 class DateInput(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = WinForms.DateTimePicker()

winforms/src/toga_winforms/widgets/divider.py

@@ -1,7 +1,7 @@
 from decimal import ROUND_UP
 
 import System.Windows.Forms as WinForms
-from System.Drawing import Color
+from System.Drawing import SystemColors
 from travertino.size import at_least
 
 from .base import Widget
@@ -29,7 +29,7 @@ def set_direction(self, value):
     def set_background_color(self, color):
         if color is None:
             # Background color needs to be set or else divider will not be visible.
-            self.native.BackColor = Color.Gray
+            self.native.BackColor = SystemColors.ControlDark
         else:
             super().set_background_color(color)
 

winforms/src/toga_winforms/widgets/label.py

@@ -3,7 +3,6 @@
 import System.Windows.Forms as WinForms
 from travertino.size import at_least
 
-from toga.colors import TRANSPARENT
 from toga_winforms.libs.fonts import TextAlignment
 
 from .base import Widget
@@ -23,23 +22,6 @@ def get_text(self):
     def set_text(self, value):
         self.native.Text = value
 
-    def set_background_color(self, color):
-        if color in {None, TRANSPARENT}:
-            # Label though allows setting BackColor to Color.Transparent, but it doesn't
-            # actually work, the background color will be white when set to Color.Transparent
-            # Also tried:
-            # ```
-            #  label1.Parent = pictureBox1
-            #  label1.BackColor = Color.Transparent
-            # ```
-            # But it only works if the label is inside/above a PictureBox and not for other cases.
-            # So, the best bet for transparency is to make label background color same as the
-            # container inside which the widget is present.
-            if self.interface.parent:
-                self.native.BackColor = self.interface.parent._impl.native.BackColor
-        else:
-            super().set_background_color(color)
-
     def rehint(self):
         self.interface.intrinsic.width = self.scale_out(
             at_least(self.native.PreferredSize.Width), ROUND_UP

winforms/src/toga_winforms/widgets/numberinput.py

@@ -22,7 +22,6 @@ def native_decimal(value):
 
 
 class NumberInput(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = WinForms.NumericUpDown()

winforms/src/toga_winforms/widgets/progressbar.py

@@ -20,7 +20,6 @@
 
 
 class ProgressBar(Widget):
-    _background_supports_alpha = False
 
     TOGA_SCALE = 1000
 

winforms/src/toga_winforms/widgets/selection.py

@@ -21,7 +21,6 @@ def winforms_selected_index_changed(self, sender, event):
 
 
 class Selection(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = TogaComboBox(self)

winforms/src/toga_winforms/widgets/table.py

@@ -9,7 +9,6 @@
 
 
 class Table(Widget):
-    _background_supports_alpha = False
 
     # The following methods are overridden in DetailedList.
     @property

winforms/src/toga_winforms/widgets/textinput.py

@@ -12,7 +12,6 @@
 
 
 class TextInput(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = WinForms.TextBox()

winforms/src/toga_winforms/widgets/timeinput.py

@@ -19,7 +19,6 @@ def native_time(py_time):
 
 
 class TimeInput(Widget):
-    _background_supports_alpha = False
 
     def create(self):
         self.native = WinForms.DateTimePicker()

winforms/tests_backend/widgets/base.py

@@ -1,15 +1,16 @@
 import pytest
 from pytest import approx
 from System import EventArgs, Object
-from System.Drawing import Color, SystemColors
+from System.Drawing import SystemColors
 from System.Windows.Forms import MouseButtons, MouseEventArgs
 
 from toga.colors import TRANSPARENT
 from toga.style.pack import JUSTIFY, LEFT
+from toga_winforms.colors import alpha_blending_over_operation
 
 from ..fonts import FontMixin
 from ..probe import BaseProbe
-from .properties import toga_color
+from .properties import reverse_alpha_blending_over_operation, toga_color
 
 
 class SimpleProbe(BaseProbe, FontMixin):
@@ -56,10 +57,30 @@ def color(self):
 
     @property
     def background_color(self):
-        if self.native.BackColor == Color.Transparent:
+        if (
+            self.widget.style.background_color is None
+            and self.native.BackColor.ToArgb() == SystemColors.Control.ToArgb()
+        ):
+            return None
+
+        if self.widget.style.background_color is TRANSPARENT and (
+            self.native.BackColor.ToArgb()
+            == self.widget.parent._impl.native.BackColor.ToArgb()
+        ):
             return TRANSPARENT
         else:
-            return toga_color(self.native.BackColor)
+            parent_color = toga_color(self.widget.parent._impl.native.BackColor)
+            blended_color = alpha_blending_over_operation(
+                self.widget.style.background_color, parent_color
+            )
+            if blended_color == parent_color:
+                return self.widget.style.background_color
+            else:
+                return reverse_alpha_blending_over_operation(
+                    blended_color,
+                    parent_color,
+                    child_alpha=self.widget.style.background_color.rgba.a,
+                )
 
     @property
     def font(self):

winforms/tests_backend/widgets/box.py

@@ -1,17 +1,7 @@
 import System.Windows.Forms
 
-from toga.colors import TRANSPARENT
-
 from .base import SimpleProbe
-from .properties import toga_color
 
 
 class BoxProbe(SimpleProbe):
     native_class = System.Windows.Forms.Panel
-
-    @property
-    def background_color(self):
-        if self.native.BackColor == self.widget.parent._impl.native.BackColor:
-            return TRANSPARENT
-        else:
-            return toga_color(self.native.BackColor)