Magic Gradients based on App Theming

[Orgbrat]

How would you do Magic Gradients within the XAML on a Xamarin.Forms application that uses AppTheming or different colors for Light and Dark?

[bbenetskyy]

Hi @Orgbrat here is a link to full source code from example below

Also, here is a link to Demo video on YouTube

Solution №1 - CSS in XAML Binding

ContentPage.Resources>
    <x:String x:Key="LightGradient">
        repeating-linear-gradient(...)
    </x:String>
    <x:String x:Key="DarkGradient">
        repeating-linear-gradient(...)
    </x:String>
</ContentPage.Resources>

<magic:GradientView>
       <magic:CssGradientSource Stylesheet="{x:AppThemeBinding Light={StaticResource LightGradient}, Dark={StaticResource DarkGradient}}"/>
</magic:GradientView>

Solution №2 - CSS in Separate File - Code Behind Binding

.lightGradient {
    background: repeating-linear-gradient(...);
}
.darkGradient{
    background: repeating-linear-gradient(...);
}

//MainPage.xaml.cs
public MainPage()
{
    InitializeComponent();
    
    Application.Current.RequestedThemeChanged += (s, a) =>
    {
        GradientView.StyleClass = new[]
        {
            a.RequestedTheme == OSAppTheme.Light
                ? "lightGradient"
                : "darkGradient"
        };
    };
}

If you don't have any other related questions with App Theming - please close this issue 😉

[Orgbrat]

Thanks, I believe that is just what I needed...