在 Xamarin.Android 中通过 MVVMCross 绑定 OxyPlot

Posted 2023-04-01

【中文标题】在 Xamarin.Android 中通过 MVVMCross 绑定 OxyPlot

【英文标题】：Binding OxyPlot via MVVMCross in Xamarin.Android

【发布时间】：2016-11-13 23:23:24

【问题描述】：

我在我使用MVVMCross 的基于Xamarin PCL 的项目中添加了OxyPlot android 和Core。

我在我的 xml 中添加了 plotview，如下所示。但我不知道如何使用 MVVMCross 绑定这个视图。

有什么好的例子或资源可以效仿吗？

MyView.xml

<oxyplot.xamarin.android.PlotView
android:id="@+id/plot"
android:layout_
android:layout_ /> 

MyView.cs

public class MyView : MvxFragment<MyViewModel>

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    
        var ignored = base.OnCreateView(inflater, container, savedInstanceState);
        var view = this.BindingInflate(Resource.Layout.MyView, null)

        MyViewModel MyMainViewModel = new MyViewModel();
        var a = view.FindViewById<PlotView>(Resource.Id.plot);
        a.Model = MyViewModel.MyModel;

        return view;
    

MyViewModel.cs

public PlotModel MyModel  get; set; 
public MyViewModel

  PlotModel mo = new PlotModel();
  var s1 = new LineSeries()
  
    Color = OxyColors.SkyBlue,
    MarkerType = MarkerType.Circle,
    MarkerSize = 6,
    MarkerStroke = OxyColors.White,
    MarkerFill = OxyColors.SkyBlue,
    MarkerStrokeThickness = 1.5
  ;
  s1.Points.Add(new DataPoint(0, 10));
  s1.Points.Add(new DataPoint(10, 40));
  s1.Points.Add(new DataPoint(40, 20));
  s1.Points.Add(new DataPoint(60, 30));
  mo.Series.Add(s1);
  MyModel = mo;

---

OxyPlot 安装的附加信息

我已经通过包控制台添加了 OxyPlot，如下所示。

在 PCL 中

PM> Install-Package OxyPlot.Core -Version 1.0.0-unstable1983 -Pre

在 Android 中

PM> Install-Package OxyPlot.Xamarin.Android -Pre

或者您也可以从 prelease 库中将它们添加到 Nuget 控制台中。

【问题讨论】：

您可能应该为此进行自定义绑定，并且每次更改模型时 (RaisePropertyChanged()) 都会使绑定的 OxyPlot 无效。至少粗略地看一下。我认为***.com/questions/10700445/… 可以帮助你，因为你应该只需要一个单向绑定。如果您需要更多帮助，我会尝试做一个例子。

我已经删除并重建了我发布的代码，它就像一个魅力。但如果你能帮助我解决以下相关问题***.com/questions/38332858/…，那将非常有帮助

【参考方案1】：

您应该能够使用标准的 Mvx 属性绑定来实现您想要的。无需自定义绑定。

基于问题的示例：

方法一：流畅绑定

视图模型

public class MyViewModel : MvxViewModel

    public MyViewModel()
    
        GeneratePlotPoints();
    

    void GeneratePlotPoints()
    
        var mo = new PlotModel();
        var s1 = new LineSeries()
        
            Color = OxyColors.SkyBlue,
            MarkerType = MarkerType.Circle,
            MarkerSize = 6,
            MarkerStroke = OxyColors.White,
            MarkerFill = OxyColors.SkyBlue,
            MarkerStrokeThickness = 1.5
        ;
        s1.Points.Add(new DataPoint(0, 10));
        s1.Points.Add(new DataPoint(10, 40));
        s1.Points.Add(new DataPoint(40, 20));
        s1.Points.Add(new DataPoint(60, 30));
        mo.Series.Add(s1);
        MyModel = mo;
    

    PlotModel _myModel;
    public PlotModel MyModel
    
        get  return _myModel; 
        set  SetProperty(ref _myModel, value); 
    

视图/布局

<oxyplot.xamarin.android.PlotView
   android:id="@+id/plot"
   android:layout_
   android:layout_ />

片段/代码背后

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

    var ignored = base.OnCreateView(inflater, container, savedInstanceState);
    var view = this.BindingInflate(Resource.Layout.MyView, null);

    var graphControl = view.FindViewById<PlotView>(Resource.Id.plot);

    var bindset = this.CreateBindingSet<MyView, MyViewModel>();
    bindset.Bind(graphControl).For(c => c.Model).To(vm => vm.MyModel);
    bindset.Apply();

    return view;

方法 2：Xml 绑定

视图模型

同上

视图/布局

<oxyplot.xamarin.android.PlotView
   android:id="@+id/plot"
   android:layout_
   android:layout_
   local:MvxBind="Model MyModel"/>

片段/背后的代码

不需要绑定代码，只需确保通过绑定充气器运行布局即可。

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

    var ignored = base.OnCreateView(inflater, container, savedInstanceState);
    return this.BindingInflate(Resource.Layout.MyView, null);

【讨论】：

@PlaceHolder,<oxyplot.xamarin.android.PlotView 是MyView.xml中的子视图之一，我没有放所有的xml组件，我只放了oxyplot..你如何处理/绑定只有oxyplot？我在问，因为我在您的解决方案中看不到以下内容view.FindById(Resource.Id.plot)?

@hotspring，你是 100% 正确的，我添加了缺少的 graphControl FindById

只是在考虑图表失效的 CustomBinding，因为我不确定 Oxyplot 是如何处理它的。不过不错！