[solved] How to control checkbox colors

[lainz]

Windows uses bitmaps in themes. It depends on the version of Windows how it looks.

[KodeZwerg]

Thanks kodezwerg

You are welcomed.

Is it possible to have a colored checkbox that looks more like 5he standard checkbox though?

Yes, four variations come into my mind by thinking about.
1. search in my code where i make a call to "Ellipse()", comment this out
    set a color to Brush/Pen that you want that the border get - keep in mind it should have 2 different colors, one for "mouse is not over" and one for opposite
    draw a framerect 13x13
    depend on state draw something inside that framerect (i suggest to paint max 10x10 to have some pixel padding between graphic and border)
    (ie 2 lines for a checkmark, paint nothing for unchecked, filled rectangle for grayed)
    keep rest of code, should work out-of-the-box
2. search in my code where i make a call to "Ellipse()", comment this out
    add code that loads images from resource
    create for each state 2 images (mouseover/mousenotover) with a size of 13x13
    based on current state load image and copyrect it to my LBitmap, watch source to differentiate between checkbox modes like alignment/bidi to place image on correct side (left/right)
    keep rest of code, should work out-of-the-box
3. search in my code where i make a call to "Ellipse()", comment this out
    select a font that offer checkboxes in different states
    draw text instead of painting image
    keep rest of code, should work out-of-the-box
4. windows exclusive would be to grab systems HBITMAP for the checkbox and would end again in its basic color
    it is possible to re-color by putting a alphatransparent color (LBackground) over it
    if thats your destiny you should switch to PNG for easier doing

Does that answer your question?
If you go the variant 1 way, it would be cool to watch your progress so I might add a "Style" selector including "Classic" and my "Proof-Of-Concept".

[lainz]

Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.

[KodeZwerg]

Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.

Not really, that be an extra, but while I've tested it I realized that my positioning needs a correction.
For me way more interesting would be to hear if it works on non-windows?
Attached image @ 175% scale

[Joanna from IRC]

Thanks for the help I will experiment with code

[lainz]

Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.

Not really, that be an extra, but while I've tested it I realized that my positioning needs a correction.
For me way more interesting would be to hear if it works on non-windows?
Attached image @ 175% scale

I mean bitmap images, not TBitmap.

Edit: Anyway you must scale the drawings... try with ScaleX(Value, 96) and ScaleY(Value, 96)

[KodeZwerg]

Edit: Anyway you must scale the drawings... try with ScaleX(Value, 96) and ScaleY(Value, 96)

Your edit came to slow, here is my alpha dpi aware for customdrawn (for images they can be resampled at runtime, no need to put many dpi variants in, or?)

Code: Pascal  [Select][+][-]

1. procedure TCheckBox.CreateImage(var AImage: TCustomBitmap);
2.   function DPIScaled(const ASize: Integer): Integer;
3.   begin
4.     Result := ASize * Round(Graphics.ScreenInfo.PixelsPerInchX / 96);
5.   end;
6. const
7.   BaseX = Integer(13);
8.   BaseY = Integer(13);
9. var
10.   LBitmap: TCustomBitmap;
11.   LBackground: TColor;
12.   LRect: TRect;
13.   LX, LY: Integer;
14. begin
15.   // setup background color
16.   if Self.Color = clDefault then
17.     LBackground := Self.GetDefaultColor(dctBrush)
18.   else
19.     LBackground := Self.Color;
20.   // create image to paint on
21.   LBitmap := Graphics.TCustomBitmap.Create{%H-};
22.   try
23.     // setup defaults
24.     LBitmap.SetSize(Self.ClientWidth, Self.ClientHeight);
25.     LBitmap.Canvas.AntialiasingMode := amDontCare; //amOn;
26.     LBitmap.Canvas.CopyMode := cmSrcCopy;
27.     // setup font
28.     LBitmap.Canvas.Font := Self.Font;
29.     if Self.Font.Color = clDefault then
30.       LBitmap.Canvas.Font.Color := Self.GetDefaultColor(dctFont);
31.     if (not Self.Enabled) then
32.       LBitmap.Canvas.Font.Color := clGrayText;
33.     // alpha test: transparency
34.     // does not work :D (LBitmap is transparent but the control is not)
35.     // currently it would let original CheckBox painting shine thru
36.     if FTransparent then
37.       begin
38.         LBitmap.TransparentMode := tmFixed;
39.         LBitmap.TransparentColor := LBackground;
40.         LBitmap.Transparent := True;
41.       end;
42.     // setup initial canvas values
43.     LBitmap.Canvas.Brush.Color := LBackground;
44.     LBitmap.Canvas.Brush.Style := bsSolid;
45.     LBitmap.Canvas.Pen.Style := psSolid;
46.     // add small effect when the mouse is over the control
47.     if FMouseOver then
48.       LBitmap.Canvas.Pen.Color := clBtnHighlight
49.     else
50.       LBitmap.Canvas.Pen.Color := clBlack;
51.     LBitmap.Canvas.Pen.Width := 1;
52.     // clear image
53.     LBitmap.Canvas.FillRect(LBitmap.Canvas.ClipRect);
54.     // prepare circle coordinates
55.     LX := DPIScaled(BaseX);
56.     LY := DPIScaled(BaseY);
57.     LRect.Top := (LBitmap.Canvas.Height - LY) div 2;
58.     if (Self.Alignment = taRightJustify) and (Self.BiDiMode <> bdRightToLeft) then
59.       LRect.Left := DPIScaled(1);
60.     if (
61.         ((Self.Alignment = taRightJustify) and (Self.BiDiMode = bdRightToLeft))
62.         or
63.         ((Self.Alignment = taLeftJustify) and (Self.BiDiMode = bdRightToLeft))
64.         or
65.         ((Self.Alignment = taLeftJustify) and (Self.BiDiMode = bdLeftToRight))
66.         )
67.        then
68.       LRect.Left := LBitmap.Canvas.ClipRect.Width - (LX);
69.     LRect.Right := LRect.Left + LX;
70.     LRect.Bottom := LRect.Top + LY;
71.     InflateRect(LRect, -1, -1);
72.     // choose color by current state
73.     if Self.Checked or (Self.State = cbChecked) then
74.       LBitmap.Canvas.Brush.Color := clLime;
75.     if (not Self.Checked) or (Self.State = cbUnchecked) then
76.       LBitmap.Canvas.Brush.Color := clRed;
77.     if (Self.State = cbGrayed) then
78.       LBitmap.Canvas.Brush.Color := clMedGray;
79.     LBitmap.Canvas.Ellipse(LRect);
80.     // prepare color and write text
81.     LBitmap.Canvas.Brush.Color := LBackground;
82.  
83.     if (Self.Alignment = taRightJustify) and (Self.BiDiMode <> bdRightToLeft) then
84.       LBitmap.Canvas.TextOut(LX + DPIScaled(1), (LBitmap.Canvas.Height - LBitmap.Canvas.TextHeight(Self.Caption)) div 2, Self.Caption)
85.     else
86.       LBitmap.Canvas.TextOut(DPIScaled(1), (LBitmap.Canvas.Height - LBitmap.Canvas.TextHeight(Self.Caption)) div 2, Self.Caption);
87.  
88.     // when focused draw a rectangle around
89.     if Self.Focused then
90.       begin
91.         LBitmap.Canvas.Brush.Color := clActiveCaption;
92.         LBitmap.Canvas.FrameRect(LBitmap.Canvas.ClipRect);
93.       end;
94.     // transport image
95.     AImage := TCustomBitmap.Create;
96.     AImage.Assign(LBitmap);
97.   finally
98.     LBitmap.Free;
99.   end;
100. end;

I will update soon with ScaleX/Y

[Joanna from IRC]

Kodezwerg I’m curious about your screen shots there doesn’t seem to be any check mark in the one that is checked?

[KodeZwerg]

Kodezwerg I’m curious about your screen shots there doesn’t seem to be any check mark in the one that is checked?

For what do you think the different circle colors are in use on my image? 
We got green, red and gray, now take a guess 
It is just a PoC, what else could better proof between "classic rectangle" and the fat dot that I put there

[Joanna from IRC]

I’m not sure what is involved in the drawing of the checkbox. Or if it’s possible after changing the checkbox color.

[lainz]

I’m not sure what is involved in the drawing of the checkbox. Or if it’s possible after changing the checkbox color.

The drawing is here:

Code: Pascal  [Select][+][-]

1.  // choose color by current state
2.  
3. // color for checked
4.     if Self.Checked or (Self.State = cbChecked) then
5.       LBitmap.Canvas.Brush.Color := clLime;
6.  
7. // color for unchecked
8.     if (not Self.Checked) or (Self.State = cbUnchecked) then
9.       LBitmap.Canvas.Brush.Color := clRed;
10.  
11. // color for grayed
12.     if (Self.State = cbGrayed) then
13.       LBitmap.Canvas.Brush.Color := clMedGray;
14.  
15. // draw the checkbox
16.     LBitmap.Canvas.Ellipse(LRect);

You need to draw the checkbox instead of drawing an ellopse. For example draw a box and a tickmark depending on the state...

[Joanna from IRC]

Thanks lainz does that do the check part or just box?

[lainz]

Thanks lainz does that do the check part or just box?

Both. Except that there's no check, just a color as KodeZwerg said...

[Joanna from IRC]

Thanks for the answers. I hope this Code is useful to someone.For me the colored checkboxes look too much like radio buttons.

[lainz]

Thanks for the answers. I hope this Code is useful to someone.For me the colored checkboxes look too much like radio buttons.

Feel free to change it. Draw a square and a cross at least, or a check is not that hard, just try...