question

EliseoGamba-8202 avatar image
0 Votes"
EliseoGamba-8202 asked EliseoGamba-8202 commented

Xamarin Gradient

Hi!!

I'm implementing a RadialGradientBrush like this:

<RadialGradientBrush Radius="1">
<GradientStop Color="#FF0000"
Offset="0.1"/>
<GradientStop Color="#00FF00"
Offset="1"/>
</RadialGradientBrush>

And I have this result:

129617-screen-shot-2021-09-06-at-184131.png

But what i want is how this is implementing in HTML:

.rectangle {
height: 157px;
width: 366px;
background: radial-gradient(circle, red 0%, green 100%);
border-radius: 8px;
}

129686-screen-shot-2021-09-06-at-184258.png

If i try using the value "background: radial-gradient(circle, red 0%, green 100%);" in the background field i have the same result as using gradients stop

Its like if xamarin use a elipse instead of a circle.

Anyone knows how to fix this?

dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

If you want to achieve the same result like xamarin in the HTML, I use following CSS code to achieve it,

#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* Display when the browser does not support */
    background-image: radial-gradient(ellipse, red 9%, green 60%, green 80%);
}




Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


[1]: /answers/storage/attachments/130830-image.png


image.png (62.3 KiB)
image.png (450.7 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Leon Lu,

Actually I don't wanna get the same result in HTML, what i want is get the same HTML result in Xamarin

Regards

0 Votes 0 ·
LeonLu-MSFT avatar image LeonLu-MSFT EliseoGamba-8202 ·

Do you want to use CSS in the xamarin.forms? If so, I am afraid this answer is No, because Xamarin's CSS achieve part of function of HTML's CSS. Xamarin provide CSS function you can refer to this thread: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#property-reference. And please notice Some CSS property just could be used some xamarin forms controls, see the Applies to. Xamarin CSS file could use background-color and background-image property. background-color just can be settted single color, cannot set Gradient color. And background-image, it just can set a image directly such as background-image: bg.png; You can make a feature request for this needs: https://github.com/xamarin/Xamarin.Forms/issues/new/choose

0 Votes 0 ·

Hi LeonLu,

Maybe I didn't explain myself well.

What I want is to have the same result that i get using "background: radial-gradient(circle, red 0%, green 100%);" with CSS in Xamarin using RadialGradientBrush, in Xamarin when i specify a gradient radial it comes like a ellipse and in HTML is more like a circle.

I want to get the same effect in HTML in Xamarin, using whatever control is needed

Regards

0 Votes 0 ·
Show more comments
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered EliseoGamba-8202 commented

Do you want to use RadialGradientBrush to achieve the same result like circle's screenshot?

If so, here is two running screen result.

130906-image.png

Here is code


<StackLayout>
        <Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
            <Frame.Background>
                <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
                <RadialGradientBrush>
                    <GradientStop Color="#FF0000" 
                          Offset="0.1" />
                    <GradientStop Color="#00FF00"
                          Offset="1.0" />
                </RadialGradientBrush>
            </Frame.Background>
        </Frame>


        <Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
            <Frame.Background>
                <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
                <RadialGradientBrush Radius="0.5">
                    <GradientStop Color="#FF0000"
Offset="0.1"/>
                    <GradientStop Color="#1b7300"
Offset="1"/>
                </RadialGradientBrush>
            </Frame.Background>
        </Frame>
    </StackLayout>




image.png (450.7 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

It didn't work on iOS devices

131119-screen-shot-2021-09-10-at-145227.png


0 Votes 0 ·
LeonLu-MSFT avatar image LeonLu-MSFT EliseoGamba-8202 ·

For iOS, I find set the width and height is not work, So when we set Radius=0.5, Radius depends on actual width and height, So you get the ellipse.

Then I find the a control called Magic Gradients, please search a Magic Gradients in NuGet packages, Or Google: Gradient Background Xamarin.Forms App key words, you will find a blog about it, I use it with following code.

<Frame BorderColor="LightGray"
                  
                   HasShadow="True"
                   CornerRadius="12"
                   HeightRequest="120"
                   WidthRequest="120">
              
                    <magic:GradientView HorizontalOptions="FillAndExpand" Margin="-20"  VerticalOptions="FillAndExpand">
                        <magic:GradientView.GradientSource>
                            <magic:RadialGradient Center="0.5,0.5" RadiusX="300" RadiusY="300">
                                <magic:GradientStop Color="Red" Offset="0" />
                               
                                <magic:GradientStop Color="Green" Offset="1" />
                            </magic:RadialGradient>
                        </magic:GradientView.GradientSource>
                    </magic:GradientView>
               
            </Frame>


Here is running screenshot(second Frame).

131775-image.png


0 Votes 0 ·
image.png (151.3 KiB)
LeonLu-MSFT avatar image LeonLu-MSFT EliseoGamba-8202 ·

@EliseoGamba-8202 May I know if you have got any chance to check my answer? I am glad to help if you have any other questions

0 Votes 0 ·

Hi LeonLu!

I checked your answer, but i would like to solve it with a native solution, without using nuget packages, do you why is this happening in iOS?

0 Votes 0 ·