feat(composition): Implement property listener/updater for the Acryli…

…cBrush + Refactor

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/AcrylicBrushTests/BasicAcrylicBrushTest.xaml

@@ -13,16 +13,25 @@
 			<ColumnDefinition Width="*"/>
 			<ColumnDefinition Width="250"/>
 		</Grid.ColumnDefinitions>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="*"/>
+			<RowDefinition Height="30"/>
+			<RowDefinition Height="30"/>
+		</Grid.RowDefinitions>
 		<Grid>
 			<Rectangle Fill="Aqua" Height="200" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
 			<Ellipse Fill="Magenta" Height="150" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 			<Rectangle Fill="Yellow" Height="100" Width="80" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
 		</Grid>
 		<Border x:Name="CustomAcrylicShapeInApp" Margin="12" CornerRadius="12">
 			<Border.Background>
-				<AcrylicBrush BackgroundSource="Backdrop" TintOpacity="0.5" TintColor="Red" FallbackColor="Green" />
+				<AcrylicBrush x:Name="acrylicBrush" BackgroundSource="Backdrop" TintOpacity="0.5" TintColor="Red" FallbackColor="Green" />
 			</Border.Background>
 			<Rectangle Fill="White" Height="100" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 		</Border>
+		<TextBlock Text="TintOpacity: " Grid.Row="1" VerticalAlignment="Center"/>
+		<Slider Grid.Row="1" Value="50" Padding="85,0,0,0" ValueChanged="Slider_ValueChanged"/>
+		<TextBlock Text="TintLuminosityOpacity: " Grid.Row="2" VerticalAlignment="Center"/>
+		<Slider Grid.Row="2" Value="0" Padding="150,0,0,0" ValueChanged="LuminositySlider_ValueChanged"/>
 	</Grid>
 </Page>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/AcrylicBrushTests/BasicAcrylicBrushTest.xaml.cs

@@ -1,5 +1,6 @@
 using Uno.UI.Samples.Controls;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
 
 namespace UITests.Windows_UI_Xaml_Media.AcrylicBrushTests
 {
@@ -10,5 +11,15 @@ public BasicAcrylicBrushTest()
 		{
 			this.InitializeComponent();
 		}
+
+		private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+		{
+			acrylicBrush.TintOpacity = e.NewValue / 100.0d;
+		}
+
+		private void LuminositySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+		{
+			acrylicBrush.TintLuminosityOpacity = e.NewValue / 100.0d;
+		}
 	}
 }

src/Uno.UI.Composition/Composition/CompositionEffectBrush.skia.cs

@@ -1636,5 +1636,10 @@ internal override void UpdatePaint(SKPaint paint, SKRect bounds)
 			paint.ImageFilter = _filter;
 			paint.FilterQuality = SKFilterQuality.High;
 		}
+
+		private protected override void DisposeInternal()
+		{
+			_filter?.Dispose();
+		}
 	}
 }

src/Uno.UI/UI/Xaml/Media/AcrylicBrush/AcrylicBrush.skia.cs

@@ -1,10 +1,6 @@
 using System;
 using System.Collections.Generic;
 using System.IO;
-using System.Linq;
-using System.Reflection;
-using System.Text;
-using System.Threading.Tasks;
 using Microsoft.Graphics.Canvas;
 using Microsoft.Graphics.Canvas.Effects;
 using Windows.Graphics.Effects;
@@ -43,25 +39,30 @@ protected override void OnDisconnected()
 			_noiseBrush = null;
 		}
 
+		internal override void OnPropertyChanged2(DependencyPropertyChangedEventArgs args)
+		{
+			switch (args.Property.Name)
+			{
+				case nameof(TintColor):
+				case nameof(TintOpacity):
+				case nameof(TintLuminosityOpacity):
+				case nameof(AlwaysUseFallback):
+					UpdateAcrylicBrush();
+					break;
+				default:
+					return;
+			}
+		}
+
 		private void UpdateAcrylicBrush()
 		{
 			if (_isConnected)
 			{
-				//const bool isUsingWindowAcrylic = BackgroundSource() == winrt::AcrylicBackgroundSource::HostBackdrop;
-				bool shouldUseOpaqueBrush = GetEffectiveTintColor().A == 255;
+				//bool isUsingWindowAcrylic = BackgroundSource == AcrylicBackgroundSource.HostBackdrop;
+				//bool shouldUseOpaqueBrush = GetEffectiveTintColor().A == 255;
 
-				// Covers cases where we need a new brush (no animations)
-				if (_brush is null ||                              // Create brush for the first time
-					(_isUsingOpaqueBrush != shouldUseOpaqueBrush)) // Recreate the brush with (or without) the opaque tint optimization
-				{
-					CreateAcrylicBrush(false /* useCrossFadeEffect */, true /* forceCreateAcrylicBrush */);
-				}
-				// Covers cases were we switch between fallback and acrylic (needs animations)
-				else
-				{
-					// TODO: Currently we are doing the same as above because Composition animations aren't implemented yet
-					CreateAcrylicBrush(false /* useCrossFadeEffect */, true /* forceCreateAcrylicBrush */);
-				}
+				// TODO: Currently we are force recreating the brush even if it exists because Composition animations aren't implemented yet
+				CreateAcrylicBrush(false /* useCrossFadeEffect */, true /* forceCreateAcrylicBrush */);
 			}
 		}
 
