Can't use LinearGradientBrush as Button Background on iOS

[alececihs]

Description

Works on Android (tested on Pixel 7 API 34 emulator)

but on iOS (tested on iPhone 15 Pro Max iOS 17.2 emulator)

there is something wrong...

Steps to Reproduce

1. Create a Button.
2. Set Background property to LinearGradientBrush.
3. Run on iOS.

Link to public reproduction project repository

https://github.com/alececihs/MauiButtonsTest/

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[PontusHolmberg]

I'm having the same issue. Hope this gets resolved soon.

[carljohansen]

I've had the same issue ever since I started working on the iOS version of my app (Android works fine). I've noticed that the buttons get drawn correctly if I somehow cause a refresh of the page (e.g. by navigating to another page and then back).

[WebGoose]

This is happening with a few different controls. I have the same problem with grids, labels and buttons so I'm having to use solid colours on iOS for now.

[cris-m]

I am having the same issue with iOS 17.2. Android version is drawn perfectly.

<StackLayout>
    <Button Text="Transfer">
        <Button.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
                <GradientStop Color="#434A65" Offset="0"/>
                <GradientStop Color="#BC2929" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
        <Button.CornerRadius>
            <CornerRadius TopLeft="10" TopRight="10" BottomLeft="10" BottomRight="10"/>
        </Button.CornerRadius>
    </Button>

    <Button Text="Request">
        <Button.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
                <GradientStop Color="#434A65" Offset="0"/>
                <GradientStop Color="#32C397" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
        <Button.CornerRadius>
            <CornerRadius TopLeft="10" TopRight="10" BottomLeft="10" BottomRight="10"/>
        </Button.CornerRadius>
    </Button>

    <Button Text="Withdraw">
        <Button.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
                <GradientStop Color="#434A65" Offset="0"/>
                <GradientStop Color="#2079DF" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
        <Button.CornerRadius>
            <CornerRadius TopLeft="10" TopRight="10" BottomLeft="10" BottomRight="10"/>
        </Button.CornerRadius>
    </Button>
</StackLayout>

If Button has ImageSource, the image won't appear when using LinearGradientBrush as button Background

[archergod]

I am having same issue.

[grabnerM]

What is the status of this issue? Is there a solution or any estimated time remaining?

[afk013]

Not ideal but wrapping the control within a Border seems to keep the gradient contained.

You have to use the border stroke shape to control gradient overflow.

Before

<Button StyleClass="FilledButton" Text="{Binding Text}" IsEnabled="{Binding IsEnabled}">
    <Button.Background>
        <LinearGradientBrush 
            StartPoint="0,0.5"
            EndPoint="1,0.5"
        >
            <GradientStop 
                Color="Pink"
                Offset="0"
            />
            <GradientStop 
                Color="Purple"
                Offset="1"
            />
        </LinearGradientBrush>
    </Button.Background>
</Button>

After

<Border
    Padding="0"    
    StrokeShape="RoundRectangle 40,40,40,40"
    StrokeThickness="0"
>
    <Button StyleClass="FilledButton" Text="{Binding Text}" IsEnabled="{Binding IsEnabled}">
        <Button.Background>
            <LinearGradientBrush 
                StartPoint="0,0.5"
                EndPoint="1,0.5"
            >
                <GradientStop 
                    Color="Pink"
                    Offset="0"
                />
                <GradientStop 
                    Color="Purple"
                    Offset="1"
                />
            </LinearGradientBrush>
        </Button.Background>
    </Button>
</Border>

[grabnerM]

@afk013 Thank you for this workaround, but this can´t be the official way to go.. We are moving our apps from xamarin to maui and we already got lots of things to check like change StackLayout with AndExpand to a Grid. We can´t set a Border around every element wich uses a gradient. Especially after it works correct for Android but not on iOS.

Maybe some of the MAUI/Microsoft guys could look into this.

[archergod]

@afk013 Thank you for this workaround, but this can´t be the official way to go.. We are moving our apps from xamarin to maui and we already got lots of things to check like change StackLayout with AndExpand to a Grid. We can´t set a Border around every element wich uses a gradient. Especially after it works correct for Android but not on iOS.

Maybe some of the MAUI/Microsoft guys could look into this.

The problem discuss in this thread is limited to Buttons only.

And you are welcome to wait for MS to fix it, as it on official git of the team working on it, and it is been here for 6 months already. So I suggest to use workaround if you really want gradient button. Virtually no other option.

[grabnerM]

Oh man. I see.. Waiting for MS to fix something is in 99% of the time the worse option 😅

[carljohansen]

The workaround has put me back in business; thanks! I had to be careful about matching the Button and Border properties, e.g. MaximumHeightRequest. My Button has a CornerRadius of 8, so setting the Border's StrokeShape to RoundRectangle 16,16,16,16 seemed to worked. Don't hold your breath waiting for MSFT to provide a proper fix.

[Dry-Rusk]

any updates here?

[ALSULTAN]

Sadly only pots may answer here, no real developers

[eyeveye]

Using LinearGradientBrush in iOS button, imagesource also will not be visible.