Develop Reference

How should I buffer drawn rectangles to improve performance (C#/.NET/WinForms/GDI+)

What I'm doing
I am working on a C#/.NET 4.7.2/WinForms app that draws a significant number of filled rectangles on a form using Graphics.FillRectangle.
Currently, the rectangles are drawn in the form's Paint event. After all the rectangles are drawn, a crosshair is drawn based on mouse position.
Whenever the mouse moves, Invalidate is called on the form to force a repaint so that the crosshair appears in its new position.
The problem
This is inefficient because the rectangles don't change, only the crosshair position, yet the rectangles are being redrawn every time. The CPU usage during mouse move is significant.
What next
I believe that the solution to this problem is to draw the rectangles to a buffer first (outside of the Paint event). Then, the Paint event only needs to render the buffer plus draw a crosshair on top.
Since I am new to GDI+ and manual buffering, I am wary of going down the wrong track. Google searches reveal plenty of articles on manual buffering, but each article seems to take a different approach which adds to my confusion.
I would be grateful for suggested approaches that favour simplicity and efficiency. If there is an idiomatic .NET way of doing this — the way it's meant to be done — I'd love to know.

Here's a quick and easy solution that doesn't require any buffering. To replicate this, start with a fresh Windows Forms project. I only draw two rectangles, but you can have as many as you want.
If you create a new WinForms project with these two member variables and these two handlers, you will get a working sample.
First, a couple of member variables for your form:
private bool _started = false;
private Point _lastPoint;
The started flag will turn to true after the first mouse move. The _lastPoint field will track the point at which the last cross-hairs was drawn (that's mostly why _started exists).
The Paint handler will draw the cross hairs every time it's called (you'll see why this is ok with the MouseMove handler):
private void Form1_Paint(object sender, PaintEventArgs e)
{
var graphics = e.Graphics;
var clientRectangle = this.ClientRectangle;
//draw a couple of rectangles
var firstRectangle = clientRectangle;
firstRectangle.Inflate(-20, -40);
graphics.FillRectangle(Brushes.Aqua, firstRectangle);
var secondRectangle = clientRectangle;
secondRectangle.Inflate(-100, -4);
graphics.FillRectangle(Brushes.Red, secondRectangle);
//draw Cross-Hairs
if (_started)
{
//horizontal
graphics.DrawLine(Pens.LightGray, new Point(clientRectangle.X, _lastPoint.Y),
new Point(ClientRectangle.Width + clientRectangle.X, _lastPoint.Y));
//vertical
graphics.DrawLine(Pens.LightGray, new Point(_lastPoint.X, clientRectangle.Y),
new Point(_lastPoint.X, ClientRectangle.Height + clientRectangle.Y));
}
}
Now comes the MouseMove handler. It's where the magic happens.
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
var clientRectangle = this.ClientRectangle;
var position = e.Location;
if (clientRectangle.Contains(position))
{
Rectangle horizontalInvalidationRect;
Rectangle verticalInvalidationRect;
if (_started)
{
horizontalInvalidationRect = new Rectangle(clientRectangle.X,
Math.Max(_lastPoint.Y - 1, clientRectangle.Y), clientRectangle.Width, 3);
verticalInvalidationRect = new Rectangle(Math.Max(_lastPoint.X - 1, clientRectangle.X),
clientRectangle.Y, 3, clientRectangle.Height);
Invalidate(horizontalInvalidationRect);
Invalidate(verticalInvalidationRect);
}
_started = true;
_lastPoint = position;
horizontalInvalidationRect = new Rectangle(clientRectangle.X,
Math.Max(_lastPoint.Y - 1, clientRectangle.Y), clientRectangle.Width, 3);
verticalInvalidationRect = new Rectangle(Math.Max(_lastPoint.X, clientRectangle.X - 1),
clientRectangle.Y, 3, clientRectangle.Height);
Invalidate(horizontalInvalidationRect);
Invalidate(verticalInvalidationRect);
}
}
If the cursor is within the form, I do a bunch of work. First I declare two rectangles that I will be using for invalidate. The horizontal one will be a rectangle that fills the width of the client rectangle, but is only 3 pixels high, centered on the Y coordinate of the area that I want to invalidate. The vertical one is as high as the client rectangle, but only 3 pixels wide. It's centered on the X coordinate of the area that I want to invalidate.
When the Paint handler runs, it virtually paints the entire client area, but only the pixels in the total invalidated area actually get drawn on the screen. Anything outside the invalidate area is left alone.
So, when the mouse moves, I create two rectangles (one vertical, one horizontal) that surround where the last set of cross-hairs were (so that when the pixels in those rectangles are drawn (including the background), the old cross-hairs are effectively erased) and then I create two new rectangles surrounding where the current cross-hairs should go (causing the background and the new cross-hairs to be drawn).
You are going to want to learn about invalidation rectangles if you have a complicated drawing app. For example, when the form is resized, what you want to do is invalidate only the newly unveiled rectangle(s), so that the whole drawing doesn't need to be rendered.
This works, but picking a color (or a brush) for the cross-hairs so that they always show can be difficult. Using my other suggestion (that you draw the lines twice (one to erase, one to draw) using an INVERT (i.e. XOR) brush is faster, and it always shows.

Label disappearing after attributting it a parent [duplicate]

In my GUI, i need to change Parents of PictureBoxes to the background PictureBox so that the transparency works correctly.
However, changing the parent also changes the location of the pictureboxes. I have tried grabbing the absolute location of the picture box via the PointToClient, but it doesn't work. I put the coordinates in the comments, and they don't change after assigning the new parent even though the image visibly changes location. Furthermore, I don't expect that it could possibly work as it's being passed a point, not an object with more information about parents and whatnot that's needed to deduce the absolute position.
What is the correct way to deduce the absolute position of an element so that I can move the image to the correct location after its parent changes? Or is there a better way to do this?
Point oldRel = pictureBox4.Location; //258, 109
Point oldAbs = PointToClient(oldRel); //75, -96
//Commenting out this line fixes the image shift but ruins the transparency
pictureBox4.Parent = pictureBox2;
Point newRel = pictureBox4.Location; //258, 109
Point newAbs = PointToClient(pictureBox4.Location); //75, -96

This will move a Control child from one Parent to a new one, keeping the absolute screen position intact:
void MoveTo(Control child, Control newParent )
{
child.Location = newParent.PointToClient(child.PointToScreen(Point.Empty));
child.Parent = newParent;
}
The trick with PointToClient and PointToScreen is to use them from the right parent control; not setting the control will default to the Form, which will miss out on the actual position of the parent..

WPF Canvas Only Extends to the Right?

I'm making a WPF application using C# and I am in the stage of developing more UI for it. I have all my components such as TextBlocks and other Canvases inside of a main Canvas, but if I drag the left side of it to make more room, it expands on the right side, meaning I have to move everything over. The same thing happens when I try and extend the top; The bottom gets bigger. I have the RenderTransformOrigin of the Canvas set to 0,0 so I'm not quite sure what is going on. Any help is appreciated.
Thanks!

By default, a Canvas doesn't have a Width or Height, its actual size depends if you set those properties explicitly, or if you set HorizontalAlignment or VerticalAlignment to Stretch.
In either case, elements inside of a Canvas are aligned relative to its top-left corner, except if you explicitly set their Canvas.Top, Canvas.Left, Canvas.Right and/or Canvas.Bottom properties.
You could also position elements containing a Geometry (like derivatives of Shape, Path being a common example) by their absolute Geometry coordinates. Actually this already is the way they are rendered.
Regarding your comment in the question, usually you don't change where things align relative to the Canvas, since it is much easier (I think even recommended) to reposition the canvas itself, so that everything it contains would be repositioned too.
Common ways to do that would be adding elements to a Canvas, and then position that Canvas inside another "parent" Canvas, similar to "grouping" in vector design programs like CorelDraw/Inkscape/Illustrator.
Another way would be to use RenderTransform property of Canvas containing the elements you want to reposition.
After you get used to see Canvas as a "coordinate system", you can and should think of Canvas-inside-Canvas-inside-Canvas-... as a way of hierarchically grouping things that share the same cartesian space, as opposed to Panels and ContentControls, which are nested inside one another and cannot typically share space.

Like I said in my comment, all the controls inside the canvas are positioned relative to the canvas' top left point. If you want them to retain their "position" when the canvas is resized to the left or top, you will need to offset them yourself. You could do this with a utility method that you call whenever you want to resize the canvas:
public static void StretchWidthLeft(Canvas canvas, double newWidth)
{
double diff = newWidth - canvas.Width;
canvas.Width = newWidth;
foreach (UIElement child in canvas.Children)
{
Canvas.SetLeft(child, Canvas.GetLeft(child) + diff);
}
}
public static void StretchHeightTop(Canvas canvas, double newHeight)
{
double diff = newHeight - canvas.Height;
canvas.Height = newHeight;
foreach (UIElement child in canvas.Children)
{
Canvas.SetTop(child, Canvas.GetTop(child) + diff);
}
}
Note that these methods do not reposition the canvases themselves. How you would do that depends on how the canvas' parent is maintaining their position.

Drawing things on a Canvas

How would I draw something on a Canvas in C# for Windows Phone?
Okay, let me be a little more clear.
Say the user taps his finger down at 386,43 on the canvas. (the canvas is 768 by 480)
I would like my application to be able to respond by placing a red dot at 386,43 on the canvas.
I have no prior experience with Canvas whatsoever.
If this is too complex to be answered in one question (which it probably is), please give me links to other websites with Canvas and Drawing articles.

There are various ways of doing this. Depending on the nature of the red dot, you could make it a UserControl. For a basic circle, you can simply handle your canvas' ManipulationStarted event.
private void myCanvas_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
Ellipse el = new Ellipse();
el.Width = 10;
el.Height = 10;
el.Fill = new SolidColorBrush(Colors.Red);
Canvas.SetLeft(el, e.ManipulationOrigin.X);
Canvas.SetTop(el, e.ManipulationOrigin.Y);
myCanvas.Children.Add(el);
}

I think you need to approach the problem differently. (I'm not including code on purpose, because of that).
Forms and controls in an Windows applications (including Phone) can be refreshed for several reasons, at any time. If you draw on a canvas in response to a touch action, you have an updated canvas until the next refresh. If a refresh occurs the canvas repaints itself, you end up with a blank canvas.
I have no idea what your end goal is, but you likely want to either keep track of what the user has done and store that state somewhere and show it in a canvas on the repaint of the canvas. This could be done with storing all the actions and "replaying" them on the canvas, or simply storing the view of the canvas as a bitmap and reload the canvas with that bitmap when refreshed. But, in the later case I think using a canvas isn't the right solution.

How do draw FormattedText (if not in the onRender method)

I draw some Ellipse and add them to a Grid.
Then I'd like to add some FormattedText to each Ellipse. This i could do by getting the RectangleBounds of the Ellipse.
But following this example:
http://msdn.microsoft.com/en-us/library/bb613560.aspx#FormattedText_Object
I need a DrawingContext to draw the text. But if I don't wantto override onRender, how can I get a DrawingContext?

You can use a DrawingGroup instead. It has an Open method that returns a DrawingContext and you can use that to construct a drawing.
You'll then need to arrange for that drawing to appear in the UI somehow. The easiest way is to wrap it in a DrawingBrush and use that to paint some existing element in the UI. For example, if you've got an ellipse called myEllipse, this will set its Fill property to be a DrawingBrush based on a DrawingGroup that contains a single bit of FormattedText:
var drawing = new DrawingGroup();
using (var context = drawing.Open())
{
var text = new FormattedText("This is some text",
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface("Calibri"),
30,
Brushes.Green);
context.DrawText(text, new Point(0, 0));
}
var db = new DrawingBrush(drawing);
db.Stretch = Stretch.None;
myEllipse.Fill = db;
If you've already filled the Ellipse with something else, you have two choices. You could either add more content to this drawing - you can make as many calls into the context as you like. For example, if I add this immediately before the call to context.DrawText:
context.DrawRectangle(Brushes.Cyan, null, new Rect(0, 0, 300, 100));
I'll get a cyan background behind the text. (You'd need to adjust the coordinates in these examples to suit your layout, of course.)
But it's probably simpler to add an extra element to host the drawing, rather than trying to piggy-back it into an element that's there to do something else. So you could put a Rectangle element positioned directly over the Ellipse, and use a DrawingBrush such as this as the Fill for that Rectangle. The Rectangle won't actually look rectangular, because this DrawingBrush doesn't paint in its whole area. So the effect will look much the same as it would if you'd layered a TextBlock over an Ellipse.