feat(gradient): [Wasm] Added support for gradient text

unoplatform · May 7, 2020 · 92aa150 · 92aa150
1 parent fe5d86c
commit 92aa150
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 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
@@ -10,7 +10,7 @@
 	<StackPanel Spacing="10">
 		<TextBlock FontSize="15">Radial Gradient as background on a Rectangle + Border</TextBlock>
 		<StackPanel Orientation="Horizontal" Spacing="10">
-			<Rectangle Width="125" Height="125">
+			<Rectangle Width="100" Height="100">
 				<Rectangle.Fill>
 					<RadialGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -22,7 +22,7 @@
 					</RadialGradientBrush>
 				</Rectangle.Fill>
 			</Rectangle>
-			<Border Width="125" Height="125">
+			<Border Width="100" Height="100">
 				<Border.Background>
 					<RadialGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -37,7 +37,7 @@
 		</StackPanel>
 		<TextBlock FontSize="15">Radial Gradient as border/stroke on a Rectangle + Border</TextBlock>
 		<StackPanel Orientation="Horizontal" Spacing="10">
-			<Rectangle Width="125" Height="125" StrokeThickness="40">
+			<Rectangle Width="100" Height="100" StrokeThickness="40">
 				<Rectangle.Stroke>
 					<RadialGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -49,7 +49,7 @@
 					</RadialGradientBrush>
 				</Rectangle.Stroke>
 			</Rectangle>
-			<Border Width="125" Height="125" BorderThickness="40">
+			<Border Width="100" Height="100" BorderThickness="40">
 				<Border.BorderBrush>
 					<RadialGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -64,7 +64,7 @@
 		</StackPanel>
 		<TextBlock FontSize="15">Linear Gradient as background on a Rectangle + Border (relative + absolute)</TextBlock>
 		<StackPanel Orientation="Horizontal" Spacing="10">
-			<Rectangle Width="125" Height="125">
+			<Rectangle Width="100" Height="100">
 				<Rectangle.Fill>
 					<LinearGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -76,7 +76,7 @@
 					</LinearGradientBrush>
 				</Rectangle.Fill>
 			</Rectangle>
-			<Border Width="125" Height="125">
+			<Border Width="100" Height="100">
 				<Border.Background>
 					<LinearGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -88,9 +88,9 @@
 					</LinearGradientBrush>
 				</Border.Background>
 			</Border>
-			<Rectangle Width="125" Height="125">
+			<Rectangle Width="100" Height="100">
 				<Rectangle.Fill>
-					<LinearGradientBrush MappingMode="Absolute" EndPoint="125,125">
+					<LinearGradientBrush MappingMode="Absolute" EndPoint="100,100">
 						<GradientStop Color="Blue" Offset="0.0" />
 						<GradientStop Color="Yellow" Offset="0.2" />
 						<GradientStop Color="LimeGreen" Offset="0.4" />
@@ -100,9 +100,9 @@
 					</LinearGradientBrush>
 				</Rectangle.Fill>
 			</Rectangle>
-			<Border Width="125" Height="125">
+			<Border Width="100" Height="100">
 				<Border.Background>
-					<LinearGradientBrush MappingMode="Absolute" EndPoint="125,125">
+					<LinearGradientBrush MappingMode="Absolute" EndPoint="100,100">
 						<GradientStop Color="Blue" Offset="0.0" />
 						<GradientStop Color="Yellow" Offset="0.2" />
 						<GradientStop Color="LimeGreen" Offset="0.4" />
@@ -115,7 +115,7 @@
 		</StackPanel>
 		<TextBlock FontSize="15">Linear Gradient as border/stroke on a Rectangle + Border (relative + absolute)</TextBlock>
 		<StackPanel Orientation="Horizontal" Spacing="10">
-			<Rectangle Width="125" Height="125" StrokeThickness="40">
+			<Rectangle Width="100" Height="100" StrokeThickness="40">
 				<Rectangle.Stroke>
 					<LinearGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -127,7 +127,7 @@
 					</LinearGradientBrush>
 				</Rectangle.Stroke>
 			</Rectangle>
-			<Border Width="125" Height="125" BorderThickness="40">
+			<Border Width="100" Height="100" BorderThickness="40">
 				<Border.BorderBrush>
 					<LinearGradientBrush>
 						<GradientStop Color="Blue" Offset="0.0" />
