Update

Demo/App/App.csproj

@@ -55,12 +55,14 @@
 
 	<ItemGroup>
 	  <None Remove="Resources\Fonts\FA-Solid-900.otf" />
+	  <None Remove="Resources\Raw\lottieSwitch1.json" />
 	</ItemGroup>
 
 	<ItemGroup>
 	  <PackageReference Include="CommunityToolkit.Maui" Version="5.0.0" />
 	  <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
 	  <PackageReference Include="IeuanWalker.Maui.StateButton" Version="1.0.1" />
+	  <PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.61" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -107,6 +109,12 @@
 	  <MauiXaml Update="Controls\CustomSwitchExamples\Theme2Switch.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Controls\SwitchViewExamples\BorderSwitch.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	  <MauiXaml Update="Controls\SwitchViewExamples\ImageSwitch.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Pages\AccessiblityTestPage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
@@ -118,8 +126,4 @@
 	  </MauiXaml>
 	</ItemGroup>
 
-	<ItemGroup>
-	  <Folder Include="Examples\" />
-	</ItemGroup>
-
 </Project>

Demo/App/Controls/CustomSwitchExamples/IosSwitch.xaml

@@ -10,6 +10,7 @@
                          KnobHeight="36"
                          KnobLimit="Boundary"
                          KnobWidth="36"
+                         SemanticProperties.Hint="{Binding AccessibilityHint, Source={RelativeSource AncestorType={x:Type ContentView}}}"
                          SwitchPanUpdate="CustomSwitch_SwitchPanUpdate"
                          Toggled="CustomSwitch_Toggled"
                          ToggledCommand="{Binding ToggledCommand, Source={RelativeSource AncestorType={x:Type ContentView}}}"

Demo/App/Controls/CustomSwitchExamples/IosSwitch.xaml.cs

@@ -21,6 +21,13 @@ public bool IsToggled
 		get => (bool)GetValue(IsToggledProperty);
 		set => SetValue(IsToggledProperty, value);
 	}
+	public static readonly BindableProperty AccessibilityHintProperty = BindableProperty.Create(nameof(AccessibilityHint), typeof(string), typeof(IosSwitch), string.Empty);
+	public string AccessibilityHint
+	{
+		get => (string)GetValue(AccessibilityHintProperty);
+		set => SetValue(AccessibilityHintProperty, value);
+	}
+
 
 	public static readonly BindableProperty ToggledCommandProperty = BindableProperty.Create(nameof(ToggledCommand), typeof(ICommand), typeof(IosSwitch));
 

Demo/App/Controls/SwitchViewExamples/BorderSwitch.xaml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<view:SwitchView x:Class="App.Controls.SwitchViewExamples.BorderSwitch"
+                 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:view="clr-namespace:IeuanWalker.Maui.Switch;assembly=IeuanWalker.Maui.Switch">
+    <view:SwitchView.GestureRecognizers>
+        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
+    </view:SwitchView.GestureRecognizers>
+    <Border x:Name="SwitchBackground"
+            Padding="16,8"
+            Background="#2B0B98"
+            HorizontalOptions="Center"
+            Loaded="SwitchBackground_Loaded"
+            MinimumWidthRequest="100"
+            StrokeThickness="4">
+        <Label x:Name="SwitchText"
+               FontAttributes="Bold"
+               FontSize="18"
+               HorizontalTextAlignment="Center"
+               TextColor="White" />
+    </Border>
+</view:SwitchView>

Demo/App/Controls/SwitchViewExamples/BorderSwitch.xaml.cs

