#138 Add maui switch

Strypper · Jun 30, 2023 · c3640e4 · c3640e4
1 parent a852f81
commit c3640e4
Show file tree

Hide file tree

Showing 16 changed files with 695 additions and 3 deletions.
diff --git a/.../Pages/Community/MauiSwitch/ContentViews/CustomSwitches/DayAndNightSwitchContentView.xaml b/.../Pages/Community/MauiSwitch/ContentViews/CustomSwitches/DayAndNightSwitchContentView.xaml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView
+    x:Class="MAUIsland.DayAndNightSwitchContentView"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:switch="clr-namespace:IeuanWalker.Maui.Switch;assembly=IeuanWalker.Maui.Switch">
+    <switch:CustomSwitch
+        BackgroundColor="White"
+        HeightRequest="40"
+        IsToggled="{Binding IsToggled, Source={RelativeSource AncestorType={x:Type ContentView}}}"
+        KnobHeight="40"
+        KnobLimit="Boundary"
+        KnobStrokeThickness="1"
+        KnobWidth="60"
+        Stroke="DarkGray"
+        StrokeThickness="1"
+        SwitchPanUpdate="CustomSwitch_SwitchPanUpdate"
+        Toggled="CustomSwitch_Toggled"
+        ToggledCommand="{Binding ToggledCommand, Source={RelativeSource AncestorType={x:Type ContentView}}}"
+        WidthRequest="120">
+        <switch:CustomSwitch.StrokeShape>
+            <RoundRectangle CornerRadius="5" />
+        </switch:CustomSwitch.StrokeShape>
+        <switch:CustomSwitch.BackgroundContent>
+            <Grid
+                ColumnDefinitions="60,60"
+                HeightRequest="40"
+                WidthRequest="120">
+                <Label
+                    Grid.Column="0"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="13"
+                    HorizontalTextAlignment="Center"
+                    Text="OFF"
+                    TextColor="DarkGray"
+                    VerticalTextAlignment="Center" />
+                <Label
+                    Grid.Column="1"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="13"
+                    HorizontalTextAlignment="Center"
+                    Text="ON"
+                    TextColor="DarkGray"
+                    VerticalTextAlignment="Center" />
+            </Grid>
+        </switch:CustomSwitch.BackgroundContent>
+
+        <switch:CustomSwitch.KnobContent>
+            <Grid
+                x:Name="KnobContent"
+                Margin="60,0,0,0"
+                ColumnDefinitions="60,60"
+                HeightRequest="40"
+                WidthRequest="120">
+                <Label
+                    Grid.Column="0"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="13"
+                    HorizontalTextAlignment="Center"
+                    Text="OFF"
+                    TextColor="#dd2424"
+                    VerticalTextAlignment="Center" />
+                <Label
+                    Grid.Column="1"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="13"
+                    HorizontalTextAlignment="Center"
+                    Text="ON"
+                    TextColor="#46d744"
+                    VerticalTextAlignment="Center" />
+            </Grid>
+        </switch:CustomSwitch.KnobContent>
+    </switch:CustomSwitch>
+</ContentView>
diff --git a/...ges/Community/MauiSwitch/ContentViews/CustomSwitches/DayAndNightSwitchContentView.xaml.cs b/...ges/Community/MauiSwitch/ContentViews/CustomSwitches/DayAndNightSwitchContentView.xaml.cs
@@ -0,0 +1,67 @@
+using IeuanWalker.Maui.Switch;
+using IeuanWalker.Maui.Switch.Events;
+using IeuanWalker.Maui.Switch.Helpers;
+using Microsoft.Maui.Controls.Shapes;
+
+namespace MAUIsland;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+public partial class DayAndNightSwitchContentView : ContentView
+{
+	public DayAndNightSwitchContentView()
+	{
+		InitializeComponent();
+    }
+    public event EventHandler<ToggledEventArgs>? Toggled = null;
+
+    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(DayAndNightSwitchContentView), 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(DayAndNightSwitchContentView));
+
+    public ICommand ToggledCommand
+    {
+        get => (ICommand)GetValue(ToggledCommandProperty);
+        set => SetValue(ToggledCommandProperty, value);
+    }
+
+    void CustomSwitch_SwitchPanUpdate(CustomSwitch customSwitch, SwitchPanUpdatedEventArgs e)
+    {
+        KnobContent.TranslationX = -(e.TranslateX + e.XRef);
+
+        Color fromColorLight = e.IsToggled ? Color.FromArgb("#cdf4cc") : Color.FromArgb("#f7cccc");
+        Color toColorLight = e.IsToggled ? Color.FromArgb("#f7cccc") : Color.FromArgb("#cdf4cc");
+
+        Color fromColorDark = e.IsToggled ? Color.FromArgb("#46d744") : Color.FromArgb("#dd2424");
+        Color toColorDark = e.IsToggled ? Color.FromArgb("#dd2424") : Color.FromArgb("#46d744");
+
+        double t = e.Percentage * 0.01;
+
+        double zeroToFive = Calculate(0, 5, t);
+        double fiveToZero = Calculate(5, 0, t);
+
+        customSwitch.KnobStrokeShape = new RoundRectangle
+        {
+            CornerRadius = e.IsToggled ?
+                new CornerRadius(zeroToFive, fiveToZero, zeroToFive, fiveToZero) :
+                new CornerRadius(fiveToZero, zeroToFive, fiveToZero, zeroToFive)
+        };
+        customSwitch.KnobBackgroundColor = ColorAnimationUtil.ColorAnimation(fromColorLight, toColorLight, t);
+        customSwitch.KnobStroke = ColorAnimationUtil.ColorAnimation(fromColorDark, toColorDark, t);
+    }
+
+    void CustomSwitch_Toggled(object sender, ToggledEventArgs e)
+    {
+        Toggled?.Invoke(sender, e);
+    }
+
+    public static double Calculate(double from, double to, double percentage)
+    {
+        return from + ((to - from) * percentage);
+    }
+}
diff --git a/.../Gallery/Pages/Community/MauiSwitch/ContentViews/CustomSwitches/IosSwitchContentView.xaml b/.../Gallery/Pages/Community/MauiSwitch/ContentViews/CustomSwitches/IosSwitchContentView.xaml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView
+    x:Class="MAUIsland.IosSwitchContentView"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:switch="clr-namespace:IeuanWalker.Maui.Switch;assembly=IeuanWalker.Maui.Switch"
+    x:Name="root">
+    <switch:CustomSwitch
+        HeightRequest="40"
+        HorizontalKnobMargin="1"
+        IsToggled="{Binding IsToggled, Source={x:Reference root}}"
+        KnobBackgroundColor="White"
+        KnobHeight="36"
+        KnobLimit="Boundary"
+        KnobWidth="36"
+        SemanticProperties.Hint="{Binding AccessibilityHint, Source={x:Reference root}}"
+        SwitchPanUpdate="CustomSwitch_SwitchPanUpdate"
+        Toggled="CustomSwitch_Toggled"
+        ToggledCommand="{Binding ToggledCommand, Source={x:Reference root}}"
+        WidthRequest="70">
+        <switch:CustomSwitch.StrokeShape>
+            <RoundRectangle CornerRadius="20" />
+        </switch:CustomSwitch.StrokeShape>
+        <switch:CustomSwitch.KnobStrokeShape>
+            <RoundRectangle CornerRadius="18" />
+        </switch:CustomSwitch.KnobStrokeShape>
+        <switch:CustomSwitch.BackgroundContent>
+            <Grid
+                ColumnDefinitions="35,35"
+                HeightRequest="40"
+                WidthRequest="70">
+                <Label
+                    Grid.Column="0"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="12"
+                    HorizontalOptions="Center"
+                    Text=" |"
+                    TextColor="White"
+                    VerticalTextAlignment="Center" />
+                <Label
+                    Grid.Column="1"
+                    FontAttributes="Bold"
+                    FontAutoScalingEnabled="False"
+                    FontSize="12"
+                    HorizontalOptions="Center"
+                    Text="〇"
+                    TextColor="#BBBBBB"
+                    VerticalTextAlignment="Center" />
+            </Grid>
+        </switch:CustomSwitch.BackgroundContent>
+    </switch:CustomSwitch>
+</ContentView>
diff --git a/...llery/Pages/Community/MauiSwitch/ContentViews/CustomSwitches/IosSwitchContentView.xaml.cs b/...llery/Pages/Community/MauiSwitch/ContentViews/CustomSwitches/IosSwitchContentView.xaml.cs
@@ -0,0 +1,63 @@
+using IeuanWalker.Maui.Switch;
+using IeuanWalker.Maui.Switch.Events;
+using IeuanWalker.Maui.Switch.Helpers;
+
+namespace MAUIsland;
+
+[XamlCompilation(XamlCompilationOptions.Compile)]
+public partial class IosSwitchContentView : ContentView
+{
+    #region [ CTor ]
+
+    public IosSwitchContentView()
+    {
+        InitializeComponent();
+    }
+    #endregion
+
+    #region [ Properties ]
+    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(IosSwitchContentView), false, BindingMode.TwoWay);
+
+    public bool IsToggled
+    {
+        get => (bool)GetValue(IsToggledProperty);
+        set => SetValue(IsToggledProperty, value);
+    }
+
+    public static readonly BindableProperty AccessibilityHintProperty = BindableProperty.Create(nameof(AccessibilityHint), typeof(string), typeof(IosSwitchContentView), 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(IosSwitchContentView));
+
+    public ICommand ToggledCommand
+    {
+        get => (ICommand)GetValue(ToggledCommandProperty);
+        set => SetValue(ToggledCommandProperty, value);
+    }
+    #endregion
+
+    #region [ Event Handlers ]
+    public event EventHandler<ToggledEventArgs>? Toggled = null;
+
+    void CustomSwitch_SwitchPanUpdate(CustomSwitch customSwitch, SwitchPanUpdatedEventArgs e)
+    {
+        //Color Animation
+        Color fromColor = e.IsToggled ? Color.FromArgb("#4ACC64") : Color.FromArgb("#EBECEC");
+        Color toColor = e.IsToggled ? Color.FromArgb("#EBECEC") : Color.FromArgb("#4ACC64");
+
+        double t = e.Percentage * 0.01;
+
+        customSwitch.BackgroundColor = ColorAnimationUtil.ColorAnimation(fromColor, toColor, t);
+    }
+
+    void CustomSwitch_Toggled(object sender, ToggledEventArgs e)
+    {
+        Toggled?.Invoke(sender, e);
+    }
+    #endregion
+}
diff --git a/src/Features/Gallery/Pages/Community/MauiSwitch/MauiSwitchControlInfo.cs b/src/Features/Gallery/Pages/Community/MauiSwitch/MauiSwitchControlInfo.cs
@@ -0,0 +1,15 @@
+namespace MAUIsland.Gallery.Community;
+class MauiSwitchControlInfo : IControlInfo 
+{
+    public string ControlName => nameof(IeuanWalker.Maui.Switch);
+    public string ControlRoute => typeof(MauiSwitchPage).FullName;
+    public ImageSource ControlIcon => new FontImageSource()
+    {
+        FontFamily = FontNames.FluentSystemIconsRegular,
+        Glyph = FluentUIIcon.Ic_fluent_toggle_left_24_regular
+    };
+    public string ControlDetail => "This is a switch/ toggle control that would allow you to create any style switch you'd like. This component is built on top/ from this great libary - Global.InputForms. Fixes a few issues, adds more options for styling and improved accessibility.";
+    public string GitHubUrl => $"https://github.com/Strypper/mauisland/tree/main/src/Features/Gallery/Pages/Community/{ControlName}";
+    public string DocumentUrl => $"https://github.com/IeuanWalker/Maui.Switch";
+    public string GroupName => ControlGroupInfo.GitHubCommunity;
+}