@@ -139,9 +139,9 @@
 					</LinearGradientBrush>
 				</Border.BorderBrush>
 			</Border>
-			<Rectangle Width="125" Height="125" StrokeThickness="40">
+			<Rectangle Width="100" Height="100" StrokeThickness="40">
 				<Rectangle.Stroke>
-					<LinearGradientBrush MappingMode="Absolute" EndPoint="125,125">
+					<LinearGradientBrush MappingMode="Absolute" EndPoint="100,100">
 						<GradientStop Color="Blue" Offset="0.0" />
 						<GradientStop Color="Yellow" Offset="0.2" />
 						<GradientStop Color="LimeGreen" Offset="0.4" />
@@ -151,9 +151,9 @@
 					</LinearGradientBrush>
 				</Rectangle.Stroke>
 			</Rectangle>
-			<Border Width="125" Height="125" BorderThickness="40">
+			<Border Width="100" Height="100" BorderThickness="40">
 				<Border.BorderBrush>
-					<LinearGradientBrush MappingMode="Absolute" EndPoint="125,125">
+					<LinearGradientBrush MappingMode="Absolute" EndPoint="100,100">
 						<GradientStop Color="Blue" Offset="0.0" />
 						<GradientStop Color="Yellow" Offset="0.2" />
 						<GradientStop Color="LimeGreen" Offset="0.4" />
@@ -164,5 +164,32 @@
 				</Border.BorderBrush>
 			</Border>
 		</StackPanel>
+		<TextBlock FontSize="15">Text with Radial/Linear gradient as foreground brush</TextBlock>
+		<StackPanel Orientation="Horizontal" Spacing="10">
+			<TextBlock Text="UNO" FontSize="110" FontWeight="Bold">
+				<TextBlock.Foreground>
+					<RadialGradientBrush>
+						<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" />
+					</RadialGradientBrush>
+				</TextBlock.Foreground>
+			</TextBlock>
+			<TextBlock Text="UNO" FontSize="110" FontWeight="Bold">
+				<TextBlock.Foreground>
+					<LinearGradientBrush>
+						<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" />
+					</LinearGradientBrush>
+				</TextBlock.Foreground>
+			</TextBlock>
+		</StackPanel>
 	</StackPanel>
 </Page>
diff --git a/src/Uno.UI.Wasm/WasmCSS/Uno.UI.css b/src/Uno.UI.Wasm/WasmCSS/Uno.UI.css
@@ -99,6 +99,10 @@ embed.uno-frameworkelement.uno-unarranged {
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+
+  -ms-background-clip: text !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
 }
 
 .uno-buttonbase {

diff --git a/src/Uno.UI/UI/Xaml/Controls/TextBlock/TextBlock.cs b/src/Uno.UI/UI/Xaml/Controls/TextBlock/TextBlock.cs
@@ -367,10 +367,12 @@ Brush Foreground
 			get { return (Brush)this.GetValue(ForegroundProperty); }
 			set
 			{
+#if !__WASM__
 				if (!(Foreground is SolidColorBrush))
 				{
 					throw new NotSupportedException();
 				}
+#endif
 
 				this.SetValue(ForegroundProperty, value);
 			}

diff --git a/src/Uno.UI/UI/Xaml/Documents/UIElementTextHelper.wasm.cs b/src/Uno.UI/UI/Xaml/Documents/UIElementTextHelper.wasm.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Web;
+using Windows.Foundation;
 using Windows.UI.Text;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -139,12 +140,20 @@ internal static void SetForeground(this UIElement element, object localValue)
 				case SolidColorBrush scb:
 					element.SetStyle("color", scb.ColorWithOpacity.ToHexString());
 					break;
+				case GradientBrush gradient:
+					element.SetStyle(
+						("background", gradient.ToCssString(element.RenderSize)),
+						("color", "transparent"),
+						("background-clip", "text")
+					);
+					break;
 
 				case UnsetValue uv:
 
+
 				// TODO: support other foreground types
 				default:
-					element.ResetStyle("color");
+					element.ResetStyle("color", "background", "background-clip");
 					break;
 			}
 		}

diff --git a/src/Uno.UI/UI/Xaml/Media/LinearGradientBrush.cs b/src/Uno.UI/UI/Xaml/Media/LinearGradientBrush.cs
@@ -39,6 +39,5 @@ public Point EndPoint
 			typeof(LinearGradientBrush),
 			new PropertyMetadata(new Point(1,1))
 		);
-
 	}
 }