How to Create a Translucent Circular Control with Text That Doesn't Overlap Other Controls?

Translucent circle control with text

Question

In a project, I need to add a circle control and display some text in the middle.

My problem is that the circle is too small and when I resize it, it overlaps the other controls. I want the circle to be the same width as the square.

Or, how to make the background of the control transparent?

Solution

This is a custom control derived from Control that can be made translucent.

The interface is a colored circle that can contain several numbers.

This control exposes the following custom properties:

Opacity : The opacity level of the control background [0, 255]
InnerPadding (inner padding) : The distance between the inner rectangle that defines the circle boundary and the control boundary.
FontPadding (font padding) : The distance between the text and the inner rectangle.

Achieve transparency by overriding CreateParams and then setting ExStyle |= WS_EX_TRANSPARENT;

Control.SetStyle() method is used to modify the control behavior, add the following ControlStyles:

▶ ControlStyles.Opaque: Prevents the control's background from being drawn so it is not managed by the system. Used in conjunction with CreateParams, setting the control's extended style to WS_EX_TRANSPARENT makes the control fully transparent.
▶ ControlStyles.SupportsTransparentBackColor: The control accepts an alpha value for its background color. If you don't also set ControlStyles.UserPaint, it will not be used to simulate transparency. We will do it ourselves through other methods.

To see how it works, create a new class file, replace all the code in it with this code, keep the namespace and build the project/solution.

New custom controls will appear in the toolbox. Drag and drop it onto the form. Modify its custom properties as needed.

Visual representation of the control:

Note and Disclaimer

• This is a prototype control and lacks a custom designer (cannot post here, too much code, also tied to the framework).
• As described here, it can completely overlap other controls in a form or other container. Some overlaps are not handled in this simplified implementation.
• The font is hardcoded to Segoe UI because this font has a baseline that simplifies the placement of text in the middle of the circular area.
• Other fonts have different baselines and require more complex processing.

The above is the detailed content of How to Create a Translucent Circular Control with Text That Doesn't Overlap Other Controls?. For more information, please follow other related articles on the PHP Chinese website!