Is it possible to adjust the color of the hook in a checked RadCheckBox?

2 Answers 78 Views
Buttons, RadioButton, CheckBox, etc
tar
Top achievements
Rank 2
Iron
Iron
Iron
tar asked on 28 Aug 2023, 04:28 PM

I did not find the element, primitive or whatever may be responsible for the color of the hook when a RadCheckBox is checked. Adjusting ButtonElement.CheckMarkPrimitive.CheckElement.ForeColor only applies to the indeterminate square but not to the checked hook.

Am I even able to adjust it's color and would it be dependend of ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle?

 

 

2 Answers, 1 is accepted

Sort by
1
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 01 Sep 2023, 08:01 AM

Hello M.S.,

Thank you for specifying which theme you are using. 

In the Fluent themes, we are using an image instead of the actual checkmark element. Here is how to remove the image and show the checkmark with a specific color:

public Form1()
{
    InitializeComponent();
    radCheckBox1.ButtonElement.CheckMarkPrimitive.CheckElement.ForeColor = Color.Red;
    radCheckBox1.ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle = CheckPrimitiveStyleEnum.Win8;
    radCheckBox1.ButtonElement.CheckMarkPrimitive.ImageElement.Image = null;
}

Here is the result:

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

tar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 01 Sep 2023, 06:46 PM

Thanks, this worked.

One minor issue left: while the hook looks centered, the indeterminate square is slightly off-centered.

Either it is 1 pixel too small to the right and bottom -or- it is one pixel too large to the top and left.

How could this be fixed?

Dinko | Tech Support Engineer
Telerik team
commented on 04 Sep 2023, 09:28 AM

Thank you for the provided image.

This could happen if you show the form on a HDPI. Can you share what is the DPI on the monitor where the form is shown?

tar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 04 Sep 2023, 10:38 AM | edited

On my LG UltraGear 34GK950G-B the pixels per inch are 110 with the default resolution of 3440x1440 and I do not use any scaling.

Update:

By using NativeMethods.GetSystemDpi(); I get a Point of (96; 96).

tar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 04 Sep 2023, 11:00 PM | edited

Fixed it:

First, I tried to manually paint a Bitmap and use it as Image but the problem is that your code somehow automatically tries to scale it and fails (e.g. it widened an 8x8 image to 13x13 pixels here which looked rather bad). As I did not find any setting to disable the automatic scaling I finally solved it by painting the square directly.

1. Switch the CheckPrimitiveStyle property depending on the CheckState in order to only paint the checked hook but not the indeterminate square:

protected override void OnCheckStateChanged(EventArgs e) {
  base.OnCheckStateChanged(e);

  if (CheckState == CheckState.Checked) {
    ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle = CheckPrimitiveStyleEnum.Win8;
  } else {
    ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle = CheckPrimitiveStyleEnum.None;
  }
}

protected override void OnLoad(Size desiredSize) {
  base.OnLoad(desiredSize);

  if (CheckState == CheckState.Checked) {
    ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle = CheckPrimitiveStyleEnum.Win8;
  } else {
    ButtonElement.CheckMarkPrimitive.CheckElement.CheckPrimitiveStyle = CheckPrimitiveStyleEnum.None;
  }
}

2. Paint the indeterminate square manually by overriding OnPaint():

protected override void OnPaint(PaintEventArgs e) {
  base.OnPaint(e);

  if (CheckState == CheckState.Indeterminate) {
    using Brush brush = new SolidBrush(Color.Aqua);

    GraphicsState gstate = e.Graphics.Save();
    e.Graphics.FillRectangle(
      brush,
      ButtonElement.CheckMarkPrimitive.ControlBoundingRectangle.Location.X + 5,
      ButtonElement.CheckMarkPrimitive.ControlBoundingRectangle.Location.Y + 5,
      ButtonElement.CheckMarkPrimitive.ControlBoundingRectangle.Size.Width  - 10,
      ButtonElement.CheckMarkPrimitive.ControlBoundingRectangle.Size.Height - 10
    );
    e.Graphics.Restore(gstate);
  }
}

The size & location of the painted rectangle depends on the CheckMarkPrimitive, its border(s) and the padding you want to apply. As all my borders have a width of 1 pixel and I wanted a padding of 4 pixels the sum of the space is 5. The width and height should then be subtracted by the double of this amount in order to place the square in the centre of the CheckMarkPrimitive.

Dinko | Tech Support Engineer
Telerik team
commented on 05 Sep 2023, 12:16 PM

I am happy to hear that you were able to find a solution for your scenario and thank you for sharing it. In general, you can disable the scaling mechanism of our controls by setting the RadControl.EnableDpiScaling static property to false. This property is mentioned in the DPI Support help article.
tar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 06 Sep 2023, 02:47 PM

Thanks again but even changing or disabling the DPI settings the square is not correctly displayed. I'll use my fix and move on :)
0
Dinko | Tech Support Engineer
Telerik team
answered on 29 Aug 2023, 11:07 AM

Hi M.S,

If I have correctly understood your approach, you want to customize the color of the check mark inside the rectangle of the control, which appears when the control is checked. If this is the case, the approach depends on the applied theme. Different themes have different settings. Can you share which theme is applied in your application so I can try to find a proper way to achieve this?

I am looking forward to your reply.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

tar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 29 Aug 2023, 11:57 AM

Hi Dinko,

the base theme used is Fluent.Dark but I do not want to adjust the color(s) via the theme (which means the Visual Style Builder) but programmatically. Do I need to override some OnPaint()?

Tags
Buttons, RadioButton, CheckBox, etc
Asked by
tar
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or