I have been working on Toggle button re-usable control, that would have 3 states. However I am facing some problems. I am not sure how to proceed forward and connect all together. Currently it looks like my code behind is not attached to XAML as nothing happens once clicking the button? Is there any good similar example available or can somebody provide some hints what is wrong? Also I am not aware how to extend it to 3 states... Basically I need three states with own colours like this:

MyCustomToggleButton.xaml:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Dash.Controls.MyCustomToggleButton">

    <Button>
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="ToggleStates">
          <VisualState Name="Unactive">
            <VisualState.Setters>
              <Setter Property="Text" Value="D" />
              <Setter Property="FontSize" Value="14" />
              <Setter Property="BackgroundColor" Value="#474747" />
              <Setter Property="TextColor" Value="White" />
            </VisualState.Setters>
          </VisualState>
          <VisualState Name="Active">
            <VisualState.Setters>
              <Setter Property="Text" Value="D" />
              <Setter Property="FontSize" Value="14" />
              <Setter Property="BackgroundColor" Value="#20962d" />
              <Setter Property="TextColor" Value="White" />
            </VisualState.Setters>
          </VisualState>
          <VisualState Name="Locked">
            <VisualState.Setters>
              <Setter Property="Text" Value="D" />
              <Setter Property="FontSize" Value="14" />
              <Setter Property="BackgroundColor" Value="#FF0000" />
              <Setter Property="TextColor" Value="White" />
            </VisualState.Setters>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
    </Button>
</ContentView>

MyCustomToggleButton.xaml.cs:

  [XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class MyCustomToggleButton : ContentView
  {
    public event EventHandler<ToggledEventArgs> Toggled;

    public MyCustomToggleButton()
    {
      this.InitializeComponent();
    }

    public static BindableProperty IsToggledProperty =
        BindableProperty.Create(
          nameof(IsToggled), 
          typeof(bool), 
          typeof(MyCustomToggleButton), 
          false, 
          propertyChanged: OnIsToggledChanged);

    public bool IsToggled
    {
      set { SetValue(IsToggledProperty, value); }
      get { return (bool)GetValue(IsToggledProperty); }
    }

    protected override void OnParentSet()
    {
      base.OnParentSet();
      VisualStateManager.GoToState(this, "Unactive");
    }

    static async void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
    {
      uint delayValue = 100;

      ToggleButton toggleButton = (ToggleButton)bindable;
      bool isToggled = (bool)newValue;

      toggleButton.IsEnabled = false;
      await toggleButton.FadeTo(0.3, delayValue, Easing.Linear);

      // Fire event
      //toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));

      if (isToggled)
      {
        // Set the visual state
        VisualStateManager.GoToState(toggleButton, "Active");
      }
      else
      {
        // Set the visual state
        VisualStateManager.GoToState(toggleButton, "Unactive");
      }

      await Task.Delay((int)delayValue);

      await toggleButton.FadeTo(1, delayValue, Easing.Linear);
      toggleButton.IsEnabled = true;
    }
  }

CodePudding user response：

Basically, the toggle button has three state:Locked,Active,ToggledOff. It is possible to subclass Button so that it works like an on-off switch: Tap the button once to toggle the button on and tap it again to toggle it off.The default state is locked.Please go through my step below:

Step 1: Create a ToggleButton.cs in shared project that inherits from Button like below:

    class ToggleButton : Button
{
    public event EventHandler<ToggledEventArgs> Toggled;

    public static BindableProperty IsToggledProperty =
        BindableProperty.Create("IsToggled", typeof(bool), typeof(ToggleButton), false,
                                propertyChanged: OnIsToggledChanged);

    public ToggleButton()
    {
        Clicked  = (sender, args) => IsToggled ^= true;
    }

    public bool IsToggled
    {
        set { SetValue(IsToggledProperty, value); }
        get { return (bool)GetValue(IsToggledProperty); }
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();
        VisualStateManager.GoToState(this, "Locked");
    }

    static void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ToggleButton toggleButton = (ToggleButton)bindable;
        bool isToggled = (bool)newValue;

        // Fire event
        toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));

        // Set the visual state
        VisualStateManager.GoToState(toggleButton, isToggled ? "Active": "ToggledOff" );
    }
}

Step 2: Create a MyCustomToggleButton.xaml contentpage and in Xaml consumes it like below:

    <local:ToggleButton >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="ToggleStates">
                <VisualState Name="ToggledOff">
                    <VisualState.Setters>
                        <Setter Property="Text" Value="Italic Off" />
                        <Setter Property="BackgroundColor" Value="#C0C0C0" />
                        <Setter Property="TextColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Active">
                    <VisualState.Setters>
                        <Setter Property="Text" Value="D" />
                        <Setter Property="FontSize" Value="14" />
                        <Setter Property="BackgroundColor" Value="#20962d" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Locked">
                    <VisualState.Setters>
                        <Setter Property="Text" Value="D" />
                        <Setter Property="FontSize" Value="14" />
                        <Setter Property="BackgroundColor" Value="#FF0000" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </local:ToggleButton>

MS official reference link: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/button#creating-a-toggle-button