How would you do Magic Gradients within the XAML on a Xamarin.Forms application that u

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Magic Gradients based on App Theming about magicgradients HOT 2 CLOSED

Orgbrat commented on July 23, 2024

Magic Gradients based on App Theming

from magicgradients.

Comments (2)

bbenetskyy commented on July 23, 2024 1

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