Блог

я пытаюсь создать приложение, похожее на Tinder. Я нашел пакет nuget (MLToolkit.Формы.SwipeCardView) для создания карточек с возможностью прокрутки. Я попытался установить класс UserProfile с поддельными данными, чтобы создать несколько тестовых карточек и посмотреть, правильно ли работает swipe.

Проблема в том, что SwipeCardView не отображается в моем приложении…

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; }
        }
    }
}

  

Я просто использовал «{Профили привязки}» вместо «{Профиль привязки}», мой плохой

Из общего кода: ItemsSource="{Binding Profiles}" , поэтому вам нужно Profiles свойство BindingContext .

Вы можете изменить код следующим образом:

 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" });
    }
...