Introduction
After searching all over, I embarked on the arduous journey to create a .NET control that is actually useful. Now that the component is stable and neat, I no longer need it. Haha.
So I share it here in the expectation that it will evolve, or prove itself as the most valuable control ever.
I have no doubt that it will find usefull implementations. Simply again, because I dont think there is a stand alone component like this, out there.
It is a designable user control that floats on command and is resizable.
Written in C# with no unmanageable code, designed to be very quick and easy to implement.
Currently it works optimally with a textbox and a dropdown listbox. However any embedded control can be used from any triggering control.
Below is an example of the coding steps required.
Background
The need for this originaly came from a DevExpress issue. So the look and feel reflect the default DevExpress drop down. It took me a long time to write this and get it to the current state.
One word of warning, if you change the source code of the FloatingSizePopup control. Do not be suprised is even a tiny change breaks it all. The code sequence is critical. I was forced to use a couple of timers. The timers have been designed, not to interfere with any dropped (embedded) control. (This is where DevExpress went off the rails, I think.)
My first 3 attempts failed after many hours (actually months is more correct) of coding.
The secret I have found on attemp 4, was to issolate the floating part from the control, totaly.
Using the Code
I have tried to make this control behave as much as possible, as the default container controls in Visual Studio. To this end I used the System.Design support. That forces the application to be a FrameWork 4 solution. The FrameWork 4 Client solution type does not work.
This example is available to download as well.
Step 1 then, is to set your framework version. (After creating the solution.)
From the properties in the solution explorer...
Step 2] Place the 'triggering control' (like this textbox) into the form workspace...
Step 3] Get the FloatingSizePopup control into the toolbox (Download this first and unzip).
Step 4] Reference the DLL file of the FloatingSizePopup solution...
Step 5] Drag the control from the toolbox and position roughtly where it sould pop up.
Make sure to move and size the FloatingSizePopup control and not the container controls inside.
See the box with the 4 arrows in the next diagram. This indicates that the correct control is selected.
If you do click inside and the selection changes (watch the properties box.), click toward the bottom again to select the FloatingSizePopup (user control).
Step 6] Now you are ready to drop your popup component into the top section (of the panelTable host)...
Step7] and ...
Click outside and the silly dotted box goes away. (???) [no wtf's here!]
Step 8] Almost done now. Add your list elements. (Can be done at runtime of course.)
Step 9] Handle the triggering (MouseClick in this case) events. Like this
Do not use the Show() method of FloatingSizePopup1. (I can not get it to hide.)
Use the Show(Object sender, Bounds bounds) method to launch the popup.
Step 10] The code...
Step 11] Build the project. And run.
The control is aware that a textbox needs to be filled and does that all for you.
Resize the drop down by using the drag corner ...
Step 12] Cool. (Or what?) But wait there's more.
The flip orientation will automatically change 'vertically' if it is too close to the bottom of the screen.
Like this...
Step 13] (Always must be 13, must it not?) Results. Select a listbox item and click the tick button
Points of Interest
DevExpress popup dropdowns close immediately on selection. If you like that then right click in the bottom section (by the buttons). An options panel will popup. Set the QuickSelect checkbox state. and it works that way. This is also a public property, settable by code.
Now the "check this out" moment:
Double click the drag corner and the resize orientation changes. (Thought you might like that!)
If your component "flashes" while resizing try the hideEmbeddedOnresize property. Set it to true. That should fix the issue somewhat.
Please send me an email, if you think I can do something better, or have a clever thought.
Have fun!
Johan
