在网格中添加 OxyPlot 视图
Add OxyPlot view in a grid
我有这个 class,它继承了 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
}
};
}
}
我也有这个class,它绘制了图形:
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 class 并将其生成的视图放入网格单元格中?我想这将类似于从 DrawGraph class 调用生成的 plotView,如下所示:grid.Children.Add (plotView, 0, 1, 1, 2);但我想不通。
您好,最好的方法是使用绑定将视图挂接到视图模型。 PlotView 到 DrawGraph
在这种情况下,您必须进行以下更改:
在您的 ContentPage 中,我们必须创建一个 PlotView 并将其添加到网格,这就是图表渲染器的位置,
var graph = new PlotView ();
grid.Children.Add (graph, 0, 0, 1, 0);
接下来我们必须告诉图表我们要绑定到什么,在这种情况下,我们将 ModelProperty 绑定到 ViewModel(我们的 DrawGraph class)上的 MyModel,我们还需要设置 BindingContext我们页面的一个新的 DrawGraph 实例。
graph.SetBinding(PlotView.ModelProperty, new Binding ("MyModel"));
this.BindingContext = new DrawGraph ();
我们的 DrawGraph class 需要进行一些更改,以便他能够正确更新 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。
我有这个 class,它继承了 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
}
};
}
}
我也有这个class,它绘制了图形:
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 class 并将其生成的视图放入网格单元格中?我想这将类似于从 DrawGraph class 调用生成的 plotView,如下所示:grid.Children.Add (plotView, 0, 1, 1, 2);但我想不通。
您好,最好的方法是使用绑定将视图挂接到视图模型。 PlotView 到 DrawGraph
在这种情况下,您必须进行以下更改:
在您的 ContentPage 中,我们必须创建一个 PlotView 并将其添加到网格,这就是图表渲染器的位置,
var graph = new PlotView ();
grid.Children.Add (graph, 0, 0, 1, 0);
接下来我们必须告诉图表我们要绑定到什么,在这种情况下,我们将 ModelProperty 绑定到 ViewModel(我们的 DrawGraph class)上的 MyModel,我们还需要设置 BindingContext我们页面的一个新的 DrawGraph 实例。
graph.SetBinding(PlotView.ModelProperty, new Binding ("MyModel"));
this.BindingContext = new DrawGraph ();
我们的 DrawGraph class 需要进行一些更改,以便他能够正确更新 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。