Question

I created a custom canvas control inheriting from WPF Canvas. I am using it like this in main window –

<ScrollViewer
    HorizontalScrollBarVisibility="Auto"
    VerticalScrollBarVisibility="Auto">
    <RTD:RTDesignerCanvas
        Margin="5"
        Background="White"
        x:Name="canvas1"
        Focusable="True"
        AllowDrop="True">
    </RTD:RTDesignerCanvas>
</ScrollViewer>

Everything works fine but when I try to set the position of controls inside it like this

Canvas.SetTop(item, 200);

scrollbars are not visible and control is hidden down somewhere. Interestingly, if I add another control to it scroll bars are visible and I can scroll downwards to see the previous control.

I tried to use

base.InvalidateVisual();
base.UpdateLayout();
base.InvalidateArrange();

after changing items Top or Left but nothing happens; Am I missing something or this happens due to some bug?

Update:

to clarify, say I have a canvas having its width, height as 100, 100. Now if I move a control(already added in canvas) using Canvas.SetLeft(myControl, 200) then it will move to a position which is not visible by default and scroll bars are also disabled, so there is no way to see that control.

Now if I add another control to Canvas, ScrollBars appear correctly and I can see the previous control by scrolling.

Answer 1

Did you override MeasureOverride in your custom Canvas? Canvas will always report a DesiredSize of (0, 0), so the ScrollViewer will never think it needs to scroll.

See this StackOverflow answer which suggests using a Grid instead of a Canvas and using the Margin property for positioning. The Grid will report its size based on the size and position of its children, so the ScrollViewer will know it needs to scroll.

Update:

ScrollViewer will give its child ask much size as it asks for, and will only need to scroll if the child is larger than the ScrollViewer. In order to have it scroll properly, you’ll need to report a DesiredSize that is large enough to include all of your child controls. You can do that by overriding MeasureOverride like this:

protected override Size MeasureOverride(Size constraint)
{
    base.MeasureOverride(constraint);
    var desiredSize = new Size();
    foreach (UIElement child in Children)
    {
        desiredSize = new Size(
            Math.Max(desiredSize.Width, GetLeft(child) + child.DesiredSize.Width),
            Math.Max(desiredSize.Height, GetTop(child) + child.DesiredSize.Height));
    }
    return desiredSize;
}

An easier solution, however, is to take advantage of the fact that the Grid class will already measure like this. You can use the Margin property of the child elements to position them exactly instead of the Canvas.Left and Canvas.Top properties. If you are currently doing

Canvas.SetLeft(item, 100);
Canvas.SetTop(item, 200);

for an item in the Canvas, you could instead do

item.Margin = new Thickness(100, 200, 0, 0);

to position it in the same place within a one-cell Grid.