Category / Section
How to set shadow effect to the cards in Xamarin.Forms
1 min read
The SfCardView is a Syncfusion UI component that helps organizing the content as cards. This section explains how to add shadow effect to cards in Xamarin.Forms. The shadow effect can be achieved by enabling the HasShadow property of CardView.
Also, you can customize the shadow effect color by customizing ShadowColor property in CardView.
Consider the use case of showing a list of social media applications in a Xamarin.Forms application as below.
[XAML]
..
<ListView x:Name="EventListView"
RowHeight="100"
SeparatorVisibility="None"
ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<cards:SfCardView Margin="10" HasShadow="True" ShadowColor="LightBlue">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" >
<Image Margin="10,0,0,0" Source="{Binding Image}"
HeightRequest="40" WidthRequest="40"/>
<Label Margin="10,0,0,0" FontAttributes="Bold"
FontSize="16" MaxLines="1" Text="{Binding Title}"
LineBreakMode="NoWrap" TextColor="Black"
HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
</Grid>
</cards:SfCardView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
[C#]
public class CardModel
{
public string Title {get; set;}
public string Image {get; set;}
}
[C#]
public class CardViewModel
{
public IEnumerable<CardModel> Items { get; set; }
public CardViewModel()
{
Items = new CardModel[]
{
new CardModel(){ Title = "Facebook" , Image = "FacebookFill.png"},
new CardModel(){ Title = "Gmail" , Image = "GmailFill.png"},
new CardModel(){ Title = "Instagram" , Image = "InstagramFill.png"},
new CardModel(){ Title = "WhatsApp" , Image = "WhatsAppFill.png"},
};
}
}
Note:
Shadow card support is only available in iOS and Android platforms.
See Also
How to dismiss the cards programmatically
Available customization in cards
Notify events to visible index changed
