Render large and clickable grid wpf


I'm trying to create a large grid which cells have drawn a clickable (click event) ellipsis.

I'm using a Canvas as a parent and adding Ellipses to it Children List but when I try to render 100x100 ellipsis, it lags.

I've tried rendering them with the DrawingVisual and DrawingContext but then, they are not clickable and I won't be able to store ellipsis properties (color, stroke...).

Current code to render the Ellipsis

for (int i = 0; i < this.grid.Cols; i++) {
    for (int j = 0; j < this.grid.Rows; j++) {
        SolidColorBrush fillBrush = Brushes.Red;
        SolidColorBrush strokeBrush = Brushes.Blue;

        Ellipse ellipse = new Ellipse() {
            Width = this.grid.Radius,
            Height = this.grid.Radius,
            Fill = fillBrush,
            Stroke = strokeBrush,
            StrokeThickness = 2
        };

        Canvas.SetTop(ellipse, (this.grid.Radius * j) + (j * this.grid.Margin));
        Canvas.SetLeft(ellipse, (this.grid.Radius * i) + (i * this.grid.Margin));

        children.Add(ellipse);
        parent.Children.Add(ellipse);
    }
}

enter image description here

Any ideas?


Answers:


You're hitting a limitation of what WPF can render with it's framework. Ellipses, or all drawing objects, are objects with quite a few properties and events on them. Rendering 10,000 will cause you to lag.

Your best bet is to use DrawingContext and create your own methods that are simpler, and create your own methods to track when something is clicked.