Events in Xamarin Cards

21 Nov 20245 minutes to read

CardTapped

The CardTapped event occurs when any card view is tapped. The argument contains the following information:

  • CardView - Gets the details of a particular card view.

Command

The CardTappedCommand property is used to associate a command with an instance of SfCardLayout. This property is most often set with MVVM pattern to bind callbacks back into the ViewModel.

CommandParameter

The CardTappedCommandParameter property is used to set the parameter reference, based on which the event argument is shown.

NOTE
The default value of the CardTappedCommandParameter is null.

<cards:SfCardLayout CardTappedCommand="{Binding CardTappedCommand}" CardTappedCommandParameter= "1">
             <!--Add children for card layout-->
</cards:SfCardLayout>
public class ViewModel
    {
        public ViewModel()
        {
            ItemTappedCommand = new Command<object>(CardTapped);
        }

        public ICommand CardTappedCommand { get; set; }

        private void CardTapped(object obj)
        {
            // handle event action.
        }

    }

VisibleCardIndexChanging

The VisibleCardIndexChanging event occurs when the visible card index is changing. The argument contains the following information:

  • OldCard - Gets the details of the previous index card.

  • NewCard - Gets the details of the next possible index card.

  • Cancel - Gets or sets a value indicating whether the event should be canceled.

<cards:SfCardLayout VisibleCardIndexChanging="VisibleCardIndexChanging" >
		<cards:SfCardView>
			<Label Text="Cyan" BackgroundColor="Cyan" />
		</cards:SfCardView>

		<cards:SfCardView>
			<Label Text="Yellow" BackgroundColor="Yellow" />
		</cards:SfCardView>

		<cards:SfCardView>
			<Label Text="Orange" BackgroundColor="Orange" />
		</cards:SfCardView>
</cards:SfCardLayout>
...
InitializeComponent();
SfCardLayout cardLayout = new SfCardLayout();
cardLayout.VisibleCardIndexChanging += VisibleCardIndexChanging;

//Add children for card layout. 
cardLayout.Children.Add(new SfCardView() { Content = new Label() { Text = "Cyan", BackgroundColor = Color.Cyan }});
cardLayout.Children.Add(new SfCardView() { Content = new Label() { Text = "Yellow", BackgroundColor = Color.Yellow }});
cardLayout.Children.Add(new SfCardView() { Content = new Label() { Text="Orange", BackgroundColor = Color.Orange }});
...

private void VisibleCardIndexChanging(object sender, Syncfusion.XForms.Cards.VisibleCardIndexChangingEventArgs e)
{
// handle event action.
}
...

VisibleCardIndexChanged

The VisibleCardIndexChanged event occurs when the visible card index is changed. The argument contains the following information:

  • OldCard - Gets the details of the previous card.

  • NewCard - Gets the details of the current card.

<cards:SfCardLayout VisibleCardIndexChanged="VisibleCardIndexChanged" >
		<cards:SfCardView>
			<Label Text="Cyan" BackgroundColor="Cyan" />
		</cards:SfCardView>

		<cards:SfCardView>
			<Label Text="Yellow" BackgroundColor="Yellow" />
		</cards:SfCardView>

		<cards:SfCardView>
			<Label Text="Orange" BackgroundColor="Orange" />
		</cards:SfCardView>
</cards:SfCardLayout>
...
InitializeComponent();
SfCardLayout cardLayout = new SfCardLayout();
cardLayout.VisibleCardIndexChanged += VisibleCardIndexChanged;
...

private void VisibleCardIndexChanged(object sender Syncfusion.XForms.Cards.VisibleCardIndexChangedEventArgs e)
{
    // handle event action.
}
...

Dismissing event

The Dismissing event fires when dismissing the card by swiping with enables SwipeToDismiss property. The argument contains the following information:

  • DismissDirection - Gets a dismissing direction of the card view.

  • Cancel - Gets or sets a value indicating whether the event should be canceled.

<cards:SfCardView Dismissing="SfCardView_Dismissing" SwipeToDismiss="True">
    <Label Text="SfCardView" />
</cards:SfCardView>
...
InitializeComponent();
SfCardView cardView = new SfCardView() { SwipeToDismiss = true };
cardView.Dismissing += SfCardView_Dismissing;
cardView.Content = new Label() { Text = "SfCardView" };
...

private void SfCardView_Dismissing(object sender, Syncfusion.XForms.Cards.DismissingEventArgs e)
{
    e.Cancel = true;
}
...

NOTE

This event will not work when adding the SfCardView as a child of SfCardLayout.

Dismissed event

The Dismissed event fires when dismisses the card by swiping with enables SwipeToDismiss property. The argument contains the following information.

<cards:SfCardView Dismissed="SfCardView_Dismissed" SwipeToDismiss="True">
    <Label Text="SfCardView" />
</cards:SfCardView>
...
InitializeComponent();
SfCardView cardView = new SfCardView() { SwipeToDismiss = true };
cardView.Dismissed += SfCardView_Dismissed;

...
private void SfCardView_Dismissed(object sender, Syncfusion.XForms.Cards.DismissedEventArgs e)
{
   // handle event action.
}
...

NOTE

This event will not work when adding the SfCardView as a child of SfCardLayout.