We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add gradient background to border

As mention in the subject, is it possible to do gradient background for SfBorder?

5 Replies

RA Rachel A Syncfusion Team September 3, 2019 09:39 AM UTC

Hi Benjamin, 
 
Greetings from Syncfusion. 
 
Yes, it is possible to add the gradient view as the content for the SfBorder. We have attached the reference sample, please download it from the following location. 
 
Sample: 
Output: 
 
  
Please find the reference link for SfGradientView, 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Rachel. 



BE Benjamin September 3, 2019 10:06 AM UTC

Thanks for the assistance. this fixed my issue


RA Rachel A Syncfusion Team September 3, 2019 10:14 AM UTC

Hi Benjamin, 
 
Thanks for the confirmation. 
 
Please let us know if you need any further assistance. 
 
Thanks, 
Rachel. 



CK CK September 27, 2022 05:21 PM UTC

Any gradient background in a Border control seems to ignore the "CornerRadius" parameter of the Border. Is it possible to have a gradient background that has rounded corners?



SR Shivani Ramakrishnan Syncfusion Team September 29, 2022 01:53 PM UTC

Hi CK,


Query: Any gradient background in a Border control seems to ignore the "CornerRadius" parameter of the Border


The reported issue was reproduced on our side. We recommend adding the SfGradientView on the background to show the gradient background with a corner radius. Below is the code,


<border:SfBorder BorderWidth="0" Margin="15" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                     CornerRadius="40">
        <border:SfBorder.Content>
            <Grid>
                <gradient:SfGradientView>
                    <gradient:SfGradientView.BackgroundBrush>
                        <gradient:SfLinearGradientBrush>
                            <gradient:SfLinearGradientBrush.GradientStops>
                                <gradient:SfGradientStop Color="#2d265b" Offset="0.0" />
                                <gradient:SfGradientStop Color="#b8495c" Offset="1.0" />
                            </gradient:SfLinearGradientBrush.GradientStops>
                        </gradient:SfLinearGradientBrush>
                    </gradient:SfGradientView.BackgroundBrush>
                </gradient:SfGradientView>
                <Label Text="Syncfusion Border Control" HorizontalOptions="Center" VerticalOptions="Center"
                       FontSize="30"/>
            </Grid>
        </border:SfBorder.Content>
    </border:SfBorder>



We have prepared a sample for your reference and please get it from the attachments. Please let us know if the problem was resolved on your side.


Thanks,

Shivani


Attachment: GradientBorderApp_6d84718f.zip

Loader.
Live Chat Icon For mobile
Up arrow icon