Add gradient background to border

[Benjamin]

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

[Rachel A]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/GradientBorder1366820080 

Output: 

 

  

Please find the reference link for SfGradientView, 

 

Link: https://help.syncfusion.com/xamarin/sfgradientview/getting-started 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Rachel. 

[Benjamin]

Thanks for the assistance. this fixed my issue

[Rachel A]

Hi Benjamin, 

 

Thanks for the confirmation. 

 

Please let us know if you need any further assistance. 

 

Thanks, 

Rachel. 

[CK]

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?

[Shivani Ramakrishnan]

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