Xamarin.Forms: Several Oxyplots on a single ScrollView

Question

I am trying to figure this out for about 3 days now.

TL;DR: How can I put several OxyPlots (of different kinds) in a scrollable ScrollPage (on a ContentPage)? Can someone explain me in which relationship which element in XAML and the CS Codebase is?

---

The question seems simple, but I struggle to get this going. Every page shows the same examples or is not specific enough for my problem, only scattered problems. Basically, I want to do this:

So now I encounter a few problems like the graph fills the whole site, the graph doesnt display, I cant use MultiView for some reason, etc. etc.

Most of the tutorials rely on setting the whole content of the page as the chart. Some others can bypass that but only with cryptic XAML or XAML that wont work (MultiView, I use a ScrollPage instead of a ContentPage, so I cant set the <ContentPage.BindingContext/> attribute, or overrides void OnAppearing(). Also setting the BindingContext via Code in CS wont help, because it seems that that only applies to single- chart- pages.

(I initialized the renderer. I already had charts being shown in my app.)

So this is how I understand it:

<?xml version="1.0" encoding="UTF-8"?>
<ScrollView 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:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             mc:Ignorable="d"
             x:Class="PieCharter.Test">
    <ScrollView.Content>
        <oxy:PlotView Model="{Binding Model}" IsVisible="True"/>
    </ScrollView.Content>
</ScrollView>

I can set one (or more) of those charts here in XAML, and they should appear as the page content with this codebase:

using System;
using System.Text;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

using OxyPlot;
using OxyPlot.Series;
using OxyPlot.Xamarin;
using OxyPlot.Xamarin.Forms;

namespace PieCharter
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Test : ScrollView
    {

        public Test()
        {
            InitializeComponent();

            Content = new PlotView
            {
                Model = CreatePieChart()
            };
        }

        private PlotModel CreatePieChart()
        {
            var model = new PlotModel { Title = "PieChart" };

            var ps = new PieSeries
            {
                StrokeThickness = 0.25,
                InsideLabelPosition = 0.25,
                AngleSpan = 360,
                StartAngle = 0
            };

            ps.Slices.Add(new PieSlice("Slice 1, 50");
            ps.Slices.Add(new PieSlice("Slice 2, 50");
            ps.Slices.Add(new PieSlice("Slice 3, 50");

            model.Series.Add(ps);

            return model;
        }
    }
}

But this gives me problems because it sets the whole page to the chart and I cant compartmentalize them into e.g. a Grid view (also while using Layout container and multiple PlotViews it didnt help).

Why cant I just create a few private PlotView PiePlotView, give them the Model = CreateXChart() as argument and set the content of my page in the XAML files as the PlotViews?

It really confuses me, and the documentation is not really helpful, unfortunately.

What does the Model="{Binding Model}" actually mean? Is Model a member of PlotView? (It should be, but I've seen people using other variables.) And if so, how would my XAML know which Model to use when putting multiple OxyPlots into one file? I suppose it has to do with the BindingContext/<ContentPage.BindingContext/> or something.

Can someone please explain it to me in a bit more detail how to accomplish this, and if you dont provide a solution, please help me at least understanding what is going on at all. Its irritating and I honestly somehow think that XAML seems to be quite the inelegant and messy solution (at least it looks to me like that).

I have knowledge of the basics of XAML, I dont know nothing. But its just the interaction between these two parts I cant wrap my head around...

---

What I already tried (and many more, but probably got various things wrong):

1, 2, 3, 4, 5, ...

Answer 1

ScrollView can have only one children, so you can add a children which in turn can have multiple children like StackLayout or Grid

Model refers to current model for the graph/chart, you have to set it , if you are using Binding the page needs to have same BindingContext mapped to the viewmodel having property with same name, and Viewmodel should implement INotifyPropertyChanged

In code behind of content page

public TestPage()
{
    BindingContext = new TestViewModel();
}

TestViewModel

public class TestViewModel : INotifyPropertyChanged 
{
    public TestViewModel () 
    {
        //initialize Model 1..4
    }

    public Model Model1 
    {
        get => _Model1;

        set 
        {
            _Model1 = value;
            //set value
            NotifyPropertyChanged (); // implemented method for INotifyPropertyChanged
        }
    }

}

<?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:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms" 
             mc:Ignorable="d" 
             x:Class="PieCharter.Test">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Label Text="Some label1 " />
                <Label Text="And some stuff" />
                <PlotView x:Name="plotview1" 
                    Model="{Binding Model1}" 
                    IsVisible="True" 
                    HeightRequest="300" />
                <PlotView x:Name="plotview2" 
                    Model="{Binding Model2}" 
                    IsVisible="True" 
                    HeightRequest="300" />
                <PlotView x:Name="plotview3" 
                    Model="{Binding Model3}" 
                    IsVisible="True" 
                    HeightRequest="300" />
                <PlotView x:Name="plotview4" 
                    Model="{Binding Model4}" 
                    IsVisible="True" 
                    HeightRequest="300" />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>