Custom Chat Box Control - How to make it scrollable plus more - c#

I am making a simple chat box control. Its just a hobby project to learn. I want to make my own control like below :
I have learnt how to paint graphics and text onto a custom control surface inheriting from control using OnPaint. But problem is I want this control to have the elements in the screenshot, most importantly to be able to infinitly scroll. Had a try googling but didnt find any answer.
Also because its painted, I probably wont be able to differentiate between the different users, or the speech bubbles as they are all the same to the control.
But is there a way to know the user is clicking on a certain bubble, or certain user? And the other question was how to make it scrollable?
Many thanks in advance.

If you want to make it scrollable, you should try to make each comment a separate panel & add that panel to your control.
Then set the autosize property of your control to true (you will need to make your control a panel, inheriting control doesn't have autosize property).
For the clicking on the bubbles, I suggest again to make each bubble a custom control & then add it to the panel (the panel inside your main panel), then just use the MouseEnter event.

Related

How to change the back color of the scrollbar of a panel?

So I am making a dark mode option for my application and I want the scrollbar back color to also change color so that it doesn't look out of place. I have tried to search for a solution but so far I have only found code for a scrollbar as in the control. but I need to change the scrollbar of a panel. Does someone happen to know how to do this? Thanks a lot in advance.
I faced the same challenge when I started to work on custom controls that should support the Dark Mode. The problem with Panel control as well as other controls is that their ScrollBars are managed internally by those controls and there is no way to customize them.
My Idea was to create a custom ScrollBar control that supports custom colors and themes, see my answer https://stackoverflow.com/a/73613059/5514131
And in our custom Panel control, we create the custom ScrollBars internally and use the various Panel properties and events to link the custom ScrollBars to our Panel.
With the help of the Panel VerticalScroll and HorizontalScroll properties, we can know whether the default Panel scrollbars are visible or not and their properties to copy to our custom ScrollBars.
With the help of LocationChanged, SizeChanged, and other Panel events and properties we should bind the custom ScrollBars to our Panel and place them on top of the default ones to completely cover them.
I used the OnMouseWheel and OnScroll to update our custom ScrollBars when the Panel is scrolled using the code or mouse wheel.
We should dispose the custom ScrollBars when the Panel is disposed, or its handle is destroyed.
I know this isn't the best approach, but it should work to prevent the default ugly scrollbars from ruining your beautiful Dark Mode.
This workaround can be applied to other controls, I actually used it with TabControls, however, it will be more complex to implement.
Windows Forms Panel control with custom ScrollBars based on the Flat ScrollBar control https://gist.github.com/ahmedosama007/39f8b76e65300e5969110b753fe0a654

How to set Custom control as ToolTip for Button or Label?

I have created a custom control of my own and i am in a need of making this custom control as a ToolTip for the Labels or Buttons.
But i could not find a way to set the Custom control as ToolTip.
Anyone please help me on setting the Custom control as ToolTip.
Note:
I don't need solution with showing the Custom Control in mouse_hover events of controls.
Please suggest me ideas to make the custom control as default ToolTip in standard way.
Regards,
Amal Raj
I assume that you already know about overriding the paint event, so I won't go into that. If you want anything a bit more complicated, deriving from the ToolTip control to extend it for your purposes won't make much sense since you'll run into restrictions quite fast.
What you should do is implement your own ToolTip control by reusing some important bits from the original one. If you're feeling adventurous you could follow these steps to get started. I'm going to refer to your custom control as tooltip from now on:
If you want to show custom text or something else for each control that uses your tooltip, you need to implement IExtenderProvider in your class. Here's more about it.
You need to keep track of controls that are using your tooltip and the custom values you've set for them. Internally, Windows Forms tooltip uses a HashTable for that purpose. Key is the control showing your tooltip and value is the tooltip text (or something else you want to tie to your tooltip).
If you want to have more than just one string to show (title, description, image etc), you can have multiple HashTables.
When adding the tooltip to a control, subscribe to mouse events (enter, move, leave) to keep track of when to show the tooltip. If you want to have a delay before showing the control, you need to use an internal timer to keep track of time.
You'll most likely want the tooltip to extend outside the main form's boundaries. You could wrap your tooltip inside a headerless form or an alpha blended form to allow other shapes than rectangle.
Those are the very generalized first steps. In reality, there's quite a bit more to be done. It's been a few years since I implemented my custom ToolTip control so I might be forgetting something crucial. However, if you spend some time poking around the code of Windows Forms's ToolTip class, you'll get quite a good idea of what's going on behind the curtains.
I haven't reviewed the code myself but judging from the ratings, this article will give you a good starting point too: A ToolTip with Title, Multiline Contents, and Image. It's in VB.NET but you can easily convert it to C# by using Telerik's converter or any other.

Balloon pop up over control mouse enter/exit

Hello,
Above is the program I am writing. On the right panel is basically two custom controls (the blue rectangle area) I created and just added them as controls to the background panel control when this winform program loads.
I used MS paint to draw out the pop up balloon that I want to see when my mouse enter this control's area. I want to do the following:
1. If mouse enter the control area, the yellow area balloon pop up and populate with the information of that specific control
2. If mouse move out of the control area, the pop up balloon disappear.
Can this be done with Winform application? I looked around and found out about Tooltip class but so far from researching I don't know if it does what I want to do.
I could be wrong but googling around gave me the impress that Tooltip offers very little in term of style. Ideally I want to make this pop up balloon into almost like a border-less pop up window where I can put image , font ect.....at will. Also Tooltip works if you hover over a button or specific field whereas I want the entire control area.
Can this be done? I appreciate if you can point me to any work around if there is one.
I wrote a comment, but I figure I'll expand it into a full answer. This is assuming you want a new control, which isn't a tooltip, for maximum customizability. I did something similar to this for work recently, to act as a non-modal info popup that disappears when clicked.
Creating a Custom Popup Form
What you want is essentially a floating popup that appears over your form, which means you'll want to define a new Form object, rather than a UserControl, as it won't actually be embedded within your other form.
Give it a multiline, non-editable textbox that you can fill with the information you want to populate, then simply call a new instance of the form on your Mouse_Enter event. Close it upon Mouse_Leave.
Adjusting The Style
You'll have to play with it a bit to get it to actually act like a popup and not just a window. I'd recommend setting it to a non-modal popup, and removing the border. You can write a function to automatically size it to its contents. I don't imagine you'll want the user manually resizing it.
Some other things to look into would be overriding the CreateParams property that comes with the basic Form object. You can force DropShadows and TopMost forms without making the form modal. Overriding ShowWithoutActivation to always return true will prevent the form from stealing focus when it pops up.
I'm not sure if you can pull off rounded edges like you have in your mockup. Perhaps you can pull it off with some wizardry in the OnPaint() function, but I couldn't tell you how to do it.
It might be a bit of a pain for fiddling around with, but you can get some good functionality and appearance out of it. If you think you can pull it off acceptably with the ToolTip class, go for it. It took me about a week to get my notifications where I wanted them (though I added several features that you probably don't need to worry about).
Examples
Some keywords to look up in related searches would be Toast Notification and Non-Modal Popup. This might be some use:
http://www.codeproject.com/Articles/442983/Android-Style-Toast-Notification-for-NET
Since you already have implemented custom user controls you might want to try it again. Make a control that is that style and color, changes it's size based on it's text. You can feed it information (such as the text to display) from your existing user control object. You can also have the mouse enter/leave code reside in your first user control.
If you're not sure how to make a rectangle with round corners you can either make it on the fly using a graphics object (which will turn into a bitmap on the screen) or make it how you want it to look in GIMP (or photoshop if you have it) then use that image as the background on your user control. Make the default background transparent (so your voids above the round corners are not grey). If you make a pre loaded image you'll need to be aware you will only be able to scale it equally in Y and X directions. unequal scaling will make it look distorted.
Can you use the Mouse_Enter event on the control?

How do I center controls without resizing them? (.net Winforms)

I have a fairly simple user control that represents a basic login control. So it has a couple labels, text boxes, and a button. I would like this user control to fill its container, so I have set its dock mode to fill. So far easy enough.
Now, I would like all the controls in my user control to be centered based on whatever size my user control is when rendered. I can't think of a anchor / dock combination that will do the trick.
The user control has a ReSize event. So I know I can calculate and move the controls based on my User control's size during that event. But I was hoping this issue was common enough to be handled through the designer if I desired.
It is actually all pretty simple. You just have to turn off all anchor properties, and set dock to none.
Look at the TableLayoutPanel control and use it in conjunction with the docking and anchor properties. You should be able to control the layout fairly precisely that way.

Overlay Control over Winform

is it possible to overlay a control (lets say a rich text box or a link label) over onother control at a specific position on a Winform?
I have did some test with GDI+ but without luck...
You can place one control on top of the other, but it will obscure the one under it. Some controls (like Label) support transparent background, in which case it won't obscure the control under it.
Do you want both to be visible at the same time? If so, check out Giving Your Control a Transparent Background.
If it's simply a matter of putting two controls in the same place and showing one or the other, you can use Control.BringToFront() and .SendToBack(), as well as individually controlling their visibilities.
Finally, if it's text you want to draw on top of another control, you might want to look into drawing that text yourself from that other control - the TextRenderer class makes it very easy to do so.

Categories

Resources