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

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.