Question

Here’s what I am trying to do:

Build a custom control that essentially is a scrolling tree view. Later on, it will have to monitor and interact with its items in a certain way. (e.g. it will have to find the element corresponding to a sort of path of names). Since all items will have the same size, this is a prime case for virtualization as well 😉

Not very surprising the elements are supposed to support basic interactions like responding (visually) to have the mouse hovering over them.

Here’s how I tried to do it:

The actual tree class has a Items property (which is an IList) and two scrollbars as its visual children and overrides measure, arrange and render (a couple of – hopefully – irrelevant functions are left out):

public sealed partial class SyncTree : Control
{
    ScrollBar verticalScrollbar = new ScrollBar();
    ScrollBar horizontalScrollbar = new ScrollBar();

    private VisualCollection visualchildren;

    protected override int VisualChildrenCount
    {
        get
        {
            return visualchildren.Count + Items.Count;
        }
    }

    protected override Visual GetVisualChild(int index)
    {
        if (index < visualchildren.Count)
            return visualchildren[index];
        else
            return Items[index - visualchildren.Count];
    }

    private Size MeasuredSize = new Size(0, 0);

    protected override Size MeasureOverride(Size availableSize)
    {
        UpdateMeasuredSize();
        return availableSize;
    }

    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        ArrangeItems(ArrangeScrollbars(arrangeBounds));
        return arrangeBounds;
    }

    private void ArrangeItems(Size arrangeBounds)
    {
        var y = Padding.Top - verticalScrollbar.Value;
        foreach (var item in Items)
        {
            item.Arrange(new Rect(Padding.Left - horizontalScrollbar.Value, y, item.Width, item.Height));

            y += item.Height;
            y += RootNodeSpacing;
        }
    }

    protected override void OnRender(DrawingContext context)
    {
        //kill the ugly background-colored patch between the scrollbars
        if (verticalScrollbar.IsVisible && horizontalScrollbar.IsVisible) context.DrawRectangle(verticalScrollbar.Background, null, new Rect(RenderSize.Width - verticalScrollbar.Width, RenderSize.Height - horizontalScrollbar.Height, verticalScrollbar.Width, horizontalScrollbar.Height));

        context.DrawRectangle(Background, null, new Rect(RenderSize));
    }
}

The items have their own type:

public class SyncTreeItem : Control
{
    protected override Size MeasureOverride(Size constraint)
    {
        var size = new Size(FormattedText.Width + FormattedText.Height + 5, FormattedText.Height);
        if (IsExpanded)
        {
            foreach (var item in Items)
            {
                item.Measure(new Size(constraint.Width - Indent, constraint.Height - size.Height));
                size.Height += item.DesiredSize.Height;
                size.Width = Math.Max(size.Width, item.DesiredSize.Width + Indent);
            }
        }
        Height = size.Height;
        Width = size.Width;
        return size;
    }

    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        if (IsExpanded)
        {
            var y = FormattedText.Height;
            foreach (var item in Items)
            {
                item.Arrange(new Rect(Indent, y, item.Width, item.Height));
                y += item.Height;
            }
            return new Size(arrangeBounds.Width, y);
        }
        else return new Size(arrangeBounds.Width, FormattedText.Height);
    }

    protected override void OnRender(DrawingContext context)
    {
        context.DrawRectangle(Brushes.Transparent, null, new Rect(new Point(0, 0), RenderSize));
        context.PushClip(new RectangleGeometry(new Rect(RenderSize)));

        var ft = FormattedText;

        context.DrawImage(Icon, new Rect(0, 0, ft.Height, ft.Height));
        context.DrawText(ft, new Point(ft.Height + 5, 0));
    }

    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        Console.WriteLine("got mousedown!");
    }
}

What’s not working:

My main problem is that the child elements simply do not seem to be getting the mousedown event (or other mouse events). Maybe I do not get the whole Visual Tree and Routed Event stuff – but I never see the console output when i click the item. On the tree, i can get both the previewmousdown and the mousedown events…

Also, the inner controls do not clip to the inner display area (well, why should they), which I could fix by arranging them before arranging the scrollbars and overwriting GetLayoutClip. Alternatively I could try to make the children aware of their horizontal offset and simply arrange them in a rectangle that does not fit. I do wonder if there is a better way, however 🙂

Answer 1

Make sure you are calling AddVisualChild for each of your child Visuals. It is not enough to simply override VisualChildrenCount and GetVisualChild; the framework also needs to be informed about the relationship. (Perhaps you are doing that in the "irrelevant functions".)

Virtualization is really hard to implement, and rather than trying to build it from scratch you may be better off trying to to use the functionality of VirtualizingPanel. It looks like you are stacking the elements vertically and indenting the children at each depth. You could have logic to flatten the hierarchical data into a single list that stores the original node plus the nesting level. Then you could bind that list to an ItemsControl with a VirtualizingStackPanel and set the left Margin of each container based on the nesting level.

If you do end up implementing your own virtualizing control, you may want to inherit from VirtualizingPanel directly. Here is a series of blog posts that describes everything you should have to do to implement a virtualizing panel: Link