@@ -0,0 +1,122 @@
+using IeuanWalker.Maui.Switch;
+using Microsoft.Maui.Controls.Shapes;
+
+namespace App.Controls.SwitchViewExamples;
+
+public partial class BorderSwitch : SwitchView
+{
+	public BorderSwitch()
+	{
+		InitializeComponent();
+	}
+
+	void SwitchBackground_Loaded(object sender, EventArgs e)
+	{
+		StyleSwitch();
+	}
+
+	void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
+	{
+		IsToggled = !IsToggled;
+		InvokeToggled();
+		StyleSwitch();
+	}
+
+	void StyleSwitch()
+	{
+		if (IsToggled)
+		{
+			SwitchBackground.StrokeShape = new RoundRectangle
+			{
+				CornerRadius = new CornerRadius(40, 0, 40, 0)
+			};
+			SwitchBackground.Stroke = new LinearGradientBrush()
+			{
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new GradientStop
+					{
+						Offset = 0.1f,
+						Color = Colors.Transparent
+					},
+					new GradientStop
+					{
+						Offset = 1f,
+						Color = Color.FromArgb("#a8ff78")
+					}
+				}
+			};
+			SwitchBackground.Background = new LinearGradientBrush()
+			{
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new GradientStop
+					{
+						Offset = 0.1f,
+						Color = Colors.Transparent
+					},
+					new GradientStop
+					{
+						Offset = 0.5f,
+						Color = Color.FromArgb("#78ffd6")
+					},
+					new GradientStop
+					{
+						Offset = 1f,
+						Color = Color.FromArgb("#a8ff78")
+					}
+				}
+			};
+			SwitchText.Text = "On";
+		}
+		else
+		{
+			SwitchBackground.StrokeShape = new RoundRectangle
+			{
+				CornerRadius = new CornerRadius(0, 40, 0, 40)
+			};
+			SwitchBackground.Stroke = new LinearGradientBrush()
+			{
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new GradientStop
+					{
+						Offset = 0.1f,
+						Color = Color.FromArgb("#FF512F")
+					},
+					new GradientStop
+					{
+						Offset = 1f,
+						Color = Colors.Transparent
+					}
+				}
+			};
+			SwitchBackground.Background = new LinearGradientBrush()
+			{
+				EndPoint = new Point(1, 0),
+				GradientStops = new GradientStopCollection
+				{
+					new GradientStop
+					{
+						Offset = 0.1f,
+						Color = Color.FromArgb("#DD2476")
+					},
+					new GradientStop
+					{
+						Offset = 0.5f,
+						Color = Color.FromArgb("#FF512F")
+					},
+					new GradientStop
+					{
+						Offset = 1f,
+						Color = Colors.Transparent
+					}
+				}
+			};
+			SwitchText.Text = "Off";
+		}
+	}
+}

Demo/App/Controls/SwitchViewExamples/ImageSwitch.xaml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<view:SwitchView x:Class="App.Controls.SwitchViewExamples.ImageSwitch"
+                 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:view="clr-namespace:IeuanWalker.Maui.Switch;assembly=IeuanWalker.Maui.Switch">
+    <view:SwitchView.GestureRecognizers>
+        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
+    </view:SwitchView.GestureRecognizers>
+    <Image x:Name="SwitchImage"
+           HeightRequest="50"
+           Loaded="SwitchImage_Loaded"
+           WidthRequest="50" />
+</view:SwitchView>

Demo/App/Controls/SwitchViewExamples/ImageSwitch.xaml.cs

@@ -0,0 +1,28 @@
+using IeuanWalker.Maui.Switch;
+
+namespace App.Controls.SwitchViewExamples;
+
+public partial class ImageSwitch : SwitchView
+{
+	public ImageSwitch()
+	{
+		InitializeComponent();
+	}
+
+	void SwitchImage_Loaded(object sender, EventArgs e)
+	{
+		StyleSwitch();
+	}
+
+	void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
+	{
+		IsToggled = !IsToggled;
+		InvokeToggled();
+		StyleSwitch();
+	}
+
+	void StyleSwitch()
+	{
+		SwitchImage.Source = ImageSource.FromFile(IsToggled ? "sun_icon" : "moon_icon");
+	}
+}

Demo/App/MauiProgram.cs

@@ -1,6 +1,7 @@
 using CommunityToolkit.Maui;
 using IeuanWalker.Maui.Switch;
 using StateButton;
+using SkiaSharp.Views.Maui.Controls.Hosting;
 
 namespace App;
 
@@ -19,6 +20,7 @@ public static MauiApp CreateMauiApp()
 				fonts.AddFont("FA-Solid-900.otf", "FASolid900");
 			})
 			.UseCustomSwitch()
+			.UseSkiaSharp()
 			.ConfigureStateButton();
 
 		return builder.Build();

Demo/App/Pages/AccessiblityTestPage.xaml

@@ -9,6 +9,21 @@
     <ScrollView>
         <VerticalStackLayout>
             <controls:BackButton />
