How to Create a Translucent Circular Control with Text in C#?

C# translucent circular text control

This article will solve a common problem: how to create a circle control with text, and explain how to overcome challenges such as transparency and resizing.

Question

The initial challenge is to create a circle that is the same width as the inscribed square. Resizing the circle causes it to overlap other controls. Additionally, the background of the control needs to be transparent.

Solution

Custom controls with transparency

To achieve transparency, we create a custom control derived from the Control class. The interface contains a colored circle that can display text. The control exposes custom properties for setting opacity, inner padding (the distance between the inner rectangle and the control's bounds), and font padding (the distance between the text and the inner rectangle).

In order to make the control transparent, we override 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: Prevents the BackGround from being drawn, thereby avoiding system administration.
• ControlStyles.SupportsTransparentBackColor: Allows a control to accept an Alpha value for its BackGround color.

Handling mouse events

The control supports mouse events for dragging and resizing.

Font processing

The font is hardcoded to Segoe UI, which simplifies positioning of text in the middle of the circular area. Other fonts have different baselines and require more complex processing.

Full code

The complete code of C# custom control has been provided.

Application Controls

To use the control, create a new class file, paste the provided code into it, and build the project. The custom control will appear in the toolbox. Drag and drop it onto the form and adjust its custom properties as needed.

The result is a semi-transparent circular control with text that can be positioned and resized without overlapping other controls.

The above is the detailed content of How to Create a Translucent Circular Control with Text in C#?. For more information, please follow other related articles on the PHP Chinese website!