✨ updated sample outline text

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+    // Pointez pour afficher la description des attributs existants.
+    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": ".NET MAUI",
+            "type": "maui",
+            "request": "launch",
+            "preLaunchTask": "maui: Build"
+        }
+    ]
+}

ch02_DesigningViews/ex_OutlineText/MainPage.xaml

@@ -89,6 +89,33 @@
                                 BackgroundColor="DarkSalmon"
                                 Ratio="0.9"/>
 
+            <Label Text="Binding"/>
+            <Grid ColumnDefinitions="*,*">
+                <views:LabelOutline Text="{Binding Text}"
+                                    Stroke="Red"
+                                    Fill="Yellow"
+                                    StrokeWidth="{Binding StrokeWidth}"
+                                    HeightRequest="50"
+                                    FontFamily="{Binding FontFamily}"
+                                    TextSize="50"
+                                    Aspect="Center"
+                                    BackgroundColor="DarkSalmon"
+                                    Ratio="0.9"/>
+                <VerticalStackLayout Grid.Column="1">
+                    <Entry Text="{Binding Text}"/>
+                    <Stepper Maximum="5" Minimum="0" Value="{Binding StrokeWidth}"/>
+                    <Picker SelectedItem="{Binding FontFamily}">
+                        <Picker.ItemsSource>
+                            <x:Array Type="{x:Type x:String}">
+                            <x:String>OpenSansRegular</x:String>
+                            <x:String>Equestria</x:String>
+                            </x:Array>
+                        </Picker.ItemsSource>
+                    </Picker>
+                </VerticalStackLayout>
+            </Grid>
+            
+
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>

ch02_DesigningViews/ex_OutlineText/MainPage.xaml.cs

@@ -1,4 +1,5 @@
-using SkiaSharp;
+using System.ComponentModel;
+using SkiaSharp;
 using SkiaSharp.Views.Maui;
 
 namespace ex_OutlineText;
@@ -8,6 +9,7 @@ public partial class MainPage : ContentPage
 	public MainPage()
 	{
 		InitializeComponent();
+		BindingContext = new SimpleVM();
 	}
 }
 

ch02_DesigningViews/ex_OutlineText/MauiProgram.cs

@@ -15,7 +15,7 @@ public static class MauiProgram
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
 				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
-				fonts.AddFont("Friendfship Magic - Equestria.ttf", "FriendfshipMagicEquestria");
+				fonts.AddFont("Friendfship Magic - Equestria.ttf", "Equestria");
 			});
 
 #if DEBUG

ch02_DesigningViews/ex_OutlineText/SimpleVM.cs

@@ -0,0 +1,47 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace ex_OutlineText;
+
+public class SimpleVM : INotifyPropertyChanged
+{
+    public string Text
+	{
+		get => text;
+		set
+		{
+			text = value;
+			OnPropertyChanged();
+		}
+	}
+	private string text = "Prout";
+
+	public float StrokeWidth
+	{
+		get => strokeWidth;
+		set
+		{
+			strokeWidth = value;
+			OnPropertyChanged();
+		}
+	}
+	private float strokeWidth;
+
+	public string FontFamily
+	{
+		get => font;
+		set
+		{
+			font = value;
+			OnPropertyChanged();
+		}
+	}
+	private string font = "Equestria";
+
+    public void OnPropertyChanged([CallerMemberName] string pptyName = "")
+    {
+        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(pptyName));
+    }
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+}

ch02_DesigningViews/ex_OutlineText/Views/LabelOutline.xaml

@@ -4,7 +4,7 @@
              xmlns:views="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
              x:Class="ex_OutlineText.Views.LabelOutline"
              x:Name="root">
-    <views:SKCanvasView PaintSurface="OnPainting"
+    <views:SKCanvasView PaintSurface="OnPainting" x:Name="canvasView"
                         HeightRequest="{Binding ActualHeight, x:Reference=root}"
                         WidthRequest="{Binding ActualWidth, x:Reference=root}"/>
 </ContentView>

ch02_DesigningViews/ex_OutlineText/Views/LabelOutline.xaml.cs

@@ -15,7 +15,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(Text), 
                                   typeof(string),
                                   typeof(LabelOutline),
