ieuanwalker / maui.switch

Simple control to create custom switches in .NET MAUI

                             

I am a full stack senior software engineer working on websites, backend and mobile. My main passion is learning new things, and if i build something cool or usefull i try to turn it into a OSS project. Some of the technologies I enjoy working with include .NET Core, razor pages, web API's (REST), .NET MAUI, and Xamarin.Forms.

Check out my repos

maui.switch's Issues

CustomSwitch1 does not show Text on right side on iOS

When the switch is toggled left (off) all text shows correctly. When the switch is toggled to the right, the text on the knob disappears.
I've only tested this on iOS 15.0 on an iPhone 12 Pro Simulator so far. This is not an issue on Android.
Here is a short video of the issue:
https://app.screencast.com/HDcO79YkiOvE5?conversation=B9WZApSOeY9gXKXsqdiRbI

[Enhancement] Allow setting true/false accessibility text

Android is possible, but atm cant see a way of doing it on iOS

Android

Add the following method into the platform view to prevent the default announcement -

public override void SendAccessibilityEventUnchecked(AccessibilityEvent? e)
{
	//! important - used to override the default On/Off announcement when it is toggled. Now handled manually in the `SetIsToggled` method
	if (e?.EventType.Equals(EventTypes.ViewClicked) ?? false)
	{
		return;
	}

	base.SendAccessibilityEventUnchecked(e);
}

Then perform manual announcement on IsToggledChanged -

public void SetIsToggled()
{
	AnnounceForAccessibility(_switchView.IsToggled ? _textOn : _textOff);
}

iOS

Cant see a simple way of doing it. By the looks of it the only possible way is by overriding everything, including the 'Double tap to toggle setting'. And rather not handle that text my self as using the built in text will auto use the systems language.

https://stackoverflow.com/questions/52230673/how-can-i-make-an-arbitrary-uiaccessibilityelement-behave-like-a-uiswitch-for-vo

[Enhancement] Support IsBusy

Allow the user to create an IsBusy state -
https://help.syncfusion.com/xamarin/switch/how-to#show-busy-indicator-to-perform-async-action

Just need a new bool property added + new content property, and the content need to overlay the entire switch

[Enhancement] Indeterminate switch

hi
I want to 3 step switch like this and demo can do with Xamarin Forms Custom Switch package?

[Enhancement] Support IsEnabled

Atm the control ignores the IsEnabled property

[Improvement] Remove the need for TapGestureRecognizer on the SwitchView

Currently any control built from the SwitchView needs to add a TapGestureRecognizer to toggle the IsToggled property.

void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
	IsToggled = !IsToggled;
}

If we can move this logic to the control it self, its just one less thing for people to do

🐞WinUI Crash

Exception

Microsoft.UI.Xaml.Controls.Frame.NavigationFailed was unhandled.

Implementation

<?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>

using IeuanWalker.Maui.Switch;
using IeuanWalker.Maui.Switch.Events;
using IeuanWalker.Maui.Switch.Helpers;

namespace MAUIsland;

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;

    static 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
}