This is a migrated thread and some comments may be shown as answers.

Gradient Background in general - is it possible?

3 Answers 61 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 19 Dec 2019, 11:34 AM

Hi,

I played around with your Gauge control and noticed it has a gradient range. But do you have an option to set a gradient background on other controls - it should be "easy" since you already developed the gradient feature?  

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 19 Dec 2019, 06:34 PM

Hi Michael,

This is totally doable. I have two options for you:

  • Use the RadSweepGradientBrush (easy, can be done in XAML)
  • Use the SkiaSharp drawing libraries (harder, is done in C#, but more powerful)

Telerik Option - Path & SweepGradientBrush

Let me show you how to use our option. this is lightweight and easy to use. Just create a RadPath element/shape and use a RadSweepGradientBrush to fill it.

As an example of it in action, visit the RadPath Styling documentation. For your convenience, here's the code example from that article:

<telerikPrimitives:RadPath x:Name="gradientPath"
                           StrokeThickness="1"
                           Stroke="White"                                        
                           Geometry="{x:Static telerikInput:Geometries.Diamond}">
    <telerikPrimitives:RadPath.Fill>
        <telerikCommon:RadSweepGradientBrush>
            <x:Arguments>
                <Point>0.5, 0.5</Point>
            </x:Arguments>
            <telerikCommon:RadSweepGradientStop>
                <x:Arguments>
                    <Color>#1481FF</Color>
                    <x:Double>180</x:Double>
                </x:Arguments>
            </telerikCommon:RadSweepGradientStop>                     
            <telerikCommon:RadSweepGradientStop>
                <x:Arguments>
                    <Color>#BCE1FF</Color>
                    <x:Double>360</x:Double>
                </x:Arguments>
            </telerikCommon:RadSweepGradientStop>
        </telerikCommon:RadSweepGradientBrush>
    </telerikPrimitives:RadPath.Fill>
</telerikPrimitives:RadPath>

Note:

This is not a Xamarin.Forms.Color object that you can set on any plain Xamarin.Forms View element's BackgroundColor property. If you want to make a gradient background, you'll need to place a RadPath there so you can use the gradient brush inside it.

For example, let's say you wanted a gradient sweep on a Grid background, you'd place the RadPath at the bottom of the Grid's children:

<Grid>
  <RadPath Fill="Your_Gradient" />

  <TheOtherStuffHere />
</Grid>

Microsoft Option - SkiaSharp

If this is not sufficient for your needs, you can use the Xamarin.Forms SkiaSharp library directly.  This option is a bit more complicated because you're manually handing the surface and paint event, but it will achieve just about any custom drawing options you need.

Visit the following amazing Microsoft documentation article https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/effects/shaders/linear-gradient. (I think it was written by Charles Petzold).

 

Wrapping Up

I hope I was able to answer your question. If you have any trouble using the Path or SweepGradient, feel free to open a support ticket and get one-on-one help from the developers and support team.

Regards,
Lance | Team Lead - US DevTools Support
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
DE101
Top achievements
Rank 1
answered on 16 Apr 2020, 02:18 PM
Sorry, it's not clear to me how to do this - could you give a clear example on how to set a StackLayout to have a gradient background?
0
Lance | Manager Technical Support
Telerik team
answered on 16 Apr 2020, 02:27 PM

Hello David,

This isn't a brush or color that you can use on a plain Xamarin.Forms element's BackgroundColor property. The RadPath is a View element just like the StackLayout.

Therefore, if you wanted a gradient behind the elements you have in the StackLayout, then you put the StackLayout on top of the RadPath.

For example:

<Grid>
    <!-- The RadPath with a GradientBrush is the bottom element in the parent Grid -->
    <telerikPrimitives:RadPath StrokeThickness="0" 
                               Stroke="Transparent">
        <telerikPrimitives:RadPath.Fill>
            <telerikCommon:RadSweepGradientBrush>
                <x:Arguments>
                    <Point>0.5, 0.5</Point>
                </x:Arguments>
                <telerikCommon:RadSweepGradientStop>
                    <x:Arguments>
                        <Color>#1481FF</Color>
                        <x:Double>180</x:Double>
                    </x:Arguments>
                </telerikCommon:RadSweepGradientStop>
                <telerikCommon:RadSweepGradientStop>
                    <x:Arguments>
                        <Color>#BCE1FF</Color>
                        <x:Double>360</x:Double>
                    </x:Arguments>
                </telerikCommon:RadSweepGradientStop>
            </telerikCommon:RadSweepGradientBrush>
        </telerikPrimitives:RadPath.Fill>
        <telerikCommon:RadPathGeometry>
            <telerikCommon:RadPathFigure StartPoint="0, 1">
                <telerikCommon:RadLineSegment Point="1, 1" />
                <telerikCommon:RadLineSegment Point="0.5, 0" />
                <telerikCommon:RadLineSegment Point="0, 1" />
            </telerikCommon:RadPathFigure>
        </telerikCommon:RadPathGeometry>
    </telerikPrimitives:RadPath>

    <!-- Put your content on top of the RadPath -->
    <StackLayout BackgroundColor="Transparent">

    </StackLayout>
</Grid>

As you can see in that example, the StackLayout is on top of the RadPath. Because the StackLayout's BackgroundColor is Transparent, the RadPAth gradient will show through.

Regards,
Lance | Team Lead - US DevTools Support
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
DE101
Top achievements
Rank 1
Share this question
or