@@ -95,17 +96,18 @@ private void CreateAcrylicBrush(bool useCrossFadeEffect, bool forceCreateAcrylic
 
 				// Set noise image source
 				acrylicBrush.SetSourceParameter("Noise", _noiseBrush);
-				//acrylicBrush.Properties.InsertColor("TintColor.Color", tintColor);
 
+				// TODO: Composition properties aren't supported yet
+				/*acrylicBrush.Properties.InsertColor("TintColor.Color", tintColor);
 				if (!_isUsingOpaqueBrush)
 				{
-					//acrylicBrush.Properties.InsertColor("LuminosityColor.Color", luminosityColor);
+					acrylicBrush.Properties.InsertColor("LuminosityColor.Color", luminosityColor);
 				}
 
 				if (useCrossFadeEffect)
 				{
-					//acrylicBrush.Properties.InsertColor("FallbackColor.Color", FallbackColor);
-				}
+					acrylicBrush.Properties.InsertColor("FallbackColor.Color", FallbackColor);
+				}*/
 
 				acrylicBrush.UseBlurPadding = true;
 
@@ -222,7 +224,6 @@ private CompositionEffectFactory CreateAcrylicBrushCompositionEffectFactory(Comp
 
 			// Create noise with alpha:
 			CompositionEffectSourceParameter noiseEffectSourceParameter = new("Noise");
-			// OpacityEffect applied to wrapped noise
 			var noiseOpacityEffect = new OpacityEffect();
 			noiseOpacityEffect.Name = "NoiseOpacity";
 			noiseOpacityEffect.Opacity = _noiseOpacity;
@@ -241,7 +242,7 @@ private CompositionEffectFactory CreateAcrylicBrushCompositionEffectFactory(Comp
 				fallbackColorEffect.Name = "FallbackColor";
 				fallbackColorEffect.Color = initialFallbackColor;
 
-				// CrossFade with the fallback color. Weight = 0 means full fallback, 1 means full acrylic.
+				// CrossFade with the fallback color. CrossFade = 0 means full fallback, 1 means full acrylic.
 				var fadeInOutEffect = new CrossFadeEffect();
 				fadeInOutEffect.Name = "FadeInOut";
 				fadeInOutEffect.Source1 = fallbackColorEffect;
@@ -273,7 +274,7 @@ private IGraphicsEffect CombineNoiseWithTintEffect(IGraphicsEffectSource blurred
 
 			// Luminosity blend
 			var luminosityBlendEffect = new BlendEffect();
-			// NOTE: There is currently a bug where the names of BlendEffectMode::Luminosity and BlendEffectMode::Color are flipped.
+			// NOTE: There is currently a bug in Windows where the names of BlendEffectMode::Luminosity and BlendEffectMode::Color are flipped.
 			// This should be changed to Luminosity when/if the bug is fixed.
 			luminosityBlendEffect.Mode = BlendEffectMode.Color;
 			luminosityBlendEffect.Background = blurredSource;
@@ -283,7 +284,7 @@ private IGraphicsEffect CombineNoiseWithTintEffect(IGraphicsEffectSource blurred
 
 			// Color blend
 			var colorBlendEffect = new BlendEffect();
-			// NOTE: There is currently a bug where the names of BlendEffectMode::Luminosity and BlendEffectMode::Color are flipped.
+			// NOTE: There is currently a bug in Windows where the names of BlendEffectMode::Luminosity and BlendEffectMode::Color are flipped.
 			// This should be changed to Color when/if the bug is fixed.
 			colorBlendEffect.Mode = BlendEffectMode.Luminosity;
 			colorBlendEffect.Background = luminosityBlendEffect;