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

[tar]

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?

 

 

[Dinko | Tech Support Engineer]

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

[tar]

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]

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]

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]

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]

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]

Thanks again but even changing or disabling the DPI settings the square is not correctly displayed. I'll use my fix and move on :)

[Dinko | Tech Support Engineer]

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

[tar]

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()?