Add missing Blend Modes and expose BlendMode on Image Control (#17903)

* Add missing Bitmap Blend Modes supported by Skia

* Expose Blend Mode on Image Control

* Fix image render options "push" not being disposed
Fix image blendMode change not triggering a re-render

* Add Image Blend Tests

* Remove Modulate Blend mode

* Add Composition Blend Modes Tests

---------

Co-authored-by: Benedikt Stebner <Gillibald@users.noreply.github.com>

src/Avalonia.Base/Media/Imaging/BitmapBlendingMode.cs

@@ -1,5 +1,6 @@
 namespace Avalonia.Media.Imaging
 {
+    // TODO12 split the enum into two: composite mode and blend mode. (And rename Blending to Blend at the same time).
     /// <summary>
     /// Controls the way the bitmaps are drawn together.
     /// </summary>
@@ -54,6 +55,66 @@ namespace Avalonia.Media.Imaging
         /// <summary>
         /// Display the sum of the source image and destination image.
         /// </summary>
-        Plus
+        Plus,
+        /// <summary>
+        /// Multiplies the complements of the backdrop and source color values, then complements the result.
+        /// </summary>
+        Screen,
+        /// <summary>
+        /// Multiplies or screens the colors, depending on the backdrop color value.
+        /// </summary>
+        Overlay,
+        /// <summary>
+        /// Selects the darker of the backdrop and source colors.
+        /// </summary>
+        Darken,
+        /// <summary>
+        /// Selects the lighter of the backdrop and source colors.
+        /// </summary>
+        Lighten,
+        /// <summary>
+        /// Darkens the backdrop color to reflect the source color.
+        /// </summary>
+        ColorDodge,
+        /// <summary>
+        /// Multiplies or screens the colors, depending on the source color value.
+        /// </summary>
+        ColorBurn,
+        /// <summary>
+        /// Darkens or lightens the colors, depending on the source color value.
+        /// </summary>
+        HardLight,
+        /// <summary>
+        /// Subtracts the darker of the two constituent colors from the lighter color.
+        /// </summary>
+        SoftLight,
+        /// <summary>
+        /// Produces an effect similar to that of the Difference mode but lower in contrast.
+        /// </summary>
+        Difference,
+        /// <summary>
+        /// The source color is multiplied by the destination color and replaces the destination
+        /// </summary>
+        Exclusion,
+        /// <summary>
+        /// Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
+        /// </summary>
+        Multiply,
+        /// <summary>
+        /// Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
+        /// </summary>
+        Hue,
+        /// <summary>
+        /// Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color.
+        /// </summary>
+        Saturation,
+        /// <summary>
+        /// Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color.
+        /// </summary>
+        Color,
+        /// <summary>
+        /// Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color.
+        /// </summary>
+        Luminosity
     }
 }

src/Avalonia.Controls/Image.cs

@@ -17,6 +17,12 @@ namespace Avalonia.Controls
         /// </summary>
         public static readonly StyledProperty<IImage?> SourceProperty =
             AvaloniaProperty.Register<Image, IImage?>(nameof(Source));
+        
+        /// <summary>
+        /// Defines the <see cref="BlendMode"/> property.
+        /// </summary>
+        public static readonly StyledProperty<BitmapBlendingMode> BlendModeProperty =
+            AvaloniaProperty.Register<Image, BitmapBlendingMode>(nameof(BlendMode));
 
         /// <summary>
         /// Defines the <see cref="Stretch"/> property.
@@ -34,7 +40,7 @@ namespace Avalonia.Controls
 
         static Image()
         {
-            AffectsRender<Image>(SourceProperty, StretchProperty, StretchDirectionProperty);
+            AffectsRender<Image>(SourceProperty, StretchProperty, StretchDirectionProperty, BlendModeProperty);
             AffectsMeasure<Image>(SourceProperty, StretchProperty, StretchDirectionProperty);
             AutomationProperties.ControlTypeOverrideProperty.OverrideDefaultValue<Image>(AutomationControlType.Image);
         }
