Bdtjtk

I have a Canvas with dynamic width. I need to draw a chart on this Canvas. Due to the amount of the measured values and the business area specificity it's not possible to use third-party controls and components.

The chart shows the level of some measurement that is discrete. The X axis indicates the time of the measurement. In the worst case every pixel of the chart can have different level. So it looks like this:

My first approach just to make it working was to draw a line for every pixel. So my code looks like this:

        MyCanvas.Children.Clear();

        var random = new Random();

        for (var i = 0; i < MyCanvas.Width; i++)

        {

            var line = new Line()

            {

                X1 = i,

                X2 = i,

                Y1 = MyCanvas.ActualHeight,

                Y2 = MyCanvas.ActualHeight - random.Next(0, (int)MyCanvas.ActualHeight),

                Stroke = Brushes.Blue

            };



            MyCanvas.Children.Add(line);

        }

This code does what I want it to do. It draws a chart like this one:

But it seems that it is not an optimal way to do things like this one. My chart should support panning and zooming and it takes around 200-350ms to redraw a chart on every user request. That's too much (1000/350 = 2.85fps).

I don't have much experience in WPF so my question is - what is the most optimal way to draw such chart? Maybe I need to use Paths and Geometry objects but I can't say for sure that it will give much perfomance gain until I implement it. Also I don't know what kind of Geometry I need to use. It seems that LineGeometry matches my expectations.

Thanks in advance.

Very easy to do, but I'd strongly recommend you use data binding.

1. Create an ItemsControl.


2. Give the ItemsControl an ItemsPanel of type Canvas.


3. Bind the Canvas Width and Height to elements in your view model specifying the extents of each axis.


4. Wrap the whole thing in a Viewbox so that it scales automatically, irrespective of width and height.


5. For each element in your ItemsControl list create a view model containing X1/Y1/X2/Y2, then use a DataTemplate to render those items using those values to draw a vertical line.

So basically your main view model should look something like this (which by way of demonstration is generating random data points):

public class MainViewModel : ObservableObject

{

    private IEnumerable<DataPointViewModel> _DataPoints;

    public IEnumerable<DataPointViewModel> DataPoints

    {

        get { return this._DataPoints; }

        set { Set(() => this.DataPoints, ref this._DataPoints, value); }

    }



    public int ChartWidth { get; } = 1000;

    public int ChartHeight { get; } = 1000;



    public MainViewModel()

    {

        var rng = new Random();

        this.DataPoints = Enumerable.Range(0, this.ChartWidth)

            .Select(x => new DataPointViewModel {X1 = x, Y1 = this.ChartHeight-1, X2 = x, Y2 = this.ChartHeight - 1 - rng.Next(this.ChartHeight) });

    }

}

The view model for the items in your collection need to provide the points for the line that is used to render them:

public class DataPointViewModel : ObservableObject

{

    private double _X1;

    public double X1

    {

        get { return this._X1; }

        set { Set(() => this.X1, ref this._X1, value); }

    }



    private double _Y1;

    public double Y1

    {

        get { return this._Y1; }

        set { Set(() => this.Y1, ref this._Y1, value); }

    }



    private double _X2;

    public double X2

    {

        get { return this._X2; }

        set { Set(() => this.X2, ref this._X2, value); }

    }



    private double _Y2;

    public double Y2

    {

        get { return this._Y2; }

        set { Set(() => this.Y2, ref this._Y2, value); }

    }

}

And then your XAML simply uses these to render a line for each data point on a Canvas control:

<Viewbox>

    <ItemsControl ItemsSource="{Binding DataPoints}" Width="{Binding ChartWidth}" Height="{Binding ChartHeight}">

        <ItemsControl.ItemsPanel>

            <ItemsPanelTemplate>

                <Canvas />

            </ItemsPanelTemplate>

        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>

            <DataTemplate>

                <Line Stroke="Blue" StrokeThickness="1" X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" />

            </DataTemplate>

        </ItemsControl.ItemTemplate>

    </ItemsControl>

</Viewbox>

This will all in turn generate the following output: