添加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。