@@ -49,6 +55,15 @@ namespace Avalonia.Controls
             set => SetValue(SourceProperty, value);
         }
 
+        /// <summary>
+        /// Gets or sets the blend mode for the image.
+        /// </summary>
+        public BitmapBlendingMode BlendMode
+        {
+            get => GetValue(BlendModeProperty);
+            set => SetValue(BlendModeProperty, value);
+        }
+
         /// <summary>
         /// Gets or sets a value controlling how the image will be stretched.
         /// </summary>
@@ -91,7 +106,10 @@ namespace Avalonia.Controls
                 Rect sourceRect = new Rect(sourceSize)
                     .CenterRect(new Rect(destRect.Size / scale));
 
-                context.DrawImage(source, sourceRect, destRect);
+                using (context.PushRenderOptions(RenderOptions with { BitmapBlendingMode = BlendMode }))
+                {
+                    context.DrawImage(source, sourceRect, destRect);
+                }
             }
         }
 

src/Skia/Avalonia.Skia/SkiaSharpExtensions.cs

@@ -29,36 +29,38 @@ namespace Avalonia.Skia
 
         public static SKBlendMode ToSKBlendMode(this BitmapBlendingMode blendingMode)
         {
-            switch (blendingMode)
+            return blendingMode switch
             {
-                case BitmapBlendingMode.Unspecified:
+                BitmapBlendingMode.Unspecified => SKBlendMode.SrcOver,
-                case BitmapBlendingMode.SourceOver:
+                BitmapBlendingMode.SourceOver => SKBlendMode.SrcOver,
-                    return SKBlendMode.SrcOver;
+                BitmapBlendingMode.Source => SKBlendMode.Src,
-                case BitmapBlendingMode.Source:
+                BitmapBlendingMode.SourceIn => SKBlendMode.SrcIn,
-                    return SKBlendMode.Src;
+                BitmapBlendingMode.SourceOut => SKBlendMode.SrcOut,
-                case BitmapBlendingMode.SourceIn:
+                BitmapBlendingMode.SourceAtop => SKBlendMode.SrcATop,
-                    return SKBlendMode.SrcIn;
+                BitmapBlendingMode.Destination => SKBlendMode.Dst,
-                case BitmapBlendingMode.SourceOut:
+                BitmapBlendingMode.DestinationIn => SKBlendMode.DstIn,
-                    return SKBlendMode.SrcOut;
+                BitmapBlendingMode.DestinationOut => SKBlendMode.DstOut,
-                case BitmapBlendingMode.SourceAtop:
+                BitmapBlendingMode.DestinationOver => SKBlendMode.DstOver,
-                    return SKBlendMode.SrcATop;
+                BitmapBlendingMode.DestinationAtop => SKBlendMode.DstATop,
-                case BitmapBlendingMode.Destination:
+                BitmapBlendingMode.Xor => SKBlendMode.Xor,
-                    return SKBlendMode.Dst;
+                BitmapBlendingMode.Plus => SKBlendMode.Plus,
-                case BitmapBlendingMode.DestinationIn:
+                BitmapBlendingMode.Screen => SKBlendMode.Screen,
-                    return SKBlendMode.DstIn;
+                BitmapBlendingMode.Overlay => SKBlendMode.Overlay,
-                case BitmapBlendingMode.DestinationOut:
+                BitmapBlendingMode.Darken => SKBlendMode.Darken,
-                    return SKBlendMode.DstOut;
+                BitmapBlendingMode.Lighten => SKBlendMode.Lighten,
-                case BitmapBlendingMode.DestinationOver:
+                BitmapBlendingMode.ColorDodge => SKBlendMode.ColorDodge,
-                    return SKBlendMode.DstOver;
+                BitmapBlendingMode.ColorBurn => SKBlendMode.ColorBurn,
-                case BitmapBlendingMode.DestinationAtop:
+                BitmapBlendingMode.HardLight => SKBlendMode.HardLight,
-                    return SKBlendMode.DstATop;
+                BitmapBlendingMode.SoftLight => SKBlendMode.SoftLight,
-                case BitmapBlendingMode.Xor:
+                BitmapBlendingMode.Difference => SKBlendMode.Difference,
-                    return SKBlendMode.Xor;
+                BitmapBlendingMode.Exclusion => SKBlendMode.Exclusion,
-                case BitmapBlendingMode.Plus:
+                BitmapBlendingMode.Multiply => SKBlendMode.Multiply,
-                    return SKBlendMode.Plus;
+                BitmapBlendingMode.Hue => SKBlendMode.Hue,
-                default:
+                BitmapBlendingMode.Saturation => SKBlendMode.Saturation,
-                    throw new ArgumentOutOfRangeException(nameof(blendingMode), blendingMode, null);
+                BitmapBlendingMode.Color => SKBlendMode.Color,
-            }
+                BitmapBlendingMode.Luminosity => SKBlendMode.Luminosity,
+                _ => throw new ArgumentOutOfRangeException(nameof(blendingMode), blendingMode, null)
+            };
         }
 
         public static SKPoint ToSKPoint(this Point p)

tests/Avalonia.RenderTests/Controls/ImageBlendTests.cs

@@ -0,0 +1,83 @@
+using System.IO;
+using System.Runtime.CompilerServices;
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Xunit;
+
+#if AVALONIA_SKIA
+namespace Avalonia.Skia.RenderTests
+#else
+namespace Avalonia.Direct2D1.RenderTests.Controls
+#endif
+{
+    public class ImageBlendTests : TestBase
+    {
+        private readonly Bitmap _bitmapBase;
+        private readonly Bitmap _bitmapOver;
+
+        public ImageBlendTests()
+            : base(@"Controls\Image\blend")
+        {
+            _bitmapBase = new Bitmap(Path.Combine(OutputPath, "Cat.jpg"));
+            _bitmapOver = new Bitmap(Path.Combine(OutputPath, "ColourShading - by Stib.png"));
+        }
+
+        [Fact]
+        public async Task Image_Blend_Nothing() => await TestBlendMode(BitmapBlendingMode.Unspecified);
+        [Fact]
+        public async Task Image_Blend_Plus() => await TestBlendMode(BitmapBlendingMode.Plus);
+        [Fact]
+        public async Task Image_Blend_Screen() => await TestBlendMode(BitmapBlendingMode.Screen);
+        [Fact]
+        public async Task Image_Blend_Overlay() => await TestBlendMode(BitmapBlendingMode.Overlay);
+        [Fact]
+        public async Task Image_Blend_Darken() => await TestBlendMode(BitmapBlendingMode.Darken);
+        [Fact]
+        public async Task Image_Blend_Lighten() => await TestBlendMode(BitmapBlendingMode.Lighten);
+        [Fact]
+        public async Task Image_Blend_ColorDodge() => await TestBlendMode(BitmapBlendingMode.ColorDodge);
+        [Fact]
+        public async Task Image_Blend_ColorBurn() => await TestBlendMode(BitmapBlendingMode.ColorBurn);
+        [Fact]
+        public async Task Image_Blend_HardLight() => await TestBlendMode(BitmapBlendingMode.HardLight);
+        [Fact]
+        public async Task Image_Blend_SoftLight() => await TestBlendMode(BitmapBlendingMode.SoftLight);
+        [Fact]
+        public async Task Image_Blend_Difference() => await TestBlendMode(BitmapBlendingMode.Difference);
+        [Fact]
+        public async Task Image_Blend_Exclusion() => await TestBlendMode(BitmapBlendingMode.Exclusion);
+        [Fact]
+        public async Task Image_Blend_Multiply() => await TestBlendMode(BitmapBlendingMode.Multiply);
+        [Fact]
+        public async Task Image_Blend_Hue() => await TestBlendMode(BitmapBlendingMode.Hue);
+        [Fact]
+        public async Task Image_Blend_Saturation() => await TestBlendMode(BitmapBlendingMode.Saturation);
+        [Fact]
+        public async Task Image_Blend_Color() => await TestBlendMode(BitmapBlendingMode.Color);
+        [Fact]
+        public async Task Image_Blend_Luminosity() => await TestBlendMode(BitmapBlendingMode.Luminosity);
+
+        private async Task TestBlendMode(BitmapBlendingMode blendMode, [CallerMemberName] string testName = "")
+        {
+            var panel = new Panel();
+            panel.Children.Add(new Image() { Source = _bitmapBase });
+            panel.Children.Add(new Image() { Source = _bitmapOver, BlendMode = blendMode });
+
+            var target = new Decorator
+            {
+                Width = 512,
+                Height = 512,
+                Child = new Border
+                {
+                    Background = Brushes.Red,
+                    Child = panel
+                }
+            };
+
+            await RenderToFile(target,testName);
+            CompareImages(testName);
+        }
+    }
+}

tests/Avalonia.RenderTests/Controls/ImageCompositionTests.cs

@@ -0,0 +1,70 @@
+using System.IO;
+using System.Runtime.CompilerServices;
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Xunit;
+
+#if AVALONIA_SKIA
+namespace Avalonia.Skia.RenderTests
+#else
+namespace Avalonia.Direct2D1.RenderTests.Controls
+#endif
+{
+    public class ImageCompositionTests : TestBase
+    {
+        private readonly Bitmap _bitmapA;
+        private readonly Bitmap _bitmapB;
+
+        public ImageCompositionTests()
+            : base(@"Controls\Image\composition")
+        {
+            _bitmapA = new Bitmap(Path.Combine(OutputPath, "A.png"));
+            _bitmapB = new Bitmap(Path.Combine(OutputPath, "B.png"));
+        }
+        [Fact]
+        public async Task Image_Blend_SourceOver() => await TestCompositeMode(BitmapBlendingMode.SourceOver);
+        [Fact]
+        public async Task Image_Blend_Source() => await TestCompositeMode(BitmapBlendingMode.Source);
+        [Fact]
+        public async Task Image_Blend_SourceIn() => await TestCompositeMode(BitmapBlendingMode.SourceIn);
+        [Fact]
+        public async Task Image_Blend_SourceOut() => await TestCompositeMode(BitmapBlendingMode.SourceOut);
+        [Fact]
+        public async Task Image_Blend_SourceAtop() => await TestCompositeMode(BitmapBlendingMode.SourceAtop);
+        [Fact]
+        public async Task Image_Blend_Destination() => await TestCompositeMode(BitmapBlendingMode.Destination);
+        [Fact]
+        public async Task Image_Blend_DestinationIn() => await TestCompositeMode(BitmapBlendingMode.DestinationIn);
+        [Fact]
+        public async Task Image_Blend_DestinationOut() => await TestCompositeMode(BitmapBlendingMode.DestinationOut);
+        [Fact]
+        public async Task Image_Blend_DestinationOver() => await TestCompositeMode(BitmapBlendingMode.DestinationOver);
+        [Fact]
+        public async Task Image_Blend_DestinationAtop() => await TestCompositeMode(BitmapBlendingMode.DestinationAtop);
+        [Fact]
+        public async Task Image_Blend_Xor() => await TestCompositeMode(BitmapBlendingMode.Xor);
+        
+        private async Task TestCompositeMode(BitmapBlendingMode blendMode, [CallerMemberName] string testName = "")
+        {
+            var panel = new Panel();
+            panel.Children.Add(new Image() { Source = _bitmapA });
+            panel.Children.Add(new Image() { Source = _bitmapB, BlendMode = blendMode });
+
+            var target = new Decorator
+            {
+                Width = 512,
+                Height = 512,
+                Child = new Border
+                {
+                    Background = Brushes.Transparent,
+                    Child = panel
+                }
+            };
+
+            await RenderToFile(target,testName);
+            CompareImages(testName);
+        }
+    }
+}