[Bug] Xamarin.Forms issue with control colors on appearing

[ShadowOfPhantom]

Some elements are changing its colors on appearing with Xamarin.Forms 5.0.0.2125. It works well with previous version 5.0.0.2083. Looks like something is broken, please check this out

• Version with issue: 5.0.0.2125

• Last known good version: 5.0.0.2083

• Platform Target Frameworks:

• Android: 11.0 (R )

Videos are attached below

Workaround

Downgrade to 5.0.0.2083

IMG_1160.MOV

IMG_1165.MOV

IMG_1166.MOV

@jsuarezruiz

Could you attach a small sample where reproduce the issue?. Or, could you share more info?.
The views where the issue happens, are Frames?, are you using Shell or a FlyoutPage?

Sample:
ControlColorsIssue.zip

I was unable to reproduce this issue with Shell, looks like Shell is a workaround. But I have an app without FlyoutPage or shell and there is the same issue.
This happens for both BoxView and frame, I attached a video sample of attached project, please take a look

IMG_1198.MOV

[jsuarezruiz]

@ShadowOfPhantom Could you attach a small sample where reproduce the issue?. Or, could you share more info?.
The views where the issue happens, are Frames?, are you using Shell or a FlyoutPage?

[ShadowOfPhantom]

@ShadowOfPhantom Could you attach a small sample where reproduce the issue?. Or, could you share more info?. The views where the issue happens, are Frames?, are you using Shell or a FlyoutPage?

Hi! I edited the topic with new info

[jsuarezruiz]

@ShadowOfPhantom Thanks for the attached sample. I am going to review it.

[jsuarezruiz]

Mnn, the behavior is different between the sample:

And testing the same code with the latest 5.0.0 Xamarin.Forms branch:

We need to review also this differences.

[DouglasGiovanella]

I'm also facing this problem, on 5.0.0.2083 works fine, but updating to 5.0.0.2125 or newer this issue starts to happen when setting a page on the Flyout detail.

@jsuarezruiz running the sample provided by @ShadowOfPhantom i was able to reproduce, but was hard to notice and only happens a few times. I took the liberty to change a few things in it to be more easy to reproduce:

Screen.Recording.2021-12-01.at.15.50.49.mov

ControlColorsIssue.zip

[DouglasGiovanella]

Well, after some digging i track this issue to the BoxView after the changes on this PR: https://github.com/xamarin/Xamarin.Forms/pull/11812/files and maybe it is related to #14970.

I had a fews problems running the XF project on my Mac, so i couldn't test some fix alternatives and submit a PR.

@jsuarezruiz @jfversluis This issue could be prioritized to the next service release? Since i didn't find any workaround for this, its blocking us to update the XF to its latest version 😞

[jfversluis]

Thanks for the investigation on this! Can't make promises on prioritizing, but we'll look into it :)

[ShadowOfPhantom]

The same with navbar if I define Style via App.xaml instead of styles.xml of Android project.
I attached a video

<Style TargetType="NavigationPage">
                <Setter Property="BackgroundColor" Value="{StaticResource MainColor}" />
                <Setter Property="BarBackgroundColor" Value="{StaticResource LightPink}" />
            </Style>

Also it doesn't flicker if I set color like this:

MainPage = new NavigationPage(new TabbedView())
            {
                BarBackgroundColor = Color.LightPink,
            };

IMG_5243.MOV

[DouglasGiovanella]

After a fews tests, looks like this issue is related to the GradientStrokeDrawable, more precisely on the draw method.

protected override void OnDraw(Shape shape, Canvas canvas, Paint paint)
{
	base.OnDraw(shape, canvas, paint);

	if (_backgroundColor.HasValue)
		paint.Color = _backgroundColor.Value;

	if (_strokePaint.StrokeWidth > 0)
		shape.Draw(canvas, _strokePaint);
}

The call for base.OnDraw(shape, canvas, paint); its draws the view with a black backgound because the Paint color its not set already.
Moving the setter paint.Color = _backgroundColor.Value before the base call seems to solve this issue, but i dont know the real impact of doing this.

As a workaround for the boxView problem, i solved by making a custom renderer for the boxView thats forces the right color on the GradientStrokeDrawable Paint:

[assembly: ExportRenderer(typeof(BoxView), typeof(BoxViewRenderer))]
namespace Test.Droid.Renderers {
    public class BoxViewRenderer : BoxRenderer {
        public BoxViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) {
            base.OnElementChanged(e);
            BlackBackgroundWorkaround();
        }

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

            string[] propsToUpdateBackground = {
                VisualElement.BackgroundColorProperty.PropertyName,
                VisualElement.BackgroundProperty.PropertyName,
                BoxView.ColorProperty.PropertyName,
                BoxView.CornerRadiusProperty.PropertyName
            };

            if (propsToUpdateBackground.Contains(e.PropertyName)) {
                BlackBackgroundWorkaround();
            }
        }

        // https://github.com/xamarin/Xamarin.Forms/issues/14740
        private void BlackBackgroundWorkaround() {
            try {
                if (Element.CornerRadius == default) return;

                FieldInfo fieldInfo =
                    typeof(BoxRenderer).GetField("_backgroundDrawable", BindingFlags.NonPublic | BindingFlags.Instance);

                if (fieldInfo != null) {
                    GradientStrokeDrawable gradientStrokeDrawable = fieldInfo.GetValue(this) as GradientStrokeDrawable;

                    AndroidColor? gradientColor = gradientStrokeDrawable?.GetColor();
                    if (gradientColor.HasValue) gradientStrokeDrawable.Paint.Color = gradientColor.Value;
                }
            } catch (Exception e) {
                // something is wrong
            }
        }
    }
}