CODEWITHSUNDEEP
windows-phone-8.1xamarin.forms
Atul Chaudhary
Atul Chaudhary

Reputation: 3736

xamarin form button background color in custom renderer

I am trying to set the background color in xamarin form. To achieve that I thought I might use CustomRenderer. I want to set the background color from Hex value. Below is my code where I am finding hard to set the background color. I want to set it in windows 8.1 and UWP. I will really appreciate if some one can tell me on how do it in android as well.

[assembly: ExportRendererAttribute(typeof(PrimaryButton), typeof(PrimaryButtonRenderer))]

namespace ShareSpecial.Windows
{
    public class PrimaryButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BackgroundColor = //some color from hex string
            }
        }
    }
}

Upvotes: 1

Views: 1538

Answers (3)

Atul Chaudhary
Atul Chaudhary

Reputation: 3736

Got it working with help from @Hichaam and posting the working android solution

using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using ShareSpecial.Utils.Controls;
using ShareSpecial.Droid.Custom.Control.Buttons;
using Android.Content.Res;

[assembly: ExportRendererAttribute(typeof(SuccessButton), typeof(SuccessButtonRenderer))]
namespace ShareSpecial.Droid.Custom.Control.Buttons
{
    public class SuccessButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
    {
        public SuccessButtonRenderer() { }

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

            var backgroundColor = Color.FromHex("43ac6a");

            int num = backgroundColor.ToAndroid().ToArgb();

            int num2 = backgroundColor.MultiplyAlpha(0.5).ToAndroid().ToArgb();

            Control.SupportBackgroundTintList = new ColorStateList(ColorExtensions.States, new int[] { num, num2 });

            Control.SetTextColor(Color.FromHex("#ffffff").ToAndroid());
        }
    }
}

Upvotes: 0

Hicham
Hicham

Reputation: 770

the Color class in Xamarin Forms has a method FromHex, and you can easily implement extension methods for color conversion in each platform. in Android there is already a default implementation named ToAndroid().

For WP8 and UWP:

Define this extension:

   static class ConvertExtensions
    {
        public static Windows.UI.Color ToWindowsColor(this Color color)

        {

            return Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
        }
    }

And the code of your renderer would be:

Control.BackgroundColor = new SolidColorBrush(Color.FromHex("ffffffff").ToWindowsColor());

For Android:

If you change the backgroundColor using SetBackgroundColor() method, you will lose the effect of click, to keep it, use the below code:

            Color backgroundColor = Color.FromHex("ffffffff");
            int num = backgroundColor.ToAndroid().ToArgb();
            int num2 = backgroundColor.MultiplyAlpha(0.5).ToAndroid().ToArgb();
            base.Control.SupportBackgroundTintList = new ColorStateList(ColorExtensions.States, new int[] {
            num,
            num2
        });

You will have to extend your renderer from: Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer

Upvotes: 2

eakgul
eakgul

Reputation: 3698

You should use SolidColorBrush for setting a color of Windows Platform element.

Control.BackgroundColor = ToWindowsBrush(Color.Red);

Here is a method that converts Xamarin.Froms.Color to SolidColorBrush

    public static SolidColorBrush ToWindowsBrush(Xamarin.Forms.Color color)
    {
        if (color.A < 0)
            return new SolidColorBrush(Windows.UI.Colors.Transparent);

        var winColor = Windows.UI.Color.FromArgb((byte)(color.A * 255), 
                                                 (byte)(color.R * 255),
                                                 (byte)(color.G * 255),
                                                 (byte)(color.B * 255));
        return new SolidColorBrush(winColor);
    }

Upvotes: 0

Related Questions