+
+            <Label Style="{StaticResource sectionHeading}" Text="Standard switch" />
+            <Switch HorizontalOptions="Center" />
+            <Switch HorizontalOptions="Center" IsToggled="True" />
+            <examples:IosSwitch />
+            <examples:IosSwitch IsToggled="True" />
+            <Border Style="{StaticResource divider}" />
+
+            <Label Style="{StaticResource sectionHeading}" Text="With hint" />
+            <Switch HorizontalOptions="Center" SemanticProperties.Hint="Would you like to be contacted?" />
+            <Switch HorizontalOptions="Center"
+                    IsToggled="True"
+                    SemanticProperties.Hint="Would you like to be contacted?" />
+            <examples:IosSwitch AccessibilityHint="Would you like to be contacted?" />
+            <examples:IosSwitch AccessibilityHint="Would you like to be contacted?" IsToggled="True" />
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>

Demo/App/Pages/SwitchViewPage.xaml

@@ -3,7 +3,8 @@
              xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:controls="clr-namespace:App.Controls;assembly=App"
-             xmlns:examples="clr-namespace:App.Controls.CustomSwitchExamples;assembly=App"
+             xmlns:examples="clr-namespace:App.Controls.SwitchViewExamples;assembly=App"
+             xmlns:examples1="clr-namespace:App.Controls.CustomSwitchExamples;assembly=App"
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              xmlns:viewModel="clr-namespace:App.ViewModels;assembly=App"
              Title="Switch View Page"
@@ -33,20 +34,34 @@
                                Text="Enable toggle events: "
                                TextColor="DarkGray"
                                VerticalTextAlignment="Center" />
-                        <examples:IosSwitch Grid.Row="0"
-                                            Grid.Column="1"
-                                            IsToggled="{Binding EnableEvents}" />
+                        <examples1:IosSwitch Grid.Row="0"
+                                             Grid.Column="1"
+                                             IsToggled="{Binding EnableEvents}" />
                         <Label Grid.Row="1"
                                Grid.Column="0"
                                Text="Enable toggle commands: "
                                TextColor="DarkGray"
                                VerticalTextAlignment="Center" />
-                        <examples:IosSwitch Grid.Row="1"
-                                            Grid.Column="1"
-                                            IsToggled="{Binding EnableCommands}" />
+                        <examples1:IosSwitch Grid.Row="1"
+                                             Grid.Column="1"
+                                             IsToggled="{Binding EnableCommands}" />
                     </Grid>
                 </toolkit:Expander>
             </Border>
+
+            <Label Style="{StaticResource sectionHeading}" Text="Border switch" />
+            <examples:BorderSwitch Toggled="Switch_OnToggled" ToggledCommand="{Binding ToggledCommand}" />
+            <examples:BorderSwitch IsToggled="True"
+                                   Toggled="Switch_OnToggled"
+                                   ToggledCommand="{Binding ToggledCommand}" />
+
+            <Border Style="{StaticResource divider}" />
+
+            <Label Style="{StaticResource sectionHeading}" Text="Image switch" />
+            <examples:ImageSwitch Toggled="Switch_OnToggled" ToggledCommand="{Binding ToggledCommand}" />
+            <examples:ImageSwitch IsToggled="True"
+                                  Toggled="Switch_OnToggled"
+                                  ToggledCommand="{Binding ToggledCommand}" />
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>

Scr/Switch/SwitchView.cs

@@ -5,14 +5,14 @@ namespace IeuanWalker.Maui.Switch;
 
 public class SwitchView : ContentView, ISwitchView
 {
-	public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(CustomSwitch), false, BindingMode.TwoWay);
+	public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(SwitchView), false, BindingMode.TwoWay);
 	public bool IsToggled
 	{
 		get => (bool)GetValue(IsToggledProperty);
 		set => SetValue(IsToggledProperty, value);
 	}
 
-	public static readonly BindableProperty ToggledCommandProperty = BindableProperty.Create(nameof(ToggledCommand), typeof(ICommand), typeof(CustomSwitch));
+	public static readonly BindableProperty ToggledCommandProperty = BindableProperty.Create(nameof(ToggledCommand), typeof(ICommand), typeof(SwitchView));
 	public ICommand ToggledCommand
 	{
 		get => (ICommand)GetValue(ToggledCommandProperty);