通过Xamarin.Android中的MVVMCross绑定OxyPlot

我在基于Xamarin PCL的项目中添加了OxyPlot Android和Core,我正在使用MVVMCross.

我在我的xml中添加了plotview,如下所示.但我不知道如何使用MVVMCross绑定此视图.

是否有任何好的例子或资源可供遵循？

MyView.xml

<oxyplot.xamarin.android.PlotView
android:id="@+id/plot"
android:layout_width="match_parent"
android:layout_height="match_parent" />

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安装的其他信息

我通过Package Console添加了如下的OxyPlot.

在PCL中

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

在Android中

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

或者您也可以从预发布库中将它们添加到Nuget Console中.

解决方法

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

基于问题的示例：

方法1：流利的绑定

视图模型

public class Myviewmodel : Mvxviewmodel
{
    public Myviewmodel()
    {
        GeneratePlotPoints();
    }

    void GeneratePlotPoints()
    {
        var mo = new PlotModel();
        var s1 = new LineSeries()
        {
            Color = 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_width="match_parent"
   android:layout_height="match_parent" />

片段/代码背后

public override View OnCreateView(LayoutInflater inflater,Bundle savedInstanceState)
{
    var ignored = base.OnCreateView(inflater,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_width="match_parent"
   android:layout_height="match_parent"
   local:MvxBind="Model MyModel"/>

片段/代码背后

不需要绑定代码,只需确保通过绑定inflater运行布局.

public override View OnCreateView(LayoutInflater inflater,savedInstanceState);
    return this.BindingInflate(Resource.Layout.MyView,null);
}

通过Xamarin.Android中的MVVMCross绑定OxyPlot

解决方法

猜你在找的Android相关文章