添加OxyPlot视图在网格

Question

我有这个类，它继承了ContentPage

public class MainPage : ContentPage 
{ 

    public Label lblTime { get; set; } 

    public Grid grid { get; set; } 

    public MainPage() 
    { 

     //some code which doesn't matter 

     lblTime = new Label { 
      VerticalOptions = LayoutOptions.CenterAndExpand, 
      HorizontalOptions = LayoutOptions.CenterAndExpand, 
      Text = currentTime 
     }; 

     Grid grid = new Grid 
     { 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      RowDefinitions = 
      { 
       new RowDefinition { Height = new GridLength(40, GridUnitType.Auto) }, 
       new RowDefinition { Height = new GridLength() } 
      }, 
      ColumnDefinitions = 
      { 
       new ColumnDefinition { Width = new GridLength(50, GridUnitType.Auto) }, 
       new ColumnDefinition { Width = new GridLength(50, GridUnitType.Star) } 
      } 
     }; 

     grid.Children.Add (lblTime, 0, 1, 0, 1); 

     Content = new StackLayout { 
      Children = { 
       grid 
      } 
     }; 
    } 
} 

我也有这个类，它绘制图形：

public class DrawGraph 
{ 
    public PlotModel MyModel { get; set; } 

    public DrawGraph() 
    { 

     var plotModel = new PlotModel {}; 

     plotModel.Title = "Test"; 

     var xaxis = new LinearAxis { 
      Position = AxisPosition.Bottom 
     }; 

     var yaxis = new LinearAxis { 
      Position = AxisPosition.Left 
     }; 

     yaxis.TickStyle = OxyPlot.Axes.TickStyle.Inside; 
     xaxis.MinorTickSize = 20; 
     yaxis.TicklineColor = OxyColors.Blue; 

     plotModel.Axes.Add (xaxis); 
     plotModel.Axes.Add (yaxis); 

     var series1 = new LineSeries { 
      StrokeThickness = 3, 
      MarkerType = MarkerType.Circle, 
      MarkerSize = 4, 
      MarkerStroke = OxyColors.LimeGreen, 
      MarkerStrokeThickness = 1 
     }; 

     double[,] chartValues = new double[,] {{1437041279684.0156,1.0897299999999999},{1437041339421.4324,1.0896},{1437041397111.7322,1.0897100000000002},{1437041458595.2488,1.0898599999999998},{1437041519510.7329,1.08992},{1437041578914.1306,1.08983},{1437041639357.5877,1.0895100000000002},{1437041699721.0405,1.0895299999999999},{1437041758381.3958,1.0895000000000001},{1437041818605.84,1.08954},{1437041879932.3479,1.0894400000000002},{1437041939531.7568,1.08902}}; 

     for (int i = 0; i < chartValues.GetLength(0)/2; i++) { 
      series1.Points.Add (new DataPoint (chartValues[i,0],chartValues[i,1])); 
     } 

     plotModel.Series.Add (series1); 

     this.MyModel = plotModel; 
    } 
} 

我的问题是，我怎么能调用DrawGraph类，并把它在网格单元格中生成的视图？我猜想它会像调用DrawGraph类中生成的plotView一样，如下所示：grid.Children.Add（plotView，0，1，1，2）;但我无法弄清楚。

Answer 1

嗨最好的办法可能是使用绑定钩住你的视图到你的视图模型。 PlotView到DrawGraph

在这种情况下，这里有您需要做的修改：

在你ContentPage我们要创建一个PlotView并将其添加到网格，这就是该图表将渲染，

var graph = new PlotView(); 
grid.Children.Add (graph, 0, 0, 1, 0); 

接下来我们必须对图表说说我们绑定了什么，在这种情况下，我们将ModelProperty绑定到ViewModel（我们的DrawGraph类）上的MyModel，我们还需要将页面的BindingContext设置为一个新的DrawGraph实例。

graph.SetBinding(PlotView.ModelProperty, new Binding ("MyModel")); 
this.BindingContext = new DrawGraph(); 

还有待我们DrawGraph类所做的所以他能够正确地更新UI的一些变化，我们需要实现INPC接口。因此，我们补充一点：

public class DrawGraph : INotifyPropertyChanged 
    { 
     public event PropertyChangedEventHandler PropertyChanged; 

     public void OnPropertyChaged([CallerMemberName]string caller = null){ 
      var handler = PropertyChanged; 
      if (handler != null) { 
       handler(this, new PropertyChangedEventArgs(caller)); 
      } 
     } 

，我们需要改变我们的属性setter通知时的变化：

PlotModel myModel; 
public PlotModel MyModel { 
    get{ return myModel; } 
    set { 
     myModel = value; 
     OnPropertyChaged(); 
    } 
} 

这应该是你需要得到图表渲染什么。

每次你设置一个新的MyModel属性它都会更新UI。