Как заставить градиентный фон работать с привязками в .Net Maui iOS?

Question

Последние несколько дней я пытался заставить градиенты работать в .Net Maui на iOS, но, похоже, он дает сбой.

Он отлично работает на 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>

Теперь, как вы можете видеть в приведенном выше примере, я использую привязки для установки цвета свойства цвета GradientStop. Это приведет к сбою приложения.

viewModel добавлен для ясности

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

Я протестировал его с помощью Grid, ВертикальныйStackLayout, BoxView(есть дополнительные проблемы, о которых я расскажу в другой теме)

Все они ведут себя одинаково/похоже.

Что-то, что работает, это следующее

      <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>

Таким образом, присвоение статического значения цвета, похоже, работает нормально, за исключением BoxView(есть дополнительные проблемы, о которых я расскажу в другой теме).

Проблема в том, что мне нужно динамически менять цвета.

Answer 1

установка прозрачного свойства цвета в BoxView также решает проблему сбоя в iOS.

поэтому приведенный ниже пример аналогичен исходному коду, но с добавленным свойством Color и использованием BoxView вместо 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>

Answer 2

Это не FIX, а обходной путь, пока Microsoft не устранит проблему.

в моей модели я добавил свойство BackgroundGradient

      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;
    }


  }

теперь вместо привязки к цветам из xaml я привязываюсь к фону

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

Я надеюсь, что это помогает кому-то.