.NET MAUI style problem with gradient colors - Android

[AbanoubZak]

Description

I started using .NET MAUI recently and I found a problem with Styling.
I started with the basic project to make sure the problem is not something I made during the process.
The project starts with a button that will change text and size each time the user press it.

The problem is any time I use LinearGradientBrush directly or through the global styling, the button size doesn't change to fit the text, and even worse it moves to the left.

I looked everywhere but I didn't find any similar problem or solution.

It works well with Windows but not with Android

Code

<Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#8A26ED"/>
                        <GradientStop Color="#381061" Offset="1"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>

Steps to Reproduce

1. Create new .NET MAUI app
2. Set LinearGradientBrush to the CounterBtn button directly or use global styling.
3. When the button click on Android the size doesn't change and the button moves to the left

Link to public reproduction project repository

https://github.com/AbanoubZak/NET-MAUI-gradient-color-styling-problem

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

All Android

Did you find any workaround?

Not yet

Relevant log output

No response

[AbanoubZak]

Thanks to Liqun Shen-MSFT I figured out that the Button size does change however for some reason the button background doesn't rerender so it looks like it moves to the left but it's just the background color stick to the same area on the left leaving the rest of the button transparent.

I used the workaround but on the SizeChanged event, as it will be more accurate this way since the size of the button depends on the text/content length

 private void CounterBtn_SizeChanged(object sender, EventArgs e)
    {
        LinearGradientBrush ll = new LinearGradientBrush();
        ll.EndPoint = new Point(0, 1);
        GradientStop a = new GradientStop(Color.FromHex("#8A26ED"), 0);
        GradientStop b = new GradientStop(Color.FromHex("#381061"), 1);
        ll.GradientStops = new GradientStopCollection()
    {
        a,b
    };
        CounterBtn.Background = ll;
    }

Original answer

Note: issue still remains and this is just a workaround

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.