Magic Gradients v1.1 released!
Finally after a half year new version has been released. This time we focused on making gradients more dynamic, we put also a little bit more love into XAML support. Let’s jump into the details.
Everyone is connected to the Loop in one way or another
Just like in recent Amazon sci-fi series, Tales From the Loop, everything in GradientView is now connected together. We put a lot of effort to rewrite core parts of the control to make it more aware of it’s contents. Now on every property change or child added (or removed) GradientView will be notified to repaint itself.
You can play around with gradient attributes live in running app with our new sample project PlaygroundLite (Playground seems to be the best name for sample apps).
It’s alive
Having GradientView dynamically updated on any change give you one more powerful feature — you can create some cool animations with Xamarin.Forms animation system. Every element of gradient named in XAML with attribute x:Name can be accessed from Page code behind. By using Animation class you can animate any property of that gradient in time bringing it to life. It’s a kind of Necromancy Magic with no doubt.
To demonstrate simple animation let’s create basic linear gradient with name RotateTarget. In code behind we create single animation that changes Angle from 0 to 360 in time 3s, repeating itself forever.
Animating angle from 0 to 360 should give you similar result:
You can also animate any color stop that is part of the gradient. By using x:Name for colors, you can reference them in code behind and do similar stuff like for gradient itself. Below you can see simple scanner effect made from 2 layers of gradient. First layer is just black background, second one simulates the beam and is moving from left to right:
If you run sample code you should see something like this:
These are just basic samples but they can give a taste what can be achieved with basic Xamarin animation system and a bit of creativity. As always be sure to check Playground project for more animation examples.
Luke, I am your father
We all love XAML, especially when it’s short. To create gradient source in version 1.0 you were forced to explicity set <GradientView.GradientSource> property which added unneccessary level of nesting. In version 1.1 we improved that and GradientView has been upgraded with [ContentProperty] attribute pointing at GradientSource. It means that you can set LinearGradient, RadialGradient, CssGradientSource or GradientCollection as a direct child of GradientView.
Damn just draw those pretty colors
In version 1.0 you had to manually set offset for each color which might be a bit irritiating with rich gradients. Now your life will be much easier, you can totally skip all offsets (or some of them) and all missing values will be calculated for you:
Offsets will be calculated by diving range 0–1 proportional between 3 stops: 0, 0.5, 1 (we use the same calculation as traditional CSS).
Bind’em all
Pretty colors and moving shapes are nice and fun but let’s be serious for a moment and talk about the real stuff — the architecture, and our almighty MVVM. There may be some scenarios when you want to define your gradient from View Model. Now it’s possible because all properties became Bindable. Some examples of bindings that you can do:
<magic:GradientView GradientSource="{Binding SelectedGradient}" />
<magic:LinearGradient Angle="{Binding MyAngle}" />
<magic:CssGradientSource Stylesheet="{Binding GradientCss}" />Get Started Today
Don’t wait no more, update your project to Magic Gradients 1.1 and start creating even more amazing things full of life and motion, with no limits. Be sure to check full list of changes in Release Notes. If you have any ideas for new features or you find an issue please let us know. Thanks to all contributors that helped us with this release, thank you Xamarin team for showing us on .NET Conf and other places, thank you all for using Magic Gradients!
