✨ update last two samples

ch02_DesigningViews/ex_OutlineText/MainPage.xaml

@@ -6,14 +6,89 @@
 
     <ScrollView>
         <VerticalStackLayout
-            Padding="30,0"
-            Spacing="25">
+            Padding="4,0"
+            Spacing="10">
+            <Label Text="Truc" FontFamily="Equestria" FontSize="42" HorizontalOptions="Center"/>
+            
+            <Label Text="Aspect: AspectFit ; TextSize: 200 ; HeightRequest: 50 ; Ratio: 1.0" FontSize="12" HorizontalOptions="Start"/>
+            <views:LabelOutline Text="Truc"
+                                Stroke="Red"
+                                Fill="Yellow"
+                                StrokeWidth="1"
+                                HeightRequest="50"
+                                WidthRequest="200"
+                                FontFamily="Equestria"
+                                TextSize="200"
+                                Aspect="AspectFit"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="1.0"/>
+
+            <Label Text="Aspect: AspectFit ; TextSize: 200 ; HeightRequest: 50 ; Ratio: 0.7" FontSize="12" HorizontalOptions="Start"/>
+            <views:LabelOutline Text="Truc"
+                                Stroke="Red"
+                                Fill="Yellow"
+                                StrokeWidth="1"
+                                HeightRequest="50"
+                                WidthRequest="200"
+                                FontFamily="Equestria"
+                                TextSize="200"
+                                Aspect="AspectFit"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="0.7"/>
+        
+            <Label Text="Aspect: AspectFill ; TextSize: 120 ; HeightRequest: 50 ; Ratio: 0.9" FontSize="12" HorizontalOptions="Start"/>
+            <views:LabelOutline Text="Truc"
+                                Stroke="Red"
+                                Fill="Yellow"
+                                StrokeWidth="1"
+                                HeightRequest="50"
+                                WidthRequest="200"
+                                FontFamily="Equestria"
+                                TextSize="120"
+                                Aspect="AspectFill"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="0.9"/>
+
+            <Label Text="Aspect: AspectFill ; TextSize: 120 ; HeightRequest: 50 ; Ratio: 0.9"
+                   FontSize="12" HorizontalOptions="Start"/>
             <views:LabelOutline Text="Machin"
                                 Stroke="Red"
                                 Fill="Yellow"
-                                StrokeWidth="2"/>
+                                StrokeWidth="1"
+                                HeightRequest="50"
+                                WidthRequest="80"
+                                FontFamily="Equestria"
+                                TextSize="120"
+                                Aspect="AspectFill"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="0.9"/>
+        
+            <Label Text="Aspect: Center ; TextSize: 170 ; HeightRequest: 30 ; Ratio: 0.9" FontSize="12" HorizontalOptions="Start"/>
+            <views:LabelOutline Text="Machin"
+                                Stroke="Red"
+                                Fill="Yellow"
+                                StrokeWidth="1"
+                                HeightRequest="30"
+                                WidthRequest="200"
+                                FontFamily="Equestria"
+                                TextSize="170"
+                                Aspect="Center"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="0.9"/>
+
+            <Label Text="Aspect: Center ; TextSize: 50 ; HeightRequest: 50 ; Ratio: 0.9" FontSize="12" HorizontalOptions="Start"/>
+            <views:LabelOutline Text="Truc"
+                                Stroke="Red"
+                                Fill="Yellow"
+                                StrokeWidth="1"
+                                HeightRequest="50"
+                                WidthRequest="200"
+                                FontFamily="Equestria"
+                                TextSize="50"
+                                Aspect="Center"
+                                BackgroundColor="DarkSalmon"
+                                Ratio="0.9"/>
 
         </VerticalStackLayout>
     </ScrollView>
-
 </ContentPage>

ch02_DesigningViews/ex_OutlineText/MainPage.xaml.cs

@@ -9,40 +9,5 @@ public partial class MainPage : ContentPage
 	{
 		InitializeComponent();
 	}
-
-	private void OnPainting(object sender, SKPaintSurfaceEventArgs args)
-	{
-		SKImageInfo info = args.Info;
-		SKSurface surface = args.Surface;
-		SKCanvas canvas = surface.Canvas;
-
-		canvas.Clear();
-
-		string text = "OUTLINE";
-
-		// Create an SKPaint object to display the text
-		SKPaint textPaint = new SKPaint
-		{
-			Style = SKPaintStyle.Stroke,
-			StrokeWidth = 1,
-			FakeBoldText = true,
-			Color = SKColors.Blue
-		};
-
-		// 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);
-
-		// 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);
-	}
 }
 

ch02_DesigningViews/ex_OutlineText/MauiProgram.cs

@@ -15,6 +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");
 			});
 
 #if DEBUG

ch02_DesigningViews/ex_OutlineText/Views/LabelOutline.xaml

@@ -2,8 +2,9 @@
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:views="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
-             x:Class="ex_OutlineText.Views.LabelOutline">
+             x:Class="ex_OutlineText.Views.LabelOutline"
+             x:Name="root">
     <views:SKCanvasView PaintSurface="OnPainting"
