Skip to main content

Custom Painting

WATCH & LEARN0:38 · Animated tutorial
5 scenesPlay, pause, or scrub at your own pace

All Wisej.NET controls support custom painting. Handle the Paint event to draw content that appears as the control's background in the browser.

Painting the Mandelbrot on the server

this.button1.Paint += this.button1_Paint;

private void button1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.FillPie(Brushes.Blue, new Rectangle(0, 0, 150, 150), 0, 360);
}

danger

Custom painting replaces the control's background image, so it cannot be combined with BackgroundImage.

There is no limit to what you can draw: e.Graphics is a GDI+ object that Wisej.NET sends back to the browser as a png image and immediately removes from memory.

Canvas Drawing​

In addition to being able to paint any control, Wisej.NET also provides a Wisej.Web.Canvas control that implements the full HTML5 canvas specification on the server.

Use the Redraw event to plug in your drawing code.

This code

this.canvas1.Redraw+= this.canvas1_Redraw;

private void canvas1_Redraw(object sender, EventArgs e)
{
			this.canvas1.BeginPath();
			this.canvas1.Arc(150, 150, 150, 0, 360);
			this.canvas1.Stroke();
			
			// Syntax in JavaScript would be
			// var ctx = c.getContext("2d");
			// ctx.beginPath();
			// ctx.arc(150, 150, 150, 0, 2 * Math.PI);
			// ctx.stroke();
}

Produces this circle.

The HTML5 Canvas methods are available in C# and VB.NET on the server. Their names begin with an uppercase letter, and angle arguments use degrees instead of radians. Otherwise, the names and arguments follow the JavaScript API.

https://www.w3schools.com/html/html5_canvas.asp

info

The Canvas control allows you to build very sophisticated custom controls using the <canvas> element and drawing the control entirely in .NET.

https://drive.google.com/file/d/10eh7j1X94LnBZey1N2q_6RIMHPX2ZNfC/view

The ProgressCircle control is entirely created in .NET using the Canvas control.