Want To Create A Floating Speech Bubble Form - vb.net

Wondering if someone could help me....
I have a small .NET application where I have an Edit button on a main form. When the user clicks the Edit button, I want to popup a small form right next to it (on top of the main form) with a speech balloon tail attached on the side of the form pointing to the Edit button. So it gives the effect of a floating form pushed out from the Edit button.
I don't want the appearance of a normal speech bubble, I want it to look like an actual borderless form (with square corners). It could be a custom control or anything (however, I am not yet familiar with creating my own custom controls), but I need to add Text Controls, Pictures, Label Controls, etc. to this floating form.
Any help would be appreciated.
Thanks
UPDATE
I am trying to create something to this affect:
So imagine the ? being the Edit button and the other being a form with custom controls.

Like this?
To get this behavior:
Select an image which will represent your speech bubble. Put a PictureBox on the form, make it use this image. Place two labels, as above, adjust the font.
Pick your transparency key (color). Your image background and form background need to be set to that. I used black for demo purposes, which is a bad choice if you plan to have any black or text in your speech bubble. Set form's TransparencyKey property to this color in designer. More about TransparencyKey on MSDN.
(final step, not shown on the screenshot). Set FormBorderStyle = None.
Also make sure you have other ways to close your bubble, because X will be unavailable.
The final result may look something like the following:
Note: You may notice some drawing artifacts, most images on the internet have smooth borders, and transparency key does not support shades, has to be exact color. If you are fine with these minor artifacts, feel free to leave it at that. Or, edit it to get rough borders. Or find another one that better suits your needs.

Related

How to handle in place text editing in VB.net

I have a program that dynamically draws rectangles and then draws the string (name and description) inside the rectangles. My intended behavior is when a user clicks on any of the rectangle, it should show the typing cursor and allow the text to be edited.
What I have tried so far is create a textbox overlay the rectangle the user clicked on. This seems to work ok but I feel as if this isn't the best way to handle it. Does anyone have an alternate solution/idea?
its a bit complicated and maybe not worth it but,
you can listen to user keyboard and when is clicking the rectangle start inputting the text from keyboard to a label (on top of the rectangle)...

WinRT - ImageButton for transparent PNGs

I'm using XAML Toolkit ImageButton control to be able to create normal and pressed states for a button. Code is:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/1_off.png"
PressedStateImageSource="ms-appx:///Assets/1_on.png"
Width="500"
Height="200">
</toolkit:ImageButton>
Issue I'm facing is, say I have a shape which isn't rectangle or square. For example I have PNGs for star and arrow object. Is there a way to set their boundary corresponding to shape? If not, please advice the best approach to handle such scenarios.
There are two options I tried
When clicking using mouse or touch - you'd check the last position of the pointer before click and see if the image in your button has a non-transparent pixel at that position.
Pros:
It's simpler than option 2.
You get most precise information
Cons:
You can't tell if a button got clicked with mouse, touch, pen, keyboard or by narrator using automation, so you could end up filtering out keyboard clicks just because the mouse cursor is a bit off. You could possibly use some heuristics like how long ago was the pointer move or pointer down event before the click event, but it's a bit hacky and might be unreliable.
Generate a vector path for your image and put it in the button template as a Path element with Fill="Transparent", then mark any other non-transparent or hit testable template elements (buttons, borders with Background="Transparent", etc.) as IsHitTestVisible="false".
Pros:
Doesn't break any input methods
Can be quite precise
For some shapes like a circle - the Path.Data could be quite simple or you could even use something like an Ellipse element instead
Cons:
You need to generate the path somehow
A complex path might adversely affect performance
A better solution overall in most cases is to leave the hit-testable area rectangular. The reason is - an arbitrary shape is a finicky and unreliable hit test target so it makes clicking your button more difficult. Using the default rectangular border or at most - an ellipse shape is a lot simpler and more usable.

How to set panel, buttons, labels and menu strip to be transparent?