-                        HeightRequest="500"
-                        WidthRequest="300"/>
+                        HeightRequest="{Binding ActualHeight, x:Reference=root}"
+                        WidthRequest="{Binding ActualWidth, x:Reference=root}"/>
 </ContentView>

ch02_DesigningViews/ex_OutlineText/Views/LabelOutline.xaml.cs

@@ -1,3 +1,4 @@
+using System.Diagnostics;
 using SkiaSharp;
 using SkiaSharp.Views.Maui;
 
@@ -58,6 +59,54 @@ public partial class LabelOutline : ContentView
         set { SetValue(StrokeWidthProperty, value); }
 	}
 
+	public static readonly BindableProperty FontFamilyProperty 
+        = BindableProperty.Create(nameof(FontFamily), 
+                                  typeof(string),
+                                  typeof(LabelOutline),
+                                  "something");
+
+    public string FontFamily
+    {
+        get { return (string)GetValue(FontFamilyProperty); }
+        set { SetValue(FontFamilyProperty, value); }
+	}
+
+	public static readonly BindableProperty TextSizeProperty 
+        = BindableProperty.Create(nameof(TextSize), 
+                                  typeof(float),
+                                  typeof(LabelOutline),
+                                  24.0f);
+
+    public float TextSize
+    {
+        get { return (float)GetValue(TextSizeProperty); }
+        set { SetValue(TextSizeProperty, value); }
+	}
+
+	public static readonly BindableProperty AspectProperty 
+        = BindableProperty.Create(nameof(Aspect), 
+                                  typeof(Aspect),
+                                  typeof(LabelOutline),
+                                  Aspect.Center);
+
+	public Aspect Aspect
+    {
+        get { return (Aspect)GetValue(AspectProperty); }
+        set { SetValue(AspectProperty, value); }
+	}
+
+	public static readonly BindableProperty RatioProperty 
+        = BindableProperty.Create(nameof(Ratio), 
+                                  typeof(float),
+                                  typeof(LabelOutline),
+                                  0.95f);
+
+    public float Ratio
+    {
+        get { return (float)GetValue(RatioProperty); }
+        set { SetValue(RatioProperty, value); }
+	}
+
 	private void OnPainting(object sender, SKPaintSurfaceEventArgs args)
 	{
 		SKImageInfo info = args.Info;
@@ -74,12 +123,33 @@ public partial class LabelOutline : ContentView
 			Style = SKPaintStyle.Fill,
 			StrokeWidth = StrokeWidth,
 			FakeBoldText = true,
-			Color = Fill.ToSKColor()
+			Typeface = SKTypeface.FromFamilyName(FontFamily),
+			Color = Fill.ToSKColor(),
+			TextSize = TextSize
 		};
 
+		switch(Aspect)
+		{
+			case Aspect.AspectFit:
+				float textHeight = Ratio * info.Height;
+				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);
+				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;
+		// float textWidth = textPaint.MeasureText(text);
+		// textPaint.TextSize = 0.95f * info.Width * textPaint.TextSize / textWidth;
 
 		// Find the text bounds
 		SKRect textBounds = new SKRect();

ch02_DesigningViews/ex_ShadowLabel/MainPage.xaml

@@ -6,17 +6,17 @@
 
         <VerticalStackLayout
             Padding="30,0"
-            Spacing="25">
+            Spacing="25" 
+            BackgroundColor="LightSalmon">
             <Label
                 Text="Hello, World!"
-                TextColor="DarkSalmon"
                 Style="{StaticResource Headline}"
-                SemanticProperties.HeadingLevel="Level1">
+                TextColor="DarkSalmon">
                 <Label.Shadow>
                     <Shadow
                         Opacity="1"
-                        Radius="10"
-                        Offset="10,10">
+                        Radius="4"
+                        Offset="4,2">
                         <Shadow.Brush>
                             <LinearGradientBrush>
                                 <GradientStop Offset="0.1" Color="Black" />

ch02_DesigningViews/ex_ShadowLabel/ex_ShadowLabel.csproj

@@ -14,17 +14,17 @@
 		<!-- For example: <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers> -->
 
 		<OutputType>Exe</OutputType>
-		<RootNamespace>ex_VeryStyledLabel</RootNamespace>
+		<RootNamespace>ex_OutlineText</RootNamespace>
 		<UseMaui>true</UseMaui>
 		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<Nullable>enable</Nullable>
 
 		<!-- Display name -->
-		<ApplicationTitle>ex_VeryStyledLabel</ApplicationTitle>
+		<ApplicationTitle>ex_OutlineText</ApplicationTitle>
 
 		<!-- App Identifier -->
-		<ApplicationId>com.companyname.ex_verystyledlabel</ApplicationId>
+		<ApplicationId>com.companyname.ex_outlinetext</ApplicationId>
 
 		<!-- Versions -->
 		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>