How to Binding page in ContentView with MVVM

Hi everyone

I am developing an application with Xamarin Forms 4.3.0.9. I also use Shell in my project. My goal is to swipe between Tabbars. I've written custom renderer code for this. However, when used with shell structure, black screen error occurs on iOS side.

That's why I came up with the CubeView of the cardViews plugin I used in my project. Because the tabbar feature and you can scroll. But I have a problem.

With MVVM, I need to bind 4 of my pages into the card. I tried something for it, but I didn't get the result I wanted. I'm going to show you the codes I wrote down below. I ask you to tell me how to bind the page dynamically into the card with MVVM.

CardsSampleViewModel .cs

namespace GulaylarMenuDesign.ViewModel
{
public sealed class CardsSampleViewModel : INotifyPropertyChanged
{

        public event PropertyChangedEventHandler PropertyChanged;

        private int _currentIndex;
        private int _pageCount = 0;

        public CardsSampleViewModel()
        {
            Items = new ObservableCollection<object>
            {
                new { Source = "DDD", Ind = _pageCount++, Color = Color.Red, Title = "Altın"},
                new { Source = "DDD", Ind = _pageCount++, Color = Color.Red, Title = "Pırlanta", },
            };

            PanPositionChangedCommand = new Command(v =>
            {
                if (IsAutoAnimationRunning || IsUserInteractionRunning)
                {
                    return;
                }

                var index = CurrentIndex + (bool.Parse(v.ToString()) ? 1 : -1);
                if (index < 0 || index >= Items.Count)
                {
                    return;
                }
                CurrentIndex = index;
            });

            RemoveCurrentItemCommand = new Command(() =>
            {
                if (!Items.Any())
                {
                    return;
                }
                Items.RemoveAt(CurrentIndex.ToCyclicalIndex(Items.Count));
            });

            GoToLastCommand = new Command(() =>
            {
                CurrentIndex = Items.Count - 1;
            });
        }

        public ICommand PanPositionChangedCommand { get; }

        public ICommand RemoveCurrentItemCommand { get; }

        public ICommand GoToLastCommand { get; }

        public int CurrentIndex
        {
            get => _currentIndex;
            set
            {
                _currentIndex = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CurrentIndex)));
            }
        }

        public bool IsAutoAnimationRunning { get; set; }

        public bool IsUserInteractionRunning { get; set; }

        public ObservableCollection<object> Items { get; }

        private object AddPage()
        {
            ContentPage page = new ContentPage();

            var source = page.Content.BindingContext = "AltinPage";

            return source;
        }

    }
}

Is there a way to bind the page into the DataTemplate in the following code?

 > Dnm.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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
             xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
             xmlns:behaviors="clr-namespace:GulaylarMenuDesign.Behaviors"
             xmlns:viewModels="clr-namespace:GulaylarMenuDesign.ViewModel"
             xmlns:dnm="clr-namespace:GulaylarMenuDesign.Views.FaydalıBilgiler"
             mc:Ignorable="d"
             x:Class="GulaylarMenuDesign.Views.FaydalıBilgiler.Dnm"
             BackgroundColor="#343238">

    <ContentPage.BindingContext>
        <viewModels:CardsSampleViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="LabelBodyFont" TargetType="behaviors:CustomLabel">
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="FontSize" Value="17"/>
                <Setter Property="LineHeight" Value="1.3"/>
                <Setter Property="LineBreakMode" Value="WordWrap"/>
                <Setter Property="FontFamily" Value="Times"/>
                <Setter Property="Margin" Value="10,0,10,0"/>
            </Style>

            <Style x:Key="SubtitleFont" TargetType="behaviors:CustomLabel">
                <Setter Property="TextColor" Value="#ED6933"/>
                <Setter Property="FontSize" Value="Subtitle"/>
                <Setter Property="LineBreakMode" Value="WordWrap"/>
                <Setter Property="FontFamily" Value="Times"/>
                <Setter Property="Margin" Value="10,10,10,0"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Spacing="10" Padding="0, 0, 0, 10">
        <ContentView HeightRequest="40" HorizontalOptions="FillAndExpand">
            <controls:TabsControl
                StripeColor="#ED6933"      
                HeightRequest="40"
                BindingContext="{x:Reference cube}">
                <controls:TabsControl.ItemTemplate>
                    <DataTemplate>
                        <Label HorizontalTextAlignment="Center"
                               VerticalTextAlignment="Center"
                               HorizontalOptions="FillAndExpand"
                               VerticalOptions="CenterAndExpand"
                               FontSize="Subtitle"
                               FontFamily="Times"
                               TextColor="White"
                               Text="{Binding Title}"/>

                    </DataTemplate>
                </controls:TabsControl.ItemTemplate>
            </controls:TabsControl>
        </ContentView>
        <cards:CubeView
                x:Name="cube"
                VerticalOptions="FillAndExpand"
                ItemsSource="{Binding Items}"
                SelectedIndex="{Binding CurrentIndex}">
            <cards:CubeView.ItemTemplate>
                <DataTemplate>
                    <ContentView>
                        <StackLayout BindableLayout.ItemsSource="{Binding Source}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <dnm:DDD/>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </ContentView>
                </DataTemplate>
            </cards:CubeView.ItemTemplate>
        </cards:CubeView>
    </StackLayout>
</ContentPage>