Xamarin.Forms：单个 ScrollView 上的多个 Oxyplots

Question

我正在尝试解决这个问题大约 3 天。

TL；DR： 如何将几个 OxyPlots（不同种类）放在可滚动的 ScrollPage 中（在 ContentPage 上）？ 有人能解释一下 XAML 和 CS 代码库中的哪个元素是什么关系吗？

---

这个问题看起来很简单，但我很难做到这一点。每个页面都显示相同的示例，或者对我的问题不够具体，只有零散的问题。 基本上，我想这样做：

所以现在我遇到了一些问题，比如图形填满整个站点、图形不显示、由于某种原因我无法使用 MultiView 等等。

大部分教程都依赖于将页面的整个内容设置为图表。其他一些人可以绕过它，但只能使用无法工作的神秘 XAML 或 XAML（MultiView，我使用 ScrollPage 而不是 ContentPage，因此我无法设置 <ContentPage.BindingContext/> 属性或 overrides void OnAppearing()。 在 CS 中通过代码设置 BindingContext 也无济于事，因为这似乎只适用于单图表页面。

（我初始化了渲染器。我的应用中已经显示了图表。）

这就是我的理解：

<?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>

我可以在 XAML 中设置一个（或多个）这些图表，它们应该显示为具有此代码库的页面内容：

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

但这给我带来了问题，因为它将整个页面设置为图表，我无法将它们划分为例如一个网格视图（在使用 Layout 容器和多个 PlotViews 时也没有帮助）。

为什么我不能只创建几个private PlotView PiePlotView，给它们Model = CreateXChart() 作为参数，并将我的页面在XAML 文件中的内容设置为PlotViews？

这真的让我很困惑，不幸的是，文档并没有真正的帮助。

Model="{Binding Model}" 究竟是什么意思？ Model 是 PlotView 的成员吗？ （应该是，但我见过人们使用其他变量。）如果是这样，当将多个 OxyPlot 放入一个文件时，我的 XAML 怎么知道使用哪个 Model？我想这与BindingContext/<ContentPage.BindingContext/> 或其他东西有关。

谁能更详细地向我解释一下如何实现这一点，如果你不提供解决方案，请帮助我至少了解发生了什么。这很烦人，老实说，我不知何故认为 XAML 似乎是一种非常不优雅和混乱的解决方案（至少在我看来是这样的）。

我了解 XAML 的基础知识，但我一无所知。但这只是这两个部分之间的交互，我无法理解......

---

我已经尝试过的（还有更多，但可能有各种错误）：

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

Answer 1

ScrollView 只能有一个孩子，因此您可以添加一个孩子，而该孩子又可以有多个孩子，例如StackLayout 或Grid

模型为图形/图表引用to current model，您必须设置它，如果您使用绑定页面需要将相同的BindingContext映射到具有相同名称的属性的视图模型，并且视图模型应该实现INotifyPropertyChanged

在内容页面的代码中

public TestPage()
{
    BindingContext = new 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>