Click here to Skip to main content
15,867,785 members
Articles / Programming Languages / C#

Resize Floating Popup Control

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
3 Jun 2012CPOL4 min read 31.2K   1.5K   12   4
Toolbox popup component that is resizable and floats.

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.

Image 1

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...

Image 2

Step 2] Place the 'triggering control' (like this textbox) into the form workspace...

Image 3

Step 3] Get the FloatingSizePopup control into the toolbox (Download this first and unzip).

Image 4

Step 4] Reference the DLL file of the FloatingSizePopup solution...

Image 5

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).

Image 6

Step 6] Now you are ready to drop your popup component into the top section (of the panelTable host)...

Image 7

Step7] and ...

Click outside and the silly dotted box goes away. (???) [no wtf's here!]

Image 8

Step 8] Almost done now. Add your list elements. (Can be done at runtime of course.)

Image 9

Step 9] Handle the triggering (MouseClick in this case) events. Like this

Image 10

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...

Image 11

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 ...

Image 12

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...

Image 13

Step 13] (Always must be 13, must it not?) Results. Select a listbox item and click the tick button

Image 14

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCan We use keyboard up and down array keys to select listbox Items? Pin
Sid_Joshi8-Sep-14 21:01
professionalSid_Joshi8-Sep-14 21:01 
QuestionRegarding Web Application Pin
shankarsb6-Jun-12 19:20
shankarsb6-Jun-12 19:20 
AnswerRe: Regarding Web Application Pin
tdkmodchip19-Jun-12 6:16
tdkmodchip19-Jun-12 6:16 
AnswerRe: Regarding Web Application Pin
Marco Bertschi2-Feb-14 20:32
protectorMarco Bertschi2-Feb-14 20:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.