Simpler way to make basic gradients (with example)

Feature Suggestions
1

The current syntax for making gradients is probably great for complex gradients.

However, for just making a basic background gradient, this seems a bit wordy and hard to read at a glance:

<Rectangle>
	<LinearGradient StartPoint="0,0" EndPoint="0,1">
		<GradientStop Offset="0" Color="#c0ffee" />
		<GradientStop Offset="1" Color="#bada55" />
	</LinearGradient>
</Rectangle>

It would be better to have a more readable and intuitive way of doing it, like this:

<Gradient FromColor="#c0ffee" ToColor="#bada55" />

For other beginners, here’s the code you need in Gradient.ux to do the one-liner above in MainView.ux:

<Rectangle ux:Class="Gradient" FromColor="#000" ToColor="#fff">
	<string ux:Property="FromColor" />
	<string ux:Property="ToColor" />
	<LinearGradient StartPoint="0,0" EndPoint="0,1">
		<GradientStop Offset="0" Color="{Property FromColor}" />
		<GradientStop Offset="1" Color="{Property ToColor}" />
	</LinearGradient>
</Rectangle>

Eventually, I’ll probably also add a GradientRotation parameter, and a Shape parameter. What else would you suggest?

2

Nice one! Thanks for sharing!

Don’t think we need to add this to the standard lib as this is easy to do in a community package. We are trying to keep the standard library in Fuse as minimal as possible (while still providing all the features people need). Higher level convenience stuff belongs in community packages.