I'm trying to keep transparency of buttons and labels which are inside of a panel control.
I set the BackColor properties to Transparent, but it doesn't work.
Also I tried
Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
Me.Panel1.BackColor = Color.Transparent
but it doesn't seem to work.
The screenshot below is our design plan. We try to set an image below the panel, buttons and Menu Strip. Can you tell me please if this is possible, and if so, how to?
http://www.gomidjets.com/images/upper.png
With regards to custom designing your Form in WinForms, it isn't supported very well. Only some of the controls support transparency, and it really impacts on performance. If you are avid that it must be transparent, make sure that your Form has its TransparencyKey set to a value, and then change each of the Panels, Buttons, Labels and MenuStrips background to this color (Usually some obtuse color).
If your program is in its early stages, I strongly suggest that you give WPF some serious consideration. From the level of customization to your Form you are doing, you would be much better doing WPF. I myself have just moved over, and this is a screeny of my first project in WPF (And I've learnt this all from StackOverflow, so you should pick it up pretty fast!)
As you can see, literally everything on that form has been customised, and every single control supports full Transparency!

can we place a picture in a picture box in differrent place?

i am using vb.net
i just wanna ask if we can place a picture in a picture box in different places...
for example, we place a picture in the center of a picture box then we place another picture on the left side of the picture box. is it possible??
and also can we use one picture box that can contain more pictures or images on it???
to make it clear, it is a drag and drop senario, first you have to drag a picture from a toolbar for example, then you are to drop it on the picutre box, the problem is, we have to drop more than one picture in the picturebox, so is it really possible?
To my knowledge, this is not possible with the standard .NET picturebox control.
You could, however, create a custom control that would encompass this functionality.
I'm thinking it wouldn't be too complicated to do.
But probably the best way to handle it would be to create your picture box controls programmatically.
EDIT: Found something that might be useful for you, on CodeProject. Its a extended picturebox control, that seems to have multiple pictures in it.
Extended Picturebox
You will need to build all this functionality from scratch no matter which control you're using. You can use Picturebox, Button, Panel and so on, and they'll all provide the same fundemental for building the required functionality. I would suggest that you used a panel/canvas though. And as Jon suggested, subclassing a panel to create a custom control would properably be the best idea.
Inside this custom control, you will need to keep track of which images that have been dragged into the control, which images is affected by several mouse actions such as click, hover and release, and you will need to draw the pictures manually.

Picture box goes blank

In VisualBasic.Net When I activate a picture box and then draw something on it, it draws and then immediately goes blank. Works fine when I re-draw it, but almost always messes up the first time I draw on it. This has happenned with several different programs, and the help file is no help.
Try setting the DoubleBuffered property
http://msdn.microsoft.com/en-us/library/system.windows.forms.control.doublebuffered.aspx
If that's not it, please provide more info.
Usually, if you're drawing something on a picture box or on another control, you have to take over the OnPaint event, and you're responsible of persisting what you draw on this event.
Thank you Andrew, but no help. I'm using .Net Framework 1.1, which does not offer the DoubleBuffered property... it was new in 2.0.
Not sure what additional info to provide.. the code is 300 lines long. When a button is clicked, the code expands my form, makes two picture boxes visible (one on top of the other (the back one is for some graph labels), and then uses some graphic brushes and pens to draw a graph on the front box. There's some database activity and calculations going on in the background at the same time.
I assume you're using the standard PictureBox component. Do you draw in the Paint-Handler? If not then the PictureBox will just erase your painted stuff next time it's asked to redraw itself (erase background etc.).
Yes, I believe I am using the standard picture box.
By Paint-Handler, I assume you mean a [Control].PaintEvent Handler. No I'm not using an event handler to do the drawing... drawing my chart is not an event in itself, but part of a much larger response to a button click event.
If you are saying that having the drawing code be part of a separate and specific handler can solve my problem, than I guess I could raise an internal event every time I want to redraw the chart. But I Would rather just figure out what is causing the PB to redraw itself without being told to.
If you cannot use the DoubleBuffered than you can HIDE a second picture box. You do the drawing in it and once it's completed you draw back to the VISIBLE one. This way the process of drawing is done on the hidden one and the white/flickering will not be shown.