CODEWITHSUNDEEP
iosmauilineargradientbrushgradientstop
GeoSaffer
GeoSaffer

Reputation: 163

How do you get a gradient background to work with bindings in .Net Maui iOS?

I ahve been trying to get Gradients to work in .Net Maui for the last few days on iOS but it seems to be crashing.

It works perfectly in Android.

<Grid HeightRequest="316" HorizontalOptions="Fill">
  <Grid.Background>
   <LinearGradientBrush EndPoint="0,1">
     <GradientStop Color="{Binding myStartColor}"
                   Offset="0.1" />
     <GradientStop Color="{Binding myEndColor}"
                   Offset="1.0" />
    </LinearGradientBrush>
  </Grid.Background>
</Grid>

Now as you can see in the above example I am using bindings to set the color of GradientStop's color property. This will crash the app.

viewModel added for clarity

public class myDemoModel : BindableBaseObject
  {
    public Color myStartColor { get; set; }
    public Color myEndColor { get; set; }
  }

I have tested it with Grid, VerticalStackLayout, BoxView(has additinal issues that I will discuss in another thread)

They all behave the same/similar way.

Something that does work is the following

<Grid HeightRequest="316" HorizontalOptions="Fill">
  <Grid.Background>
   <LinearGradientBrush EndPoint="0,1">
     <GradientStop Color="Red"
                   Offset="0.1" />
     <GradientStop Color="Green"
                   Offset="1.0" />
    </LinearGradientBrush>
  </Grid.Background>
</Grid>

So giving it a static value for color seems to work just fine except for BoxView(has additinal issues that I will discuss in another thread).

The problem is I need to change the colors dynamicaly.

Upvotes: 1

Views: 692

Answers (2)

GeoSaffer
GeoSaffer

Reputation: 163

setting the color property to transparent on a BoxView also takes care of the crashing issue on iOS.

so the example below is the same as the original code in question but with an added Color property and using BoxView instead of Grid.

<BoxView HeightRequest="316" HorizontalOptions="Fill" Color="Transparent">
  <BoxView.Background>
   <LinearGradientBrush EndPoint="0,1">
     <GradientStop Color="{Binding myStartColor}"
                   Offset="0.1" />
     <GradientStop Color="{Binding myEndColor}"
                   Offset="1.0" />
    </LinearGradientBrush>
  </BoxView.Background>
</BoxView>

Upvotes: 1

GeoSaffer
GeoSaffer

Reputation: 163

This is not FIX, but a work around until Microsoft fixes the issue.

in my model I added a BackgroundGradient property

public class myDemoModel : BindableBaseObject
  {
    public Color myStartColor { get; set; }
    public Color myEndColor { get; set; }

    public LinearGradientBrush BackgroundGradient => CreateGradient();

    private LinearGradientBrush CreateGradient()
    {
      var gb = new LinearGradientBrush();
      if (myStartColor != null && myEndColor != null) {
        gb.EndPoint = new Point(0, 1);
        gb.GradientStops.Add(new GradientStop(myStartColor, 0.1f));
        gb.GradientStops.Add(new GradientStop(myEndColor, 1.0f));
      }
      return gb;
    }


  }

now instead of binding to the colors from xaml, I bind to the background

<Grid HeightRequest="316" 
      HorizontalOptions="Fill" 
      Background="{Binding BackgroundGradient}">
 
</Grid>

I hope this helps someone.

Upvotes: 1

Related Questions