C# WinForms transparent click-through control to paint on

Question

I am using a custom TreeView class because i need drag-and-drop capabilities. I am painting lines over treeview in order to show the user where will the dragged item go. This creates a lot of visible flicker because each time a change in the "drop target" happens, i have to re-draw the treeview (to clean whatever was drawn before)

Unfortunately there is no DoubleBuffered option for TreeView.

So, i thought about this solution: An invisible control that can paint on itself, located over the treeview, but passing all the mouse events through and not receiving focus. I could paint on that control, and thus prevent the flicker.

However, i have absolutely no clue on how to do it. I know i can set panel color to transparent, but that wont make it become click-though...

PS: I ended up going the easy way out, that is - redrawing over what i've drawn before with white color, and then drawing new selection indicator with black, without invalidating the control. This removed the flicker. However, since StackOverflow forces you to select an answer, i'll select the one i feel is most appropriate... probably...

Answer 1

protected override void WndProc(ref Message m)
{
    if (m.Msg == 0x84)
    {
        m.Result= new IntPtr(-1);
        return;
    }
    base.WndProc(ref m);
}

is what works in 2012.

Answer 2

Even a transparent canvas like this would have to redraw its background (which would include the things behind it). Perhaps there is some hack around this but every time I've run into problems with component flicker there has never been a really satisfying solution, including leveraging component (or even custom) double-buffering. When live graphical interaction like this becomes a necessary part of the application I've always found that the best option is to move to something which does graphics 'the right way'. WPF, XNA, or DirectX are probably the best answers to this problem. WPF also adds things like routed events which make this kind of one-event->many components paradigm much more straightforward to code.

Here is an example using the WPF Interoperability component in a winforms application :

1) Add a new ElementHost to your form (I called it elementHost1 here)

2) Add a new WPF UserControl to your project (I called it TreeCanvas)

XAML

<UserControl x:Class="WindowsFormsApplication1.TreeCanvas"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300">
<Grid>
    <Canvas Name="Canvas1">
        <TreeView Canvas.Left="0" Canvas.Top="0" Height="300" Name="TreeView1" Width="300" />
    </Canvas>
</Grid>

Code behind for TreeCanvas needs nothing - the generated code with just InitializeComponent(); is all you need for now.

And your form code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        //make a new TreeCanvas

        private TreeCanvas MyTreeCanvas = new TreeCanvas();

        public Form1()
        {
            InitializeComponent();
            //attach the TreeCanvas component to the element host
            this.Width = 400;
            this.Height = 400;
            elementHost1.Child = MyTreeCanvas;
            elementHost1.Location = new System.Drawing.Point(30, 30);
            elementHost1.Height = 300;
            elementHost1.Width = 300;

            // Just adding some random stuff to the treeview
            int i = 0;
            int j = 0;
            for (i = 0; i <= 10; i++)
            {
                TreeViewItem nitm = new TreeViewItem();
                nitm.Header = "Item " + Convert.ToString(i);
                MyTreeCanvas.TreeView1.Items.Add(nitm);
                for (j = 1; j <= 3; j++)
                {
                    TreeViewItem itm = (TreeViewItem)MyTreeCanvas.TreeView1.Items[i];
                    itm.Items.Add("Item " + Convert.ToString(j));
                }
            }

            //Draw a line on the canvas with the treeview
            Line myLine = new Line();
            myLine.Stroke = System.Windows.Media.Brushes.Red;
            myLine.X1 = 1;
            myLine.X2 = 50;
            myLine.Y1 = 1;
            myLine.Y2 = 300;
            myLine.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
            myLine.VerticalAlignment = VerticalAlignment.Center;
            myLine.StrokeThickness = 2;
            MyTreeCanvas.Canvas1.Children.Add(myLine);
        }

    }
}

This gives you a treeview inside a canvas, on top which you can paint on while still being able to click and operate the treeview beneath(including mouse scroll events, etc).

If you click DIRECTLY on a line the click will not go through, and likewise if the mouse is hovering DIRECTLY over a line on the canvas then things like scroll events will not go through but if you read up on Routed Events you can pretty easily wire them together from within the TreeCanvas class.

Answer 3

I'm going to post the boring but effective answer. TreeView already has a very good and flicker-free way to highlight a node. Simply implement an event handler for its DragOver event to use it. Like this:

    private void treeView_DragOver(object sender, DragEventArgs e) {
        var tree = (TreeView)sender;
        var pos = tree.PointToClient(new Point(e.X, e.Y));
        var hit = tree.HitTest(pos);
        if (hit.Node == null) e.Effect = DragDropEffects.None;
        else {
            tree.SelectedNode = hit.Node;
            tree.SelectedNode.Expand();        // Optional
            e.Effect = DragDropEffects.Copy;
        }
    }

Note the use of TreeNode.Expand() in the code. Whether you need it or not isn't clear from the question but it is often required since the user has no other good way to get to a sub-node that's hidden because its parent is collapsed.

Answer 4

Taking a look at the Locus Effect library, they do paint transparent top-level windows that can be clicked-through.

In the heart of the solutions, this is done by a window that overrides the Window Procedure similar to this:

protected override void WndProc(ref Message m)
{
    // Do not allow this window to become active - it should be "transparent" 
    // to mouse clicks i.e. Mouse clicks pass through this window
    if ( m.Msg == Win32Constants.WM_NCHITTEST )
    {
        m.Result = new IntPtr( Win32Constants.HTTRANSPARENT );
        return;
    }

    base.WndProc( ref m ) ;
}

With WM_NCHITTEST being 0x0084 and HTTRANSPARENT being -1.

While I'm not sure whether this solution works for child controls, too, it might be worth giving it a try. Simply derive a control and override the WndProc.

Answer 5

Well your overlay has to get focus in order to attach itself to mouse clicks and moves. Not sure doing this is going to necessarily solve your problem.

But if you create the a custom panel make it transparent, Add a property to give you a link to your custom treeview. Add say an onmouseclick handler. At this point you can interpret waht the click means and draw stuff on your panel and call methods on the associated custom treeview.

So the infrastructure part of it is quite trivial, getting rid of flicker, though is basically about minimising the amount of drawing, that's how often, and how much.

I suspect that if your transparent panel is as big as the treeview, it's going to draw the entire thing anyway. You might be able to get more out of the overload of Invalidate that takes a rect, maybe...