-                                  "something");
+                                  "something",
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public string Text
     {
@@ -27,7 +28,9 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(Fill), 
                                   typeof(Color),
                                   typeof(LabelOutline),
-                                  Colors.DarkSalmon);
+                                  Colors.DarkSalmon,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
+								  
 
     public Color Fill
     {
@@ -39,7 +42,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(Stroke), 
                                   typeof(Color),
                                   typeof(LabelOutline),
-                                  Colors.DarkSalmon);
+                                  Colors.DarkSalmon,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public Color Stroke
     {
@@ -51,7 +55,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(StrokeWidth), 
                                   typeof(float),
                                   typeof(LabelOutline),
-                                  1.0f);
+                                  1.0f,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public float StrokeWidth
     {
@@ -63,7 +68,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(FontFamily), 
                                   typeof(string),
                                   typeof(LabelOutline),
-                                  "something");
+                                  "something",
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public string FontFamily
     {
@@ -75,7 +81,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(TextSize), 
                                   typeof(float),
                                   typeof(LabelOutline),
-                                  24.0f);
+                                  24.0f,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public float TextSize
     {
@@ -87,7 +94,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(Aspect), 
                                   typeof(Aspect),
                                   typeof(LabelOutline),
-                                  Aspect.Center);
+                                  Aspect.Center,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
 	public Aspect Aspect
     {
@@ -99,7 +107,8 @@ public partial class LabelOutline : ContentView
         = BindableProperty.Create(nameof(Ratio), 
                                   typeof(float),
                                   typeof(LabelOutline),
-                                  0.95f);
+                                  0.95f,
+								  propertyChanged: (b, ov, nv) => (b as LabelOutline)?.canvasView.InvalidateSurface());
 
     public float Ratio
     {
@@ -110,13 +119,10 @@ public partial class LabelOutline : ContentView
 	private void OnPainting(object sender, SKPaintSurfaceEventArgs args)
 	{
 		SKImageInfo info = args.Info;
-		SKSurface surface = args.Surface;
+		SKCanvas canvas = args.Surface.Canvas;
-		SKCanvas canvas = surface.Canvas;
 
 		canvas.Clear();
 
-		string text = Text;
-
 		// Create an SKPaint object to display the text
 		SKPaint textPaint = new SKPaint
 		{
@@ -132,39 +138,37 @@ public partial class LabelOutline : ContentView
 		{
 			case Aspect.AspectFit:
 				float textHeight = Ratio * info.Height;
-				float textWidth2 = textPaint.MeasureText(text);
+				float textWidth2 = textPaint.MeasureText(Text);
 				textWidth2 = Ratio * info.Width * textPaint.TextSize / textWidth2;
 				textPaint.TextSize = Math.Min(textHeight, textWidth2);
-				Console.WriteLine($"info.Width: {info.Width} ; info.Height: {info.Height} ; textPaint.TextSize: {textPaint.TextSize} ; textHeight: {textHeight} ; textWidth: {textWidth2}");
 				break;
 			case Aspect.AspectFill:
 			case Aspect.Fill:
-				float textWidth = textPaint.MeasureText(text);
+				float textWidth = textPaint.MeasureText(Text);
 				textPaint.TextSize = Ratio * info.Width * textPaint.TextSize / textWidth;
-				Console.WriteLine($"info.Width: {info.Width} ; info.Height: {info.Height} ; textPaint.TextSize: {textPaint.TextSize}");
 				break;
 			case Aspect.Center:
 			default:
 				break;
 		}
-		// Adjust TextSize property so text is 95% of screen width
-		// float textWidth = textPaint.MeasureText(text);
-		// textPaint.TextSize = 0.95f * info.Width * textPaint.TextSize / textWidth;
 
 		// Find the text bounds
 		SKRect textBounds = new SKRect();
-		textPaint.MeasureText(text, ref textBounds);
+		textPaint.MeasureText(Text, ref textBounds);
 
 		// Calculate offsets to center the text on the screen
 		float xText = info.Width / 2 - textBounds.MidX;
 		float yText = info.Height / 2 - textBounds.MidY;
 
 		// And draw the text
-		canvas.DrawText(text, xText, yText, textPaint);
+		canvas.DrawText(Text, xText, yText, textPaint);
 
-		textPaint.Style = SKPaintStyle.Stroke;
+		if(StrokeWidth > 0.0f)
-		textPaint.Color = Stroke.ToSKColor();
+		{
+			textPaint.Style = SKPaintStyle.Stroke;
+			textPaint.Color = Stroke.ToSKColor();
 
-		canvas.DrawText(text, xText, yText, textPaint);
+			canvas.DrawText(Text, xText, yText, textPaint);
+		}
 	}
 }