Xamarin empty SwipeCardView when launching app

Question

i'm trying to make a Tinder like application. I found a nuget package (MLToolkit.Forms.SwipeCardView) to create swipable cards. I tried to set a UserProfile class with fake datas to create some test cards and see if the swipe work proprely.

The problem is, the SwipeCardView does not appears in my app...

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TinderSwipeTest.MainPage"
             xmlns:SwipeCardView="clr-namespace:MLToolkit.Forms.SwipeCardView;assembly=MLToolkit.Forms.SwipeCardView">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <SwipeCardView:SwipeCardView
            x:Name="SwipeView1" ItemsSource="{Binding Profiles}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
            Padding="10" SupportedDraggingDirections="Left,Right,Up">
            <SwipeCardView:SwipeCardView.ItemTemplate>
                <DataTemplate>
                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                        <Frame CornerRadius="10" Padding="8" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
                            <AbsoluteLayout>
                                <Image Source="{Binding Photo}" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All"></Image>
                            </AbsoluteLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </SwipeCardView:SwipeCardView.ItemTemplate>
        </SwipeCardView:SwipeCardView>
    </StackLayout>

</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TinderSwipeTest
{
    public partial class MainPage : ContentPage
    {
        public ObservableCollection<UserProfile> _Profile = new ObservableCollection<UserProfile>();
        public MainPage()
        {
            InitializeComponent();
            CardBinding();
            BindingContext = this;
        }

        public void CardBinding()
        {
            _Profile.Add(new UserProfile() { Name = "Joconde", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde2", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde3", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde4", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde5", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde6", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde7", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde8", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde9", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde10", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde11", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde12", Age = "115", Photo = "joconde.jpg" });
            _Profile.Add(new UserProfile() { Name = "Joconde13", Age = "115", Photo = "joconde.jpg" });
        }

        public ObservableCollection<UserProfile> Profile
        {
            get => _Profile;
            set
            {
                _Profile = value;
            }
        }

        public class UserProfile
        {
            public string Name { get; set; }
            public string Age { get; set; }
            public string Photo { get; set; }
        }
    }
}

Answer 1

From shared code: ItemsSource="{Binding Profiles}" , therefore you need a Profiles property of BindingContext .

You could modify code as follows:

public ObservableCollection<UserProfile> Profiles = new ObservableCollection<UserProfile>();
...
    public void CardBinding()
    {
        Profiles.Add(new UserProfile() { Name = "Joconde", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde2", Age = "115", Photo = "joconde.jpg" });
        Profile.Add(new UserProfile() { Name = "Joconde3", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde4", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde5", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde6", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde7", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde8", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde9", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde10", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde11", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde12", Age = "115", Photo = "joconde.jpg" });
        Profiles.Add(new UserProfile() { Name = "Joconde13", Age = "115", Photo = "joconde.jpg" });
    }
...

Answer 2

我只是使用了“{Binding Profiles}”而不是“{Binding Profile}”我的坏