Syncfusion Maui Toolkit Cards

# Card Layout Features

## Table of Contents
- [Overview](#overview)
- [ShowSwipedCard Property](#showswipedcard-property)
- [VisibleIndex Property](#visibleindex-property)
- [SwipeDirection Property](#swipedirection-property)
- [Managing Multiple Cards](#managing-multiple-cards)
- [Common Scenarios](#common-scenarios)
- [Best Practices](#best-practices)

## Overview

`SfCardLayout` is a container that displays multiple `SfCardView` items in a stacked layout. Only one card is visible at a time, and users can swipe to navigate between cards. This creates an interactive, Tinder-style card interface.

**Key Features:**
- Stack multiple cards with only one visible
- Swipe navigation in four directions (Left, Right, Top, Bottom)
- Show swiped cards at layout edges
- Programmatic control over visible card
- Full event support for card changes

**Important:** SfCardLayout only accepts `SfCardView` as direct children.

## ShowSwipedCard Property

The `ShowSwipedCard` property determines whether swiped cards are displayed at the edge of the card layout after being dismissed.

**Type:** `bool`  
**Default:** `false`

### Basic Usage

**XAML:**
```xml
<cards:SfCardLayout ShowSwipedCard="True" HeightRequest="400">
    <cards:SfCardView>
        <Label Text="Card 1" BackgroundColor="Cyan"/>
    </cards:SfCardView>
    
    <cards:SfCardView>
        <Label Text="Card 2" BackgroundColor="Yellow"/>
    </cards:SfCardView>
    
    <cards:SfCardView>
        <Label Text="Card 3" BackgroundColor="Orange"/>
    </cards:SfCardView>
</cards:SfCardLayout>
```

**C#:**
```csharp
SfCardLayout cardLayout = new SfCardLayout
{
    ShowSwipedCard = true,
    HeightRequest = 400
};

cardLayout.Children.Add(new SfCardView 
{ 
    Content = new Label { Text = "Card 1", BackgroundColor = Colors.Cyan } 
});

cardLayout.Children.Add(new SfCardView 
{ 
    Content = new Label { Text = "Card 2", BackgroundColor = Colors.Yellow } 
});

cardLayout.Children.Add(new SfCardView 
{ 
    Content = new Label { Text = "Card 3", BackgroundColor = Colors.Orange } 
});
```

### Visual Effect

- **ShowSwipedCard = false:** Swiped cards disappear completely
- **ShowSwipedCard = true:** Swiped cards remain visible at the edge, creating a stack effect

### When to Use

**Enable ShowSwipedCard when:**
- Users need visual context of how many cards remain
- Creating a "deck of cards" visual metaphor
- Building browsing interfaces where users can see discarded items

**Disable ShowSwipedCard when:**
- You want a cleaner, focused interface
- Creating a "one at a time" flow
- Performance is critical with many cards

## VisibleIndex Property

The `VisibleIndex` property gets or sets the index of the card that should be displayed at the front of the card layout.

**Type:** `int`  
**Default:** `0`

### Basic Usage

**XAML:**
```xml
<cards:SfCardLayout VisibleIndex="1" HeightRequest="400">
    <cards:SfCardView>
        <Label Text="Card 0"/>
    </cards:SfCardView>
    
    <cards:SfCardView>
        <Label Text="Card 1 - Visible on start"/>
    </cards:SfCardView>
    
    <cards:SfCardView>
        <Label Text="Card 2"/>
    </cards:SfCardView>
</cards:SfCardLayout>
```

**C#:**
```csharp
SfCardLayout cardLayout = new SfCardLayout
{
    VisibleIndex = 1,  // Start with second card
    HeightRequest = 400
};

// Add cards...
```

### Programmatic Navigation

```csharp
// Navigate to specific card
cardLayout.VisibleIndex = 2;  // Show third card

// Navigate to next card
cardLayout.VisibleIndex++;

// Navigate to previous card
cardLayout.VisibleIndex--;

// Navigate to first card
cardLayout.VisibleIndex = 0;

// Navigate to last card
cardLayout.VisibleIndex = cardLayout.Children.Count - 1;
```

### Example: Navigation Buttons

```csharp
var cardLayout = new SfCardLayout { HeightRequest = 400 };

// Add cards
for (int i = 0; i < 5; i++)
{
    cardLayout.Children.Add(new SfCardView
    {
        Content = new Label 
        { 
            Text = $"Card {i + 1}",
            HorizontalTe