C#translucent circular text control

This article will solve a common problem: how to create a circular control with text and explain how to overcome the challenges such as transparency and size adjustment.

question

The initial challenge is to create a circle with the same square width as the inner connection. Adjusting the circular size will cause overlap with other controls. In addition, the background of the control needs to be transparent.

Solution

In order to achieve transparency, we created a custom control from the Control class. The interface contains a colorful circle that can display text. The control discloses custom attributes for setting opacity, internal filling (distance between internal rectangles and control boundary) and font filling (distance between text and internal rectangles). In order to make the control transparent, we rewritten the CreateParams method and set its EXSTYLE to WS_EX_TRANSPARENT.

custom style

We use the control.setStyle () method to modify the control behavior by adding ControlStyles:

ControlStyles.opaque:

Prevent Background from drawing background to avoid system management.

ControlStyles.supportstransparentbackColor:

Allow control to accept the Alpha value for its Background color.
• handle mouse incidents
• The control supports mouse events for dragging and adjusting size. font processing

The font hard code is Segoe UI, which simplifies the positioning of the text in the middle of the circular area. Other fonts have different baselines and need to be more complicated.

complete code

C#custom control complete code has been provided.

Application control To use this control, please create a new class file, paste the provided code to it, and then build a project. The custom control will appear in the toolbox. Drag it to the window and adjust its custom attributes as needed.

As a result, a translucent circular control with text can be located and adjusted without overlapping with other controls.