fix(gradient): Fixed default values for Radius & Origin on RadialGrad…

…ientBrush.
unoplatform · May 7, 2020 · d2d60a7 · d2d60a7
1 parent 712787a
commit d2d60a7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/GradientBrushTests/GradientsPage.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/GradientBrushTests/GradientsPage.xaml
@@ -11,7 +11,7 @@
 
 	<ScrollViewer>
 		<StackPanel Spacing="10">
-			<TextBlock FontSize="15">Radial Gradient as background on a Rectangle / Border / Ellipse</TextBlock>
+			<TextBlock FontSize="15">Radial Gradient as background on a Rectangle / Rectangle / Border / Ellipse / Ellipse</TextBlock>
 			<StackPanel Orientation="Horizontal" Spacing="10">
 				<Rectangle Width="100" Height="100">
 					<Rectangle.Fill>
@@ -26,6 +26,19 @@
 					</Rectangle.Fill>
 				</Rectangle>
 
+				<Rectangle Width="100" Height="100">
+					<Rectangle.Fill>
+						<media:RadialGradientBrush FallbackColor="Red" RadiusX="0.5" RadiusY="0.5">
+							<GradientStop Color="Blue" Offset="0.0" />
+							<GradientStop Color="Yellow" Offset="0.2" />
+							<GradientStop Color="LimeGreen" Offset="0.4" />
+							<GradientStop Color="LightBlue" Offset="0.6" />
+							<GradientStop Color="Blue" Offset="0.8" />
+							<GradientStop Color="LightGray" Offset="1" />
+						</media:RadialGradientBrush>
+					</Rectangle.Fill>
+				</Rectangle>
+
 				<Border Width="100" Height="100">
 					<Border.Background>
 						<media:RadialGradientBrush FallbackColor="Red">

diff --git a/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.Android.cs b/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.Android.cs
@@ -23,7 +23,7 @@ protected internal override Shader GetShader(Rect destinationRect)
 				var size = destinationRect.Size;
 
 				center = new Point(center.X * size.Width, Center.Y * size.Height);
-				radius = (float)(radiusX * size.Width + radiusY * size.Height) / 4.0f; // We take the avg
+				radius = (float)(radiusX * size.Width + radiusY * size.Height) / 2.0f; // We take the avg
 			}
 			else
 			{

diff --git a/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.cs b/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.cs
@@ -3,6 +3,7 @@
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Markup;
 using Windows.UI.Xaml.Media;
+using Uno;
 
 namespace Microsoft.UI.Xaml.Media
 {
@@ -18,7 +19,7 @@ public Point Center
 		}
 
 		public static readonly DependencyProperty RadiusXProperty = DependencyProperty.Register(
-			"RadiusX", typeof(double), typeof(RadialGradientBrush), new PropertyMetadata(1.0d));
+			"RadiusX", typeof(double), typeof(RadialGradientBrush), new PropertyMetadata(0.5d));
 
 		public double RadiusX
 		{
@@ -27,7 +28,7 @@ public double RadiusX
 		}
 
 		public static readonly DependencyProperty RadiusYProperty = DependencyProperty.Register(
-			"RadiusY", typeof(double), typeof(RadialGradientBrush), new PropertyMetadata(1.0d));
+			"RadiusY", typeof(double), typeof(RadialGradientBrush), new PropertyMetadata(0.5d));
 
 		public double RadiusY
 		{
@@ -36,8 +37,9 @@ public double RadiusY
 		}
 
 		public static readonly DependencyProperty GradientOriginProperty = DependencyProperty.Register(
-			"GradientOrigin", typeof(Point), typeof(RadialGradientBrush), new PropertyMetadata(default(Point)));
+			"GradientOrigin", typeof(Point), typeof(RadialGradientBrush), new PropertyMetadata(new Point(0.5d, 0.5d)));
 
+		[NotImplemented]
 		public Point GradientOrigin
 		{
 			get => (Point)GetValue(GradientOriginProperty);
@@ -47,6 +49,7 @@ public Point GradientOrigin
 		public static readonly DependencyProperty InterpolationSpaceProperty = DependencyProperty.Register(
 			"InterpolationSpace", typeof(CompositionColorSpace), typeof(RadialGradientBrush), new PropertyMetadata(default(CompositionColorSpace)));
 
+		[NotImplemented]
 		public CompositionColorSpace InterpolationSpace
 		{
 			get => (CompositionColorSpace)GetValue(InterpolationSpaceProperty);

diff --git a/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.iOSmacOS.cs b/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.iOSmacOS.cs
@@ -55,7 +55,7 @@ public override void DrawInContext(CGContext ctx)
 				if (_isRelative)
 				{
 					center = new Point(_center.X * size.Width, _center.Y * size.Height);
-					radius = (nfloat)(_radius * size.Width + _radius * size.Height) / 4.0f; // We take the avg
+					radius = (nfloat)(_radius * size.Width + _radius * size.Height) / 2.0f; // We take the avg
 				}
 				else
 				{

diff --git a/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.wasm.cs b/src/Uno.UI/UI/Xaml/Media/RadialGradientBrush.wasm.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Linq;
 using Windows.Foundation;
+using Windows.Foundation.Metadata;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Wasm;
@@ -27,7 +28,7 @@ internal override string ToCssString(Size size)
 				",",
 				GradientStops.Select(p => $"{GetColorWithOpacity(p.Color).ToHexString()} {(p.Offset * 100).ToStringInvariant()}%"));
 
-			return $"radial-gradient(ellipse farthest-side at {radiusX * 50d}% {radiusY * 50d}%, {stops})";
+			return $"radial-gradient(ellipse farthest-side at {radiusX * 100d}% {radiusY * 100d}%, {stops})";
 		}
 
 		internal override UIElement ToSvgElement()
@@ -45,7 +46,7 @@ internal override UIElement ToSvgElement()
 			var linearGradient = new SvgElement("radialGradient");
 
 			// TODO: support ellipse shaped radial on SVG using a gradientTransform.
-			var radius = (radiusX + radiusY) / 4;
+			var radius = (radiusX + radiusY) / 2d;
 
 			linearGradient.SetAttribute(
 				("cx", center.X.ToStringInvariant()),