✔️ How to user repeated-linear-gradients
✔️ How to replace HSL & HSLA double values with Regex
❓ Something more???

Items Should Have:
✔️ Unique ID
✔️ Tags
✔️ CSS Source

We should Check how Gradients from Simple Patterns draw at CSS-Gradient-Playgroud and ensure that all looks in the same way, otherwise we should:

• Fix Them
• Or Add Proper Issue for Magic Gradients Core Project with a description of non-working changes

Summary

Nice to have supported hex colors as the gradient colors.

Example of usage

linear-gradient(45deg, #fff, #123, #abc, #000);

We need to update our main ReadMe.md file

We need to:

• Remove old gifs
• Remove Old Photos
• Add New Gifs with new features
• More New Screenshots from Playground App
• Record new video for YouTube
• Re-organize readme sections if it will be needed

Also we need to:

• Update Repo Project Details
• Update Milestone Details

When angle, color stops or other properties are changing in runtime, notify renderer to repaint itself. This feature can give you ability to create ANIMATED GRADIENTS 😱

A new Playground project should be added to UWP Target Plattform.

You could try to make the language for the definition of color gradients more effective according to this article: https://www.researchgate.net/publication/265914627_Mini-Language_for_Effective_Definition_of_the_Color_Gradients
I have already prepared parser for this language to translate it into the XAML for Silverlight, if you want.

Required Tests and Updates for:

• Xamarin.Forms
• Xamarin.Essentials
• Xamarin.Android.Support.*

Not Required for updates:

• Microsoft.Net.Test.Sdk

• All Solution Works
• All Tests Passed
• No Crashes in Playground

Provide fluent API:

var gradients = new GradientBuilder()
    .AddLinearGradient(g => g
        .Rotate(20)
        .Repeat()
        .AddStop(Color.Red, Offset.Prop(0.2))
        .AddStop(Color.Blue, Offset.Prop(0.4)))
    .AddRadialGradient(g => g
        .Circle().At(30, 30)
        .OfSize(200, 200)
        .StretchTo(RadialGradientSize.FarthestSide)
        .Repeat()
        .AddStops(Color.Red, Color.Green, Color.Blue))
    .Build();

Extensions for GradientBuilder:

gradientView.GradientSource = builder.ToSource();

We should provide support for XAML Linear Gradients without a defined Offset.

It should work the same as it is for CSS Linear Gradients - divide into equal parts between each color

Mean it should work the same as defined equal Offset between each color

Gradient of next code should have same result after implementation this feature:

<magicGradients:GradientView VerticalOptions="FillAndExpand">
    <magicGradients:GradientView.GradientSource>
        <magicGradients:LinearGradient Angle="352" IsRepeating="False">
            <magicGradients:GradientStop Color="#E91C83" Offset="0"/>
            <magicGradients:GradientStop Color="#E9631C" Offset="0.5"/>
            <magicGradients:GradientStop Color="#C0E91C" Offset="1"/>
        </magicGradients:LinearGradient>
    </magicGradients:GradientView.GradientSource>
</magicGradients:GradientView>

<magicGradients:GradientView VerticalOptions="FillAndExpand">
    <magicGradients:GradientView.GradientSource>
        <magicGradients:LinearGradient Angle="352" IsRepeating="False">
            <magicGradients:GradientStop Color="#E91C83" />
            <magicGradients:GradientStop Color="#E9631C" />
            <magicGradients:GradientStop Color="#C0E91C" />
        </magicGradients:LinearGradient>
    </magicGradients:GradientView.GradientSource>
</magicGradients:GradientView>

And looks like:

Now it looks like:

Summary

Some gradients from Gradient Magic have a type of repeating-linear-gradient. Nice to have the support of them.

It seems that using an older version of XCode (10.1) my application can't deploy to an IOS 13 device once I start using MagicGradients. (Based on research of the error).

It's such a shame because my app is almost done and there hasn't been any other problems or incompatibilities with other frameworks. As soon as I put this sample snippet into a XAML page I get the error that follows. If I take that out it deploys to my device with no errors (even though the Nuget packages are still installed and referenced).

<magic:GradientView VerticalOptions="FillAndExpand">
magic:GradientView.GradientSource
<magic:LinearGradient Angle="90">
<magic:GradientStop Color="Red" Offset="0" />
<magic:GradientStop Color="Yellow" Offset="1" />
</magic:LinearGradient>
</magic:GradientView.GradientSource>
</magic:GradientView>

Error: error MT4109: Failed to compile the generated registrar code.

Same code and app will deploy to an IOS Simulator without issue.

Hoping maybe someone knows what the cause is and I can perhaps still use this in my application.

Currently GradientView renders it's IGradientSource by filling all available space. To handle complex css gradients we should handle css property background-size which says render me using specific rectangle, not whole space. As an initial implementation, if GradientSize < available space, it should be tiled. Later, we can consider adding support for GradientPosition and GradientRepeat (analogical to css: background-position and background-repeat).

API changes

GradientView control

public Size GradientSize { get; set; }

GradientView CSS

background: linear-gradient(...); // no changes, maps to GradientSource
background-size: 100px 100px; // new property, maps to GradientSize 

Just update Docs and provide in short and clear way how it can be used.

📛 This issue is blocked by #35 & #34 📛

Question from Aziz at Medium Blog Post:
Is it possible to use MagicGradients on the shell TabBar? I want to have a gradient background set for the navigation bar and the bottom tabbar.

Here we just need to give an answer with sample code

Add support for

radial-gradient(red 5%, yellow 15%, green 60%);

Should be done before: #20

System.InvalidOperationException : You MUST call Xamarin.Forms.Init(); prior to using it.

We should fix it by adding MockPlatformServices.cs from Xamarin.Forms.UnitTests

Gallery -> Select Any Item -> ✔️ Add here possibility for selected Item to open it in Paste CSS Screen
✔️ Add Documentation with Gif about this feature
📛 This issue is blocked by #35 & #34 📛

This Gingham Category contains strange transformations while resisting. We may consider about a blog post with a solution for them and provide proper fixes in the Playground App.

Change Offset property from double to ColorOffset structure:

public struct ColorOffset
{
   public OffsetUnit { get; set; }
   public double Value { get; set; }
}

public enum OffsetUnit 
{
   Proportion, Pixels, Percent
}

With double type there is no way to distinguish between percent and pixels when CSS is parsed:
1px => 1 (valid proportion and pixel value)

Provide Offset type converter for XAML:

• Offset="0.25" => no changes
• Offset="25%" => calculate to 0.25
• Offset="34px" => calculate based on canvas size

Xamarin Forms Converter does not accept doubles in HSL and HSLA colors, only INT.

✔️Exceptions should be cached
✔️Xamarin Forms investigated for the root cause of the problem
✔️Correct behavior for such values are correctly preserved

I've installed the nuget release into my forms project and have added the required xmlns line to the top of my xaml page.

Using the playground example for a straight linear gradient, I'm getting an errror that the gradientview does not accept direct content

Visual Studio Community 2019 for Mac (Preview)
Version 8.6 Preview (8.6 build 3437)
MagiGradients 1.0.0
Xam.Forms 4.5.0530

repeating-linear-gradient(45deg, hsla(54,0%,88%,0.05) 0px, hsla(54,0%,88%,0.05) 45px,hsl(224,72%,31%) 45px, hsl(224,72%,31%) 50px)

This CSS Should show something like this:

Right now it shows only white color.

Add metadata object to database which tracks database version.

The README gives an example of generating gradients in code:

 var gradients = new GradientBuilder()
    .AddLinearGradient(45)
        .AddStop(Color.Green, 0.2f)
        .AddStop(Color.Aqua, 0.9f)
    .AddLinearGradient(90)
        .AddStop(Color.Blue)
        .AddStop(Color.DeepPink)
    .Build();

However, how do you then use the gradients array? I can't find any way to use it to set background gradients for elements in my Xamarin app. I think the README should be updated to clarify this.

Add support for

repeating-radial-gradient(red, yellow 10%, green 15%);

Should be done after: #15

Is there a way to set the canvas size for a GradientView to something other than the container size? We're displaying a background to our chats, and the GradientView initially has a height of nearly the full screen. However, when the keyboard is brought up, it resizes the container ContentPage to being much shorter, which causes the gradient to get rendered differently. What we want to do is keep the rendering canvas height/width the same as it was initially set to.

I've tried setting GradientView.HeightRequest, but this doesn't seem to be able to make the height larger than that of the container.

We should Check how Gradients from Uneven Diamonds draw at CSS-Gradient-Playgroud and ensure that all looks in the same way, otherwise we should:

• Fix Them
• Or Add Proper Issue for Magic Gradients Core Project with a description of non-working changes

Summary

Nice to have supported named colors as the gradient colors.

Example of usage

linear-gradient(145deg, red,orange,yellow,green,blue,indigo,violet); 

How to set a gradient background for ALL content pages in the app?

In Playground App we have hidden Complex Patterns category with not supported for a moment CSS Code.

After #95 will be merged we should go and provide proper changes for gradients in Complex Patterns Category and add it into Playground database at Matadata.json and insert with name and slug into Categories.json file.

Standard angle is defined as xxdeg, where xx is a number:

linear-gradient(90deg, red, blue)

However css allows to define 0 angle without suffix, so:

linear-gradient(0, red, blue)

is equivalent to:

linear-gradient(0deg, red, blue)

Suffix deg can only be skipped for 0 angle, for all other values it's mandatory. Currently "0" doesn't match degrees token definition and is parsed as color string.

The bug is in LinearGradientRenderer at function Render(RenderContext context).

I would like to propose a new Splash Screen for our Playground app, right now it's just a blank screen.

@mgierlasinski & @filipoff2 please, take a look at the next propositions from me and left a comment which looks the best for you.

From my side - I propose the first one Splash Screen(Xamarin_1)

Hello friends!

First, I would like to thank you for this amazing plugin for Xamarin.Forms, it really helps a lot. However, I would like to know if it possible to add a gradient background to a button and if yes, which property should I set for that?.

Thanks in advance.

Use Xamarin.Essentials sharing API to share CSS code. Can be added as a button action to:

• Paste CSS view
• Gallery gradient preview
• Others?

Search Should Have Possibility to:
✔️ Search By Tag/Category
✔️ Search By Color/Theme

After Search, it should be a possibility to see details of Item and easily find it in JSON file. Each filter can be shown as separate tab.

Currently it works similar to closest/farthest side. To implement it correctly add proper math calculations to get ellipse vertices of major and minor axis.

• add GradientElements collection that handles notifications
• add PlaygroundLite project for quick gradient debugging

Specify gradient angle by providing double value from range 0-1, instead of degree:

background: linear-gradient(0.25turn, red, blue);

We should import new examples from https://www.gradientmagic.com/collection/complexgrid

Update nuget packages

We need to create a new Page where we could apply selected gradient and see how it will look in real controls

For example:

• Button with Gradient Background
• Page Background
• Move Cool Elements on a Page(Add in comments to this issue)
• Customization of That elements

Summary

Nice to have supported named colors to align(direction) in the gradients. Same as it if for deg right now.

It can be right, left, bottom, top and combination of two directions.

Example of usage

linear-gradient(to bottom right,  rgba(255,0,0,0), rgba(255,0,0,1);