Updated Sample App and refactored ProgressBar to fix iOS issue

src/AlohaKit.Gallery/AlohaKit.Gallery.csproj

@@ -51,8 +51,8 @@
 
 	<ItemGroup Condition="$(TargetFramework.Contains('-windows'))">
 		<!-- Required - WinUI does not yet have buildTransitive for everything -->
-		<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.1.3" />
-		<PackageReference Include="Microsoft.Graphics.Win2D" Version="1.0.3.1" />
+		<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.1.5" />
+		<PackageReference Include="Microsoft.Graphics.Win2D" Version="1.0.4" />
 	</ItemGroup>
 
 	<ItemGroup>

src/AlohaKit.Gallery/App.xaml

@@ -30,6 +30,10 @@
             <Color x:Key="DarkBorderColor">#ff77a9</Color>
 
             <!-- STYLES -->
+            <Style x:Key="SettingsSectionLayoutStyle" TargetType="Layout">
+                <Setter Property="Padding" Value="12" />
+            </Style>
+
             <Style x:Key="SectionTitleStyle" TargetType="Label">
                 <Setter Property="FontSize" Value="Small" />
                 <Setter Property="FontFamily" Value="Segoe UI" />

src/AlohaKit.Gallery/Views/LoadingView.xaml

@@ -7,10 +7,6 @@
     Title="Loading">
     <ContentPage.Resources>
         <ResourceDictionary>
-
-            <Style x:Key="SettingsSectionLayoutStyle" TargetType="Layout">
-                <Setter Property="Padding" Value="12" />
-            </Style>
 
             <Style x:Key="SettingsTextStyle" TargetType="Label">
                 <Setter Property="FontSize" Value="9" />

src/AlohaKit.Gallery/Views/PieChartView.xaml

@@ -12,7 +12,11 @@
 				<Setter Property="VerticalOptions" Value="Center" />
 				<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}" />
 			</Style>
-
+
+			<Style x:Key="SettingsTextStyle" TargetType="Label">
+				<Setter Property="FontSize" Value="9" />
+			</Style>
+
 		</ResourceDictionary>
 	</ContentPage.Resources>
 	<Grid>

src/AlohaKit.Gallery/Views/ProgressBarView.xaml

@@ -19,6 +19,12 @@
                 <Setter Property="FontSize" Value="9" />
             </Style>
 
+
+            <Style x:Key="SettingsCheckBoxStyle" TargetType="CheckBox">
+                <Setter Property="VerticalOptions" Value="Center" />
+                <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}" />
+            </Style>
+
             <Style x:Key="SettingsEntryStyle" TargetType="Entry">
                 <Setter Property="VerticalOptions" Value="Center" />
                 <Setter Property="WidthRequest" Value="80" />
@@ -148,14 +154,13 @@
                         TextChanged="OnProgressEndColorEntryTextChanged" />
                 </StackLayout>
             </StackLayout>
-           
+
             <Grid
                 Grid.Row="3"
                 ColumnDefinitions="Auto, Auto"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">
                 <controls:ProgressBar
-                    IsVertical="False"
                     WidthRequest="120"
                     HeightRequest="18"
                     x:Name="HorizontalProgressBar"

src/AlohaKit.Gallery/Views/ProgressBarView.xaml.cs

@@ -31,49 +31,49 @@ void OnProgressEndColorEntryTextChanged(object sender, TextChangedEventArgs e)
         UpdateBrushes();
     }
 
-    void UpdateBrushes()
-    {
-        var backgroundStartColor = GetColorFromString(BackgroundStartColorEntry.Text);
-        var backgroundEndColor = GetColorFromString(BackgroundEndColorEntry.Text);
+	void UpdateBrushes()
+	{
+		var backgroundStartColor = GetColorFromString(BackgroundStartColorEntry.Text);
+		var backgroundEndColor = GetColorFromString(BackgroundEndColorEntry.Text);
 
-        if (backgroundStartColor != null && backgroundEndColor != null)
-        {
-            BackgroundStartColorEntry.BackgroundColor = backgroundStartColor;
-            BackgroundEndColorEntry.BackgroundColor = backgroundEndColor;
+		if (backgroundStartColor != null && backgroundEndColor != null)
+		{
+			BackgroundStartColorEntry.BackgroundColor = backgroundStartColor;
+			BackgroundEndColorEntry.BackgroundColor = backgroundEndColor;
 
-            HorizontalProgressBar.Background = VerticalProgressBar.Background = new LinearGradientBrush
-            {
-                StartPoint = new Point(0, 0),
-                EndPoint = new Point(1, 0),
-                GradientStops = new GradientStopCollection
-                {
-                    new Microsoft.Maui.Controls.GradientStop { Color = backgroundStartColor, Offset = 0 },
-                    new Microsoft.Maui.Controls.GradientStop { Color = backgroundEndColor, Offset = 1 }
-                }
-            };
-        }
-        var progressStartColor = GetColorFromString(ProgressStartEntry.Text);
-        var progressEndColor = GetColorFromString(ProgressEndEntry.Text);
+			HorizontalProgressBar.StrokeBrush = VerticalProgressBar.StrokeBrush = new LinearGradientBrush
+			{
+				StartPoint = new Point(0, 0),
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new Microsoft.Maui.Controls.GradientStop { Color = backgroundStartColor, Offset = 0 },
+					new Microsoft.Maui.Controls.GradientStop { Color = backgroundEndColor, Offset = 1 }
+				}
+			};
+		}
+		var progressStartColor = GetColorFromString(ProgressStartEntry.Text);
+		var progressEndColor = GetColorFromString(ProgressEndEntry.Text);
 
-        if (progressStartColor != null && progressEndColor != null)
-        {
-            ProgressStartEntry.BackgroundColor = progressStartColor;
-            ProgressEndEntry.BackgroundColor = progressEndColor;
+		if (progressStartColor != null && progressEndColor != null)
+		{
+			ProgressStartEntry.BackgroundColor = progressStartColor;
+			ProgressEndEntry.BackgroundColor = progressEndColor;
 
-            HorizontalProgressBar.ProgressBrush = VerticalProgressBar.ProgressBrush = new LinearGradientBrush
-            {
-                StartPoint = new Point(0, 0),
-                EndPoint = new Point(1, 0),
-                GradientStops = new GradientStopCollection
-                {
-                    new Microsoft.Maui.Controls.GradientStop { Color = progressStartColor, Offset = 0 },
-                    new Microsoft.Maui.Controls.GradientStop { Color = progressEndColor, Offset = 1 }
-                }
-            };
-        }
-    }
+			HorizontalProgressBar.ProgressBrush = VerticalProgressBar.ProgressBrush = new LinearGradientBrush
+			{
+				StartPoint = new Point(0, 0),
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new Microsoft.Maui.Controls.GradientStop { Color = progressStartColor, Offset = 0 },
+					new Microsoft.Maui.Controls.GradientStop { Color = progressEndColor, Offset = 1 }
+				}
+			};
+		}
+	}
 
-    Color GetColorFromString(string value)
+	Color GetColorFromString(string value)
     {
         if (string.IsNullOrEmpty(value))
             return null;
@@ -91,14 +91,14 @@ Color GetColorFromString(string value)
     private void stylePicker_SelectedIndexChanged(object sender, EventArgs e)
     {
         var selectedItem = (sender as Picker).SelectedItem as string;
-        HorizontalProgressBar.RoundCorners = selectedItem == "Rounded" ? true : false;
-        VerticalProgressBar.RoundCorners = selectedItem == "Rounded" ? true : false;
-    }
+		HorizontalProgressBar.RoundCorners = selectedItem == "Rounded" ? true : false;
+		VerticalProgressBar.RoundCorners = selectedItem == "Rounded" ? true : false;
+	}
 
     private void CheckAnimate_CheckedChanged(object sender, CheckedChangedEventArgs e)
     {
         var isChecked = (sender as CheckBox).IsChecked;
-        HorizontalProgressBar.EnableAnimations = isChecked;
-        VerticalProgressBar.EnableAnimations = isChecked;
-    }
+		HorizontalProgressBar.EnableAnimations = isChecked;
+		VerticalProgressBar.EnableAnimations = isChecked;
+	}
 }

src/AlohaKit/Controls/ProgressBar/Drawable/ProgressBarDrawable.cs

@@ -0,0 +1,87 @@
+
+namespace AlohaKit.Controls
+{
+    public class ProgressBarDrawable : IDrawable
+	{
+		public Paint StrokePaint { get; set; }
+
+		public Paint ProgressPaint { get; set; }
+
+		public double Progress { get; set; }
+		public CornerRadius CornerRadius { get; set; } = 6f;
+		public ProgressBarStyle Style { get; set; }
+		public bool IsAnimating { get; set; }
+		public bool IsVertical { get; set; }
+
+		public void DrawChart(ICanvas canvas, RectF dirtyRect)
+        {
+            canvas.Antialias = true;
+
+            DrawTrack(canvas, dirtyRect);
+
+            DrawProgress(canvas, dirtyRect);
+        }
+
+		public void Draw(ICanvas canvas, RectF dirtyRect)
+		{ 
+			DrawChart(canvas, dirtyRect); 
+		}
+		public virtual void DrawTrack(ICanvas canvas, RectF dirtyRect)
+		{
+			canvas.SaveState();
+
+			canvas.SetFillPaint(StrokePaint, dirtyRect);
+
+			if (Style == ProgressBarStyle.Square)
+				canvas.FillRectangle(dirtyRect);
+			else
+				canvas.FillRoundedRectangle(dirtyRect,
+					CornerRadius.TopLeft,
+					CornerRadius.TopRight,
+					CornerRadius.BottomLeft,
+					CornerRadius.BottomRight);
+
+			canvas.RestoreState();
+		}
+
+		public virtual void DrawProgress(ICanvas canvas, RectF dirtyRect)
+		{
+			canvas.SaveState();
+
+			RectF rect;
+			if (IsVertical)
+			{
+
+				var progressHeight = dirtyRect.Height * Progress;
+				var progressY = dirtyRect.Y + dirtyRect.Height - progressHeight;
+
+				rect = new Rect(
+					dirtyRect.X,
+					progressY,
+					dirtyRect.Width,
+					progressHeight);
+			}
+			else
+			{
+				rect = new Rect(
+					dirtyRect.X,
+					dirtyRect.Y,
+					dirtyRect.Width * Progress,
+					dirtyRect.Height);
+			}
+
+			canvas.SetFillPaint(ProgressPaint, dirtyRect);
+
+			if (Style == ProgressBarStyle.Square)
+				canvas.FillRectangle(rect);
+			else
+				canvas.FillRoundedRectangle(rect,
+				CornerRadius.TopLeft,
+				CornerRadius.TopRight,
+				CornerRadius.BottomLeft,
+				CornerRadius.BottomRight);
+
+			canvas.RestoreState();
+		}
+	}
+}