How to change transparency of "Xamarin.Forms Material Visual" disabled button?

Question

I would like to change the transparency level of disabled button.

Disabled Button View

Enabled Button View

[assembly: ExportRenderer(typeof(LabelButton), typeof(SkyRacing.Droid.LabelButtonRenderer))]
namespace SkyRacing.Droid
{
    public class LabelButtonRenderer : MaterialButtonRenderer
    {
        public LabelButtonRenderer(Context ctx) : base(ctx)
        {

        }

        protected override void OnDraw(Android.Graphics.Canvas canvas)
        {
            base.OnDraw(canvas);

            if (!Element.IsEnabled)
                Element.Opacity = 0.9;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
            {
                if (!Element.IsEnabled)
                    Element.Opacity = 0.9;
            }
        }
    }
}

I've tried creating a custom renderer and changing the opacity of the disabled button to 0.9 but still it is too transparent. How can reduce the transparency level of the button? (fyi, on debug mode I've inspected the Element property. It is already 1 even before I set to 0.9, wonder how it is too much transparent).

Answer 1

You can customize any property if Button when it is disabled by using Style. Change the value of Opacity to change transparency level of the button.

<ContentPage.Resources>

    <Style x:Key="BaseButton" TargetType="Button">
        <Style.Triggers>
            <Trigger TargetType="Button"
                     Property="IsEnabled"
                     Value="False">
                <Setter Property="TextColor" Value="#5019171c" />
                <Setter Property="BackgroundColor" Value="Red" />
                <Setter Property="Opacity" Value="0.9" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ContentPage.Resources>

<StackLayout>
    <!-- Place new controls here -->
    <Button Text="click" Clicked="Button_Clicked"/>

    <Button Text="sampleButton"  BackgroundColor="Blue" x:Name="sampleButton" Style="{StaticResource BaseButton}"/>
</StackLayout>

Update code:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(LabelButtonRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace App389.Droid
{
    public class LabelButtonRenderer : MaterialButtonRenderer
    {
        public LabelButtonRenderer(Context ctx) : base(ctx)
        {

        }


        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {

            if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
            {
                if (Element.IsEnabled == false) {
                                       
                    Control.BackgroundTintList = Android.App.Application.Context.Resources.GetColorStateList(Resource.Color.button_normalcolor);
                }
                else
                {
                    Control.BackgroundTintList = Android.App.Application.Context.Resources.GetColorStateList(Resource.Color.button_disablecolor);
                }
            }

        }       
    }
}

And add color in the colors.xml:

<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
  
    <color name="button_normalcolor">#ff00</color>
    <color name="button_disablecolor">#FF4081</color>

</resources>

Update iOS code:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(LabelButtonRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
public class LabelButtonRenderer : MaterialButtonRenderer
{

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {

        Console.WriteLine(e.PropertyName.ToString());

        if (e.PropertyName == nameof(Xamarin.Forms.Button.IsEnabled))
        {
            Control.BackgroundColor = Element.BackgroundColor.ToUIColor();

        }

    }
}

Answer 2

The solution provide by @Jack is working for me. Additionally you can try like this :

<Button x:Name="testButton" Text="Test">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                            <Setter Property="Opacity" Value="0.9"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

If this is also not working, then please share more details about your xaml