在网格中添加 OxyPlot 视图

Question

在网格中添加 OxyPlot 视图

androidxamarinxamarin.androidxamarin.formsoxyplot

3

我有一个类，它继承自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); 但我无法想出具体实现方法。

- Ilia Stoilov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rui Marinho · Accepted Answer

您好，最好的方法可能是使用绑定将视图与视图模型连接起来。PlotView用于绘制图形。

在这种情况下，您需要进行以下更改：

在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));
            }
       }

我们需要更改属性设置器以在更改时通知:

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

这应该是您需要获取图表渲染的内容。

每当您设置一个新的MyModel属性时，它都会更新UI。