WPF and canvas overlay

Question

I have a grid which represents some data, and i need a canvas to overlay on top of it to layout some lines. The canvas is inside it's own usercontrol

The problem is that the canvas and it's contents should autoresize when the grid resizes width and height.

I added the canvas inside a viewbox, but it didn't do the trick. When the grid resizes, the canvas doesn't. The purpose of the canvas is to overlay a ruler-like functionality on top of the grid.

I cannot use a style on the grid to replace the canvas, because the grid is showing different information than the canvas does. Think of it as chart, in which there are bar columns of different sizes (in my case the grid) and the days are lines in an overlay (just as a Gannt Chart)

My code:

taxCanvas = new TimeAxis();
Grid.SetRowSpan(taxCanvas, GRightMain.RowDefinitions.Count);
Grid.SetColumnSpan(taxCanvas, GRightMain.ColumnDefinitions.Count);
Grid.SetColumn(taxCanvas, 0);    Grid.SetRow(taxCanvas, 0); 
Grid.SetZIndex(taxCanvas, -1);
taxCanvas.Height = GRight.ActualHeight;
taxCanvas.Width = GRight.ActualWidth;
GRightMain.Children.Add(taxCanvas);

TimeAxis is my canvas usercontrol, GRightMain is a grid which holds both my canvas and the grid with the content (Gright) in the same row and column.

Answer 1

Your GRightMail control is a grid, which by default stretches its content. If both your data and the TimeAxis control are in the same grid cell (and same row/column span) they should stretch together.

If it still is no the case, then check that your TimeAxis has not a fixed width or height, or a defined Horizontal/VerticalAlignment.

Answer 2

The direct cause of your problem is the lines:

taxCanvas.Height = GRight.ActualHeight;
taxCanvas.Width = GRight.ActualWidth;

This sets a fixed size for your TimeAxis control, disabling any auto-resizing.

Assuming your TimeAxis user control doesn't have any internal settings affecting measure, replacing the Height and Width settings with the following should cause your UserControl to resize automatically.

taxCanvas.HorizontalAlignment = HorizontalAlignment.Stretch;
taxCanvas.VerticalAlignment = VerticalAlignment.Stretch;

This may not completely solve your problem however; your UserControl's desired size and layout size will be the same as that of the grid, but you will still need to manually resize the objects on your canvas. A Canvas doesn't have any provision for measure/arrange, so you'll have to handle this with code. Common techniques are:

1. Wrapping the Canvas inside a ViewBox, which you already tried. You might try this again with the above lines changed.
2. Adjusting the RenderTransform of the canvas using code or bindings (more efficient than adjusting LayoutTransform, and Canvas doesn't participate in layout anyway)
3. Adjusting individual shape positions using code or bindings

One gotcha to look out for: When you resize a canvas, it's contents aren't affected. So if you want to know whether your canvas is actually being resized, give it a background color. That way you won't waste time looking in the wrong place for a sizing problem.