Xamarin Gradient

Question

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:

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;
}

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?

Answer 1

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.

Answer 2

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

If so, here is two running screen result.

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>