I need to show a circle on the form with a number inside it, like this:
To make it happen, I plonked StyleSheet control on the designer surface (named styleCircles) with the following styles:
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid gray;
display: flex;
justify-content: center;
align-items: center;
color: black;
}
.number {
font-size: 14px;
font-family: Arial;
font-weight: 400;
}
.status-past-due {
background-color: #FF9900;
}
.status-due-today {
background-color: #6FA8DC;
}
.status-future {
background-color: #93C47D;
}
.status-completed {
background-color: #CCCCCC;
}
I then dropped a bunch of HtmlPanel controls (one for each circle that I wish to show), and set its Html property to 
And then I set the CssClass on styleCircles to circle.status-due-today number.
This works fine and it renders well. However, I am not 100% sure that this is the most optimal way of doing this, especially since I will have multiple circles.
Is there a better way or is this fine?
You could use the Shape Control, with a label on top for the text of the number.
https://docs.wisej.com/api/wisej.web/content/shape
https://docs.wisej.com/docs/controls/content/shape
To make a circle- Add a Shape object by dragging it to the designer from the toolbar. Then, in the designer, set the radius of the border to a big enough number so that it’s curved (I used 100). Then make sure the dimensions of the Shape object are a square (ie 50 by 50).
To make reusable, you can make a custom control with a Shape and a Label in it.
To create one, right-click on the project in the solution explorer-> Add -> New Item ->User Control.
Call it something like ShapeLabel.cs
Edit the code so that it extends the Shape class like so:
public partial class ShapeLabel : Wisej.Web.Shape
And then open it in the designer and add a label. You can set the modifier of the label to “Public” in the designer- this will let you access all of the properties of the label, such as the text.
shapeLabel1.label1.Text
You can simply drag the custom control into the designer from the toolbox. Note that after creating the custom control, you might need to restart Visual Studio before it appears in the toolbox. Additionally, you will need to compile the code before you can open the designer.
I have included a sample that shows both the simpler approach (adding a shape to the designer with a label on top) , and the better approach (creating a custom ShapeLabel control.)
Please login first to submit.