0

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

enter image description here

Disabled Button View

enter image description here

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).

Dragon Warrior
  • 307
  • 3
  • 16

2 Answers2

3

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();

        }

    }
}
nevermore
  • 15,432
  • 1
  • 12
  • 30
  • 1
    Already tried this, even though I set the opacity to 1, the button still transparent. For Default visual it's works ok, but for the Material visual they are applying something else for the transparent. – Dragon Warrior Sep 25 '20 at 10:11
  • @DragonWarrior Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). – nevermore Oct 07 '20 at 05:51
  • Hi @Jack Hua - MSFT, Sorry for the delayed reply. I think you are probably close, but I don't want to hard code the background color there. All I want is, it should take whatever color I set in the XMAL code and remove the transparency if disabled. Thanks for your effort, I really really appreciate it. – Dragon Warrior Oct 07 '20 at 09:07
  • `` You can check with this simple button. Remember, *Xamarin.Forms.Visual.Material* needed to be installed to apply the material design effect. – Dragon Warrior Oct 07 '20 at 09:08
  • Yes, use my code need to hardcode the color there because Control.BackgroundTintList uses colors in Resource.Color. Otherwise you can pass the color from forms project to Android project and get it in the custom renderer and use that color. – nevermore Oct 07 '20 at 09:24
  • Instead of passing the color I can get the background color originally set to the element. `Control.Background.SetTintList(ColorStateList.ValueOf(Element.BackgroundColor.ToAndroid()));` this should do the trick. – Dragon Warrior Oct 07 '20 at 11:24
  • Can you add the iOS specific code too? so I can tick this answer ☑️. Thanks again! – Dragon Warrior Oct 07 '20 at 11:24
  • @DragonWarrior I have updated the iOS specific code. – nevermore Oct 08 '20 at 01:43
  • Nope, I've already tried `Control.BackgroundColor`, it didn't work – Dragon Warrior Oct 19 '20 at 08:23
  • for Material Button? – Dragon Warrior Oct 19 '20 at 08:25
  • Yes, Material Button. – nevermore Oct 19 '20 at 08:25
  • That's strange, anyway I'll check this again – Dragon Warrior Oct 19 '20 at 08:26
  • Yes, try again please. – nevermore Oct 19 '20 at 08:26
  • Hua , nope it did not work, I've just checked still the button is transparent – Dragon Warrior Oct 20 '20 at 04:15
  • What you want is change transparency of “Xamarin.Forms Material Visual” disabled button, right? So it should be transparent. – nevermore Oct 20 '20 at 05:42
0

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

Qwerty
  • 429
  • 2
  • 8