[Skia] feat: Implement Composition Effect system and AcrylicBrush

build/cSpell.json

@@ -38,6 +38,7 @@
 	"Geolocation",
 	"globbing",
 	"Grial",
+	"Grayscale",
 	"Gyrometer",
 	"Hanja",
 	"hectopascals",
@@ -118,6 +119,7 @@
 	"automagically",
 	"bluetoothdevice",
 	"commandbar",
+	"CLSID",
 	"datatransfer",
 	"Divio's",
 	"emcc",

doc/articles/composition.md

@@ -35,6 +35,183 @@ This thread will also be used for [independent animations](https://learn.microso
 
 _There are a few known issues associated with the used of the compositor thread, [make sure to read the section below](#known-issues)._
 
+## Brush Anti-aliasing [Skia Backends]
+
+On Skia targets (GTK and WPF), anti-aliasing is disabled by default for brushes, You can request it to be anti-aliased by setting this in your application's constructor:
+
+```csharp
+#if HAS_UNO
+    Uno.CompositionConfiguration.Configuration |= Uno.CompositionConfiguration.Options.UseBrushAntialiasing;
+#endif
+```
+
+Or alternatively, if you want to enable all available Composition capabilities:
+
+```csharp
+#if HAS_UNO
+    Uno.CompositionConfiguration.Configuration = Uno.CompositionConfiguration.Options.Enabled;
+#endif
+```
+
+## Implemented APIs [Skia Backends]
+
+### Windows.UI.Composition
+
+- [CompositionAnimation](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionanimation)
+- [CompositionBackdropBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionbackdropbrush)
+- [CompositionBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionbrush)
+- [CompositionCapabilities](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositioncapabilities)
+- [CompositionClip](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionclip)
+- [CompositionColorBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositioncolorbrush)
+- [CompositionEffectBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositioneffectbrush)
+- [CompositionEffectFactory](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositioneffectfactory)
+- [CompositionEffectSourceParameter](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositioneffectsourceparameter)
+- [CompositionEllipseGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionellipsegeometry)
+- [CompositionGeometricClip](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositiongeometricclip)
+- [CompositionGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositiongeometry)
+- [CompositionGradientBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositiongradientbrush)
+- [CompositionLinearGradientBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionlineargradientbrush)
+- [CompositionLineGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionlinegeometry)
+- [CompositionMaskBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionmaskbrush)
+- [CompositionNineGridBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionninegridbrush)
+- [CompositionObject](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionobject)
+- [CompositionPath](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionpath)
+- [CompositionPathGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionpathgeometry)
+- [CompositionPropertySet](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionpropertyset)
+- [CompositionRadialGradientBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionradialgradientbrush)
+- [CompositionRectangleGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionrectanglegeometry)
+- [CompositionRoundedRectangleGeometry](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionroundedrectanglegeometry)
+- [CompositionShape](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionshape)
+- [CompositionShapeCollection](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionshapecollection)
+- [CompositionSpriteShape](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionspriteshape)
+- [CompositionSurfaceBrush](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionsurfacebrush)
+- [CompositionViewBox](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionviewbox)
+- [CompositionVisualSurface](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositionvisualsurface)
+- [Compositor](https://learn.microsoft.com/uwp/api/windows.ui.composition.compositor)
+- [ContainerVisual](https://learn.microsoft.com/uwp/api/windows.ui.composition.containervisual)
+- [ExpressionAnimation](https://learn.microsoft.com/uwp/api/windows.ui.composition.expressionanimation)
+- [InsetClip](https://learn.microsoft.com/uwp/api/windows.ui.composition.insetclip)
+- [IVisualElement](https://learn.microsoft.com/uwp/api/windows.ui.composition.ivisualelement)
+- [IVisualElement2](https://learn.microsoft.com/uwp/api/windows.ui.composition.ivisualelement2)
+- [RectangleClip](https://learn.microsoft.com/uwp/api/windows.ui.composition.rectangleclip)
+- [RedirectVisual](https://learn.microsoft.com/uwp/api/windows.ui.composition.redirectvisual)
+- [ShapeVisual](https://learn.microsoft.com/uwp/api/windows.ui.composition.shapevisual)
+- [SpriteVisual](https://learn.microsoft.com/uwp/api/windows.ui.composition.spritevisual)
+- [Visual](https://learn.microsoft.com/uwp/api/windows.ui.composition.visual)
+- [VisualCollection](https://learn.microsoft.com/uwp/api/windows.ui.composition.visualcollection)
+
+### Windows.UI.Composition.Interactions
+
+- [InteractionTracker](https://learn.microsoft.com/uwp/api/windows.ui.composition.interactions.interactiontracker)
+- [VisualInteractionSource](https://learn.microsoft.com/uwp/api/windows.ui.composition.interactions.visualinteractionsource)
+
+### Windows.Graphics.Effects
+
+- [IGraphicsEffectSource](https://learn.microsoft.com/uwp/api/windows.graphics.effects.igraphicseffectsource)
+
+### Windows.Graphics.Effects.Interop
+
+- [IGraphicsEffectD2D1Interop](https://learn.microsoft.com/en-us/windows/win32/api/windows.graphics.effects.interop/nn-windows-graphics-effects-interop-igraphicseffectd2d1interop)
+
+### Microsoft.Graphics.Canvas.Effects (Win2D/Composition Effects)
+
+- [AlphaMaskEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_AlphaMaskEffect.htm)
+- [ArithmeticCompositeEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_ArithmeticCompositeEffect.htm)
+- [BlendEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_BlendEffect.htm)
+- [BorderEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_BorderEffect.htm)
+- [ColorMatrixEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_ColorMatrixEffect.htm)
+- [ColorSourceEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_ColorSourceEffect.htm)
+- [CompositeEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_CompositeEffect.htm)
+- [ContrastEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_ContrastEffect.htm)
+- [CrossFadeEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_CrossFadeEffect.htm)
+- [DistantDiffuseEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_DistantDiffuseEffect.htm)
+- [DistantSpecularEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_DistantSpecularEffect.htm)
+- [ExposureEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_ExposureEffect.htm)
+- [GammaTransferEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_GammaTransferEffect.htm)
+- [GaussianBlurEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm)
+- [GrayscaleEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_GrayscaleEffect.htm)
+- [HueRotationEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_HueRotationEffect.htm)
+- [InvertEffectEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_InvertEffect.htm)
+- [LinearTransferEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_LinearTransferEffect.htm)
+- [LuminanceToAlphaEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_LuminanceToAlphaEffect.htm)
+- [Matrix5x4](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_Matrix5x4.htm)
+- [OpacityEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_OpacityEffect.htm)
+- [PointDiffuseEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_PointDiffuseEffect.htm)
+- [PointSpecularEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_PointSpecularEffect.htm)
+- [SaturationEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_SaturationEffect.htm)
+- [SepiaEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_SepiaEffect.htm)
+- [SpotDiffuseEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_SpotDiffuseEffect.htm)
+- [SpotSpecularEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_SpotSpecularEffect.htm)
+- [TemperatureAndTintEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_TemperatureAndTintEffect.htm)
+- [TintEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_TintEffect.htm)
+- [Transform2DEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_Transform2DEffect.htm)
+
+Note that while Uno Platform implements these effects and [their Win2D wrappers](https://github.com/unoplatform/uno/tree/master/src/Uno.UI.Composition/Win2D/Microsoft/Graphics/Canvas/Effects), the Win2D wrappers are still internal and not exposed to users, but the effects can still be used by temporary implementing the [IGraphicsEffectD2D1Interop](https://learn.microsoft.com/en-us/windows/win32/api/windows.graphics.effects.interop/nn-windows-graphics-effects-interop-igraphicseffectd2d1interop) interface manually until the Win2D wrappers become public, like for example the [GaussianBlurEffect](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm) can be implemented like this:
+
+```csharp
+#nullable enable
+
+using System;
+using Windows.Graphics.Effects;
+using Windows.Graphics.Effects.Interop;
+
+internal class GaussianBlurEffect : IGraphicsEffect, IGraphicsEffectSource, IGraphicsEffectD2D1Interop
+{
+    private string _name = "GaussianBlurEffect";
+    private Guid _id = new Guid("1FEB6D69-2FE6-4AC9-8C58-1D7F93E7A6A5");
+
+    public string Name
+    {
+        get => _name;
+        set => _name = value;
+    }
+
+    public IGraphicsEffectSource? Source { get; set; }
+
+    public float BlurAmount { get; set; } = 3.0f;
+
+    public Guid GetEffectId() => _id;
+
+    public void GetNamedPropertyMapping(string name, out uint index, out GraphicsEffectPropertyMapping mapping)
+    {
+        switch (name)
+        {
+            case nameof(BlurAmount):
+                {
+                    index = 0;
+                    mapping = GraphicsEffectPropertyMapping.Direct;
+                    break;
+                }
+            default:
+                {
+                    index = 0xFF;
+                    mapping = (GraphicsEffectPropertyMapping)0xFF;
+                    break;
+                }
+        }
+    }
+
+    public object? GetProperty(uint index)
+    {
+        switch (index)
+        {
+            case 0:
+                return BlurAmount;
+            default:
+                return null;
+        }
+    }
+
+    public uint GetPropertyCount() => 1;
+    public IGraphicsEffectSource? GetSource(uint index) => Source;
+    public uint GetSourceCount() => 1;
+}
+```
+
+The GUID used in the example above is the Effect CLSID of the [Direct2D Gaussian Blur Effect](https://learn.microsoft.com/windows/win32/direct2d/gaussian-blur). For a list of built-in Direct2D effects and their corresponding CLSIDs, see [Direct2D Built-in Effects](https://learn.microsoft.com/windows/win32/direct2d/built-in-effects).
+
 ## Known issues
 
-* When using the compositor thread, the native ripple effect of Android (used in native buttons) does not work.
+- [Android] When using the compositor thread, the native ripple effect of Android (used in native buttons) does not work.
+
+- [Skia Backends] Some Composition effects don't render properly (or at all) on software rendering (CPU), to check if Uno is running on the software rendering (CPU) or the hardware rendering (GPU), you can call `CompositionCapabilities.GetForCurrentView().AreEffectsFast()`.

doc/articles/features/shapes-and-brushes.md

@@ -47,14 +47,15 @@ Notes:
 
 ## Implemented Brushes / Properties
 
-| Brush                              | Android | iOS     | macOS   | Wasm |                                                                                                                            |
-| ---------------------------------- | ------- | ------- | ------- | ---- | -------------------------------------------------------------------------------------------------------------------------- |
-| `AcrylicBrush`                     | Yes (3) | Yes (3) | Yes (3) | Yes  | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.acrylicbrush)        |
-| `ImageBrush`                       | Yes (1) | Yes (1) |         | No   | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.imagebrush)          |
-| `LinearGradientBrush`              | Yes (2) | Yes (2) | Yes     | Yes  | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.lineargradientbrush) |
-| `RadialGradientBrush` (WinUI 2.4+) | Yes     | Yes     | Yes     | Yes  | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.radialgradientbrush) |
-| `RevealBrush` (WinUI 2.0+)         | No      | No      | No      | No   | [Documentation](https://learn.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.revealbrush)                         |
-| `SolidColorBrush`                  | Yes     | Yes     | Yes     | Yes  | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.solidcolorbrush)     |
+| Brush                              | Android | iOS     | macOS | Wasm | GTK/WPF |                                                             |
+| ---------------------------------- | ------- | ------- | ---- | ------------------------------------------------------------ | ---------------------------------- |
+| `AcrylicBrush`                     | Yes (3) | Yes (3) | Yes (3) | Yes   | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.acrylicbrush) |
+| `ImageBrush`                       | Yes (1) | Yes (1) |  | No   | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.imagebrush) |
+| `LinearGradientBrush` | Yes (2) | Yes (2) | Yes  | Yes | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.lineargradientbrush) |
+| `RadialGradientBrush` (WinUI 2.4+) | Yes | Yes  | Yes  | Yes | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.radialgradientbrush) |
+| `RevealBrush` (WinUI 2.0+) | No     | No     | No   | No  | No  | [Documentation](https://learn.microsoft.com/windows/winui/api/microsoft.ui.xaml.media.revealbrush) |
+| `SolidColorBrush`                  | Yes     | Yes     | Yes  | Yes  | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.solidcolorbrush) |
+| `XamlCompositionBrushBase`         | No      | No      | No    | No   | Yes | [Documentation](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.xamlcompositionbrushbase) |
 
 Notes:
 
@@ -64,7 +65,7 @@ Notes:
 
 ## AcrylicBrush
 
-Uno Platform supports the `Backdrop` version of `AcrylicBrush` (blurring in-app content behind element) on all targets except GTK and WPF. In addition, on macOS we support the `HostBackdrop` acrylic (blurring content behind the app window).
+Uno Platform supports the `Backdrop` version of `AcrylicBrush` (blurring in-app content behind element) on all targets. In addition, on macOS we support the `HostBackdrop` acrylic (blurring content behind the app window).
 
 The brush currently has an important limitation on Android, iOS, and macOS: it can be used **only on elements which have no children**. Eg., if you wanted to have an acrylic effect in the background of a `Grid` with child content, then you would add a `Border` with no inner child behind the other content in the `Grid` and set the acrylic background on the `Border`, rather than set it directly on the `Grid`:
 

src/SamplesApp/UITests.Shared/ItemExclusions.props

@@ -9,10 +9,6 @@
 	<Compile Remove="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\WebView\**" />
 	<None Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\WebView\**" />
 
-	<Page Remove="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\AcrylicBrushTests\**" />
-	<Compile Remove="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\AcrylicBrushTests\**" />
-	<None Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\AcrylicBrushTests\**" />
-
 	<Page Remove="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\BrushesTests\**" />
 	<Compile Remove="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\BrushesTests\**" />
 	<None Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\BrushesTests\**" />