Articles in this section
Category / Section

How to set the border color and width of a card within the CardLayout

1 min read

This section explains how to define the BorderWidth and BorderColor properties of SfCardView when it is added as a child of SfCardLayout.

 

Step 1: Refer to this Getting Started documentation, to create a simple CardView sample and configure it.

Step 2: Initialize the SfCardView as a child of card layout in XAML page and assign the available properties as per your requirement. Set the required BorderColor and BorderWidth properties of SfCardView inside the ChildAdded event of SfCardLayout as shown in the following code snippet.

XAML

<StackLayout>
        <cards:SfCardLayout  HeightRequest="500" SwipeDirection="Left" 
                                              ChildAdded="CardLayout_ChildAdded" >
            <cards:SfCardView BackgroundColor="Yellow">
                <Label  Text="Yellow"/>
            </cards:SfCardView>
 
            <cards:SfCardView BackgroundColor="Orange">
                <Label  Text="Orange"/>
            </cards:SfCardView>
        </cards:SfCardLayout></StackLayout>

C#

private void CardLayout_ChildAdded(object sender, ElementEventArgs e)
        {
            SfCardView cardView = e.Element as SfCardView;
            if (cardView != null)
            {
                cardView.BorderWidth = 2;
                cardView.BorderColor = Color.Black;
            }
        }

 

Note:

The above steps are needed only when SfCardView is added as a child of card layout.

 

Output
Cards with border color and border width.

 

See Also

How to add multicolored stack of cards in Xamarin.Forms

How to remove cards from card view collection in Xamarin.Forms

How to set shadow effect to the cards in Xamarin.Forms

 

How to add cards to the ListView in Xamarin.Forms

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied