How to add multicolored stack of cards in Xamarin.Forms?
This section explains how to change Card's background color based on some condition in a Xamarin.Forms Card application, to have a multicolored stack of cards as in the below image.
Consider the use case of showing a card collection that reports name, subject and mark of a group of students. The color of the each card will be depending upon the marks each student have scored. 
This can be achieved by changing the item template of the SfCardView based on the mark (a property in the model class). Please refer the below code snippet and sample for your reference
XAML
< ContentPage.Resources> <ResourceDictionary>
<DataTemplate x:Key="report">
<cards:SfCardView BackgroundColor="{Binding BackgroundColor}" >
<local:ContentLayout/>
</cards:SfCardView>
</DataTemplate>
<local:CustomDataTemplateSelector x:Key="dataTemplate"
ReportTemplate="{StaticResource report}"/>
</ResourceDictionary>
</ContentPage.Resources>
<cards:SfCardLayout x:Name="cardLayout" BindableLayout.ItemsSource="{Binding Data}"
SwipeDirection="Left" HeightRequest="500"
BindableLayout.ItemTemplateSelector="{StaticResource dataTemplate}">
</cards:SfCardLayout>
C#
public class CustomDataTemplateSelector : DataTemplateSelector
{
public DataTemplate ReportTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
if (Convert.ToDouble(((Result)item).Marks) <= 40)
{
((Result)item).BackgroundColor = Color.Red;
return ReportTemplate;
}
else
{
((Result)item).BackgroundColor = Color.LightGreen;
return ReportTemplate;
}
}
}
View the sample in GitHub
See also:
How to reuse the dismissed cards in sfcardview
How to set the border color and width of a card within the cardlayout
How to set shadow effect to the cards
Also refer our feature tour page to know more about the features available in our cards.
Conclusion
I hope you enjoyed learning how to add multicolored stack of cards in Xamarin.Forms.
You can refer to our Xamarin.Card feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Card documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
