Styling

The CheckBox provides a set of styling options by exposing properties for customizing its visual appearance.

You can set the color of the check mark as well as the control itself in each of the available states.

Background, Border, and Symbol Colors

To set the background and border colors of the CheckBox, use the following properties:

  • CheckedColor—Defines the Color applied to the control when it is checked. This is both the border and background color.
  • UncheckedColor—Defines the Color applied to the control when it is unchecked. This is the border color only, the background is transparent when unchecked.
  • IndeterminateColor—Defines the Color applied to the control when it is in Indeterminate state. This is both the border and background color.

To set the symbol colors of the CheckBox, use the following properties:

  • CheckedSymbolColor—Defines the Color applied to the check symbol of the control when it is in Checked state.
  • IndeterminateSymbolColor—Defines the Color applied to the Indeterminate symbol of the control.

The following example demonstrates how to set the CheckedColor property.

<telerikPrimitives:RadCheckBox CheckedColor="Aqua" />
The following example demonstrates how to set the UncheckedColor property.
<telerikPrimitives:RadCheckBox UncheckedColor="DarkBlue" />

The following example demonstrates how to set the CheckedSymbolColor property.

<telerikPrimitives:RadCheckBox CheckedSymbolColor="Black" />
The following example demonstrates how to set the IndeterminateColor and IndeterminateSymbolColor properties.
<telerikPrimitives:RadCheckBox x:Name="checkbox" IsChecked="{x:Null}" IndeterminateColor="Brown" IndeterminateSymbolColor="Coral" />

The image below shows the end result.

CheckBox Color Changing Options Example

Stroke Thickness

The CheckBox exposes a StrokeWidth property that specifies the width of the lines with which the Checkbox element is drawn. It affects the border of the control as well as the check mark.

The following example demonstrates how to apply a StrokeWidth value.

<telerikPrimitives:RadCheckBox x:Name="checkboxStrokeWidth" StrokeWidth="5"/>

The image below shows the result at runtime displaying the defined Indeterminate state together with the configured StrokeWidth and Length.

CheckBox Key Feature Example

See Also

In this article
Not finding the help you need?