Setting Frame.BackgroundColor loses rounded corner on Xamarin forms

Question

I'm using a Frame control on a Xamarin Forms Shared project. I just have some styles:

<Color x:Key="Info">#0060ac</Color>
...
<Style x:Key="LabelContainer" TargetType="Frame">
    <Setter Property="Padding" Value="5" />
    <Setter Property="HorizontalOptions" Value="Fill" />
</Style>
<Style x:Key="LabelContainer-Info" TargetType="Frame" BasedOn="{StaticResource LabelContainer}">
    <Setter Property="BackgroundColor" Value="{DynamicResource Info}" />
</Style>

and a simple Frame control in XAML page:

        <Frame x:Name="CreditCardPaymentResultFrame" Style="{StaticResource LabelContainer-Info}" Padding="0">
            <Label x:Name="PaymentErrorLabel" Text="Lorem ipsum" IsVisible="True" 
                   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                   VerticalTextAlignment="Center" HorizontalTextAlignment="Center" 
                   FontSize="18" TextColor="White">
            </Label>
        </Frame>

and i get somthing like this:

now, if i try to change the background color at run time:

CreditCardPaymentResultFrame.BackgroundColor = Color.FromHex("#ed3700");

the frame control loses the border roundness:

I don't understand this behavior, i need to change the back color, but i would like to keep the rounded edges.

Thanks to anyone who gave me a hand

Answer 1

Faced with the similar issue on Android, but related to border's color. To fix it, I created a new control, inherited it from Frame and implemented a renderer for it, but used VisualElementRenderer<Frame> as a base class instead of FrameRenderer:

[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRenderer))]
namespace Android.Renderers
{
  public class MyFrameRenderer : VisualElementRenderer<Frame>
  {
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            var drawable = new GradientDrawable();
            ViewGroup.SetBackground(drawable);
            UpdateBackgroundColor(drawable);
            UpdateCornerRadius(drawable);
            UpdateOutlineColor(drawable);
            UpdateShadow();
        }
    }

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

        var drawable = ViewGroup?.Background as GradientDrawable;
        if (drawable != null)
        {
            if (e.PropertyName == VisualElement.BackgroundColorProperty.PropertyName)
            {
                UpdateBackgroundColor(drawable);
            } 
            else if (e.PropertyName == Frame.CornerRadiusProperty.PropertyName)
            {
                UpdateCornerRadius(drawable);
            }
            else if (e.PropertyName == Frame.OutlineColorProperty.PropertyName)
            {
                UpdateOutlineColor(drawable);
            }
            else if (e.PropertyName == Frame.HasShadowProperty.PropertyName)
            {
                UpdateShadow();
            }
        }
    }

    protected override void UpdateBackgroundColor()
    {
        // This method doesn't work well in Xamarin.Forms -Version 2.3.4.247
    }

    private void UpdateCornerRadius(GradientDrawable drawable)
    {
        drawable.SetCornerRadius(Element.CornerRadius);
    }

    private void UpdateOutlineColor(GradientDrawable drawable)
    {
        drawable.SetStroke(1, Element.OutlineColor.ToAndroid());
    }

    private void UpdateBackgroundColor(GradientDrawable drawable)
    {
        drawable.SetColor(Element.BackgroundColor.ToAndroid());
    }

    private void UpdateShadow()
    {
        if (Element.HasShadow)
        {
            Elevation = (float)Context.FromPixels(10);
        }
        else
        {
            Elevation = 0;
        }
    }
  }
}