Custom Button doesn't apply static resource correctly - xamarin.forms

Question

I have resources defined in the app.xaml as below
<ResourceDictionary x:Name="myResDic" >
<!-- Styles -->
<Color x:Key="grayDark">#959595</Color>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="TextColor" Value="#4fddb7" />
<Setter Property="BorderRadius" Value="4" />
<Setter Property="FontSize" Value="Small" />
<Setter Property="BackgroundColor" Value="{StaticResource grayDark}" />
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="wizardButton" TargetType="Button" BasedOn="{StaticResource buttonStyle}">
<Setter Property="BackgroundColor" Value="#3FFF" />
<Setter Property="BorderColor" Value="#AFFF" />
<Setter Property="TextColor" Value="#4fddb7" />
<Setter Property="BorderWidth" Value=".5" />
</Style>
if I bind it to a button like that in xamarin forms contentpage, it works fine
<Button Text="Login with Facebook" Image="facebook.png"
VerticalOptions="EndAndExpand" Style="{StaticResource wizardButton}"/>
But I create a custom button using ButtonRenderers in Android with the code below. But using like that style is not working correctly. Borders are not appearing. See the screenshot below. It is inheriting Button, why doesnt it work?
<controls:FacebookLoginButton Text="Login with Facebook" Image="facebook.png" VerticalOptions="EndAndExpand" Style="{StaticResource wizardButton}"/>
<Button Text="Skip" Style="{StaticResource wizardButton}"/>
public class FacebookLoginButton : Button
{
public FacebookLoginButton()
{
}
}
Obviously buttonrenderer is causing this problem. when I exclude it, it works fine. here is how my android buttonrenderer class looks like
using System;
using Android.App;
using Android.Content;
using Xamarin.Forms.Platform.Android;
using Object = Java.Lang.Object;
using View = Android.Views.View;
using Xamarin.Facebook;
using myApp.Helpers.Controls;
using myApp.Droid;
using Android.Widget;
[assembly: Xamarin.Forms.ExportRenderer(typeof(FacebookLoginButton), typeof(FacebookLoginButtonRendererAndroid))]
namespace myApp.Droid
{
public class FacebookLoginButtonRendererAndroid : ButtonRenderer
{
private static Activity _activity;
public FacebookLoginButtonRendererAndroid(Context context)
: base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
{
base.OnElementChanged(e);
_activity = this.Context as Activity;
//DEBUG
//Xamarin.Facebook.Login.LoginManager.Instance.LogOut();
if (this.Control != null)
{
Button button = this.Control;
button.SetOnClickListener(ButtonClickListener.Instance.Value);
}
if (AccessToken.CurrentAccessToken != null)
{
App.PostSuccessFacebookAction(AccessToken.CurrentAccessToken.Token);
}
}
private class ButtonClickListener : Object, IOnClickListener
{
public static readonly Lazy<ButtonClickListener> Instance = new Lazy<ButtonClickListener>(() => new ButtonClickListener());
public void OnClick(View v)
{
var myIntent = new Intent(_activity, typeof(FacebookActivity));
_activity.StartActivityForResult(myIntent, 0);
}
}
}
}

Answer 1

There are two ways to do this.
The first is to remove the key from the style so it applies to all buttons of type FacebookLoginButton.
This is an implicit style and details can be found here
<Style TargetType="FacebookLoginButton" BasedOn="{StaticResource buttonStyle}">
<Setter Property="BackgroundColor" Value="#3FFF" />
<Setter Property="BorderColor" Value="#AFFF" />
<Setter Property="TextColor" Value="#4fddb7" />
<Setter Property="BorderWidth" Value=".5" />
</Style>
The second way is to add a bindable style property to the facebook button user control, bind it to a style in XAML and implement it in the custom renderer.