通过Xamarin.Android中的MVVMCross绑定OxyPlot

前端之家收集整理的这篇文章主要介绍了通过Xamarin.Android中的MVVMCross绑定OxyPlot前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在基于Xamarin PCL的项目中添加了OxyPlot Android和Core,我正在使用MVVMCross.

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

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

MyView.xml

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

MyView.cs

  1. public class MyView : MvxFragment<Myviewmodel>
  2. {
  3. public override View OnCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState)
  4. {
  5. var ignored = base.OnCreateView(inflater,container,savedInstanceState);
  6. var view = this.BindingInflate(Resource.Layout.MyView,null)
  7.  
  8. Myviewmodel MyMainviewmodel = new Myviewmodel();
  9. var a = view.FindViewById<PlotView>(Resource.Id.plot);
  10. a.Model = Myviewmodel.MyModel;
  11.  
  12. return view;
  13. }
  14. }

Myviewmodel.cs

  1. public PlotModel MyModel { get; set; }
  2. public Myviewmodel
  3. {
  4. PlotModel mo = new PlotModel();
  5. var s1 = new LineSeries()
  6. {
  7. Color = OxyColors.SkyBlue,MarkerType = MarkerType.Circle,MarkerSize = 6,MarkerStroke = OxyColors.White,MarkerFill = OxyColors.SkyBlue,MarkerStrokeThickness = 1.5
  8. };
  9. s1.Points.Add(new DataPoint(0,10));
  10. s1.Points.Add(new DataPoint(10,40));
  11. s1.Points.Add(new DataPoint(40,20));
  12. s1.Points.Add(new DataPoint(60,30));
  13. mo.Series.Add(s1);
  14. MyModel = mo;
  15. }

有关OxyPlot安装的其他信息

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

在PCL中

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

在Android中

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

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

解决方法

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

基于问题的示例:

方法1:流利的绑定

视图模型

  1. public class Myviewmodel : Mvxviewmodel
  2. {
  3. public Myviewmodel()
  4. {
  5. GeneratePlotPoints();
  6. }
  7.  
  8. void GeneratePlotPoints()
  9. {
  10. var mo = new PlotModel();
  11. var s1 = new LineSeries()
  12. {
  13. Color = OxyColors.SkyBlue,MarkerStrokeThickness = 1.5
  14. };
  15. s1.Points.Add(new DataPoint(0,10));
  16. s1.Points.Add(new DataPoint(10,40));
  17. s1.Points.Add(new DataPoint(40,20));
  18. s1.Points.Add(new DataPoint(60,30));
  19. mo.Series.Add(s1);
  20. MyModel = mo;
  21. }
  22.  
  23. PlotModel _myModel;
  24. public PlotModel MyModel
  25. {
  26. get { return _myModel; }
  27. set { SetProperty(ref _myModel,value); }
  28. }
  29. }

查看/布局

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

片段/代码背后

  1. public override View OnCreateView(LayoutInflater inflater,Bundle savedInstanceState)
  2. {
  3. var ignored = base.OnCreateView(inflater,savedInstanceState);
  4. var view = this.BindingInflate(Resource.Layout.MyView,null);
  5.  
  6. var graphControl = view.FindViewById<PlotView>(Resource.Id.plot);
  7.  
  8. var bindset = this.CreateBindingSet<MyView,Myviewmodel>();
  9. bindset.Bind(graphControl).For(c => c.Model).To(vm => vm.MyModel);
  10. bindset.Apply();
  11.  
  12. return view;
  13. }

方法2:Xml绑定

视图模型

与上述相同

查看/布局

  1. <oxyplot.xamarin.android.PlotView
  2. android:id="@+id/plot"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. local:MvxBind="Model MyModel"/>

片段/代码背后

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

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

猜你在找的Android相关文章