Setting Frame.BackgroundColor loses a rounded corner on Xamarin shapes

Question

I am using the Frame control in a Shamar Shared Shared project. I just have a few 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 on the 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 something like this:

Now, if I try to change the background color at runtime:

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

frame control loses the roundness of the border:

I do not understand this behavior, I need to change the back color, but I would like to keep the rounded edges.

Thanks to everyone who gave me a hand

Answer 1

Faced with a similar problem on Android, it is related to the border color. To fix this, I created a new control, inherited it from Frame and implemented a visualization tool 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; } } } }