Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

.NET MAUI DXSwitch: Thumb

  • 4 minutes to read

The thumb allows users to toggle the DXSwitch. A user can tap the switch or drag the thumb to the opposite side of the track to change the DXSwitch state.

You can enable the AllowContentTap property to toggle the DXSwitch when a user taps the caption.

#Thumb States

The image below shows all the available states of the thumb:

.NET MAUI DXSwitch - Thumb States

#Thumb Appearance

The following example changes thumb appearance:

.NET MAUI DXSwitch - Thumb Appearance

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
        <dx:DXSwitch ... 
             Content="Airplane mode"

             ThumbColor="Yellow"
             ThumbHeight="20"
             ThumbWidth="20"

             Icon="unchecked"
             IconAspect="AspectFit"
             IconColorizationEnabled="True"
             IconColor="Gray"
             IconHeight="15"
             IconWidth="15" /> 
</ContentPage>

Use the following properties to change thumb appearance:

ThumbColor
Gets or sets the thumb color of the DXSwitch. This is a bindable property.
ThumbHeight
Gets or sets the thumb height of the DXSwitch. This is a bindable property.
ThumbWidth
Gets or sets the thumb width of the DXSwitch. This is a bindable property.
Icon
Gets or sets the thumb icon of the DXSwitch. This is a bindable property.
IconAspect
Gets or sets the thumb icon aspect of the DXSwitch. This is a bindable property.
IconColor
Gets or sets the thumb icon color of the DXSwitch. This is a bindable property.
IconColorizationEnabled
Gets or sets whether to change the thumb icon color of the DXSwitch. This is a bindable property.
IconHeight
Gets or sets the thumb icon height of the DXSwitch. This is a bindable property.
IconWidth
Gets or sets the thumb icon width of the DXSwitch. This is a bindable property.

#Thumb Appearance in the Pressed State

The following example changes thumb appearance in the pressed state:

.NET MAUI DXSwitch - Pressed Thumb Appearance

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
        <dx:DXSwitch ... 
             PressedThumbHeight="20"
             PressedThumbWidth="20"
             PressedThumbShadowColor="LightGray"
             PressedThumbShadowHeight="50"
             PressedThumbShadowWidth="50" /> 
</ContentPage>

Use the following properties to change thumb appearance in the pressed state:

PressedThumbHeight
Gets or sets the thumb height of the DXSwitch in the pressed state. This is a bindable property.
PressedThumbWidth
Gets or sets the thumb width of the DXSwitch in the pressed state. This is a bindable property.
PressedThumbShadowColor
Gets or sets the thumb shadow color of the DXSwitch in the pressed state. This is a bindable property.
PressedThumbShadowHeight
Gets or sets the thumb shadow height of the DXSwitch in the pressed state. This is a bindable property.
PressedThumbShadowWidth
Gets or sets the thumb shadow width of the DXSwitch in the pressed state. This is a bindable property.

#Thumb Appearance in the Checked State

The following example changes thumb appearance in the checked state:

.NET MAUI DXSwitch - Checked Thumb Appearance

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
        <dx:DXSwitch ... 
             IsChecked="True"

             CheckedThumbColor="Green"
             CheckedThumbHeight="25"
             CheckedThumbWidth="25"

             CheckedIcon="checked"
             CheckedIconColor="White" /> 
</ContentPage>

Use the following properties to change thumb appearance in the checked state:

CheckedThumbColor
Gets or sets the thumb color of the DXSwitch in the checked state. This is a bindable property.
CheckedThumbHeight
Gets or sets the thumb height of the DXSwitch in the checked state. This is a bindable property.
CheckedThumbWidth
Gets or sets the thumb width of the DXSwitch in the checked state. This is a bindable property.
CheckedIcon
Gets or sets the thumb icon of the DXSwitch in the checked state. This is a bindable property.
CheckedIconColor
Gets or sets the thumb icon color of the DXSwitch in the checked state. This is a bindable property.

#Thumb Appearance in Disabled and Checked States

The following example changes thumb appearance in disabled and checked states:

.NET MAUI DXSwitch - Disabled Checked Thumb Appearance

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
        <dx:DXSwitch ...
             IsEnabled="False"
             IsChecked="True"

             DisabledCheckedThumbColor="WhiteSmoke"
             DisabledCheckedIconColor="DimGray" /> 
</ContentPage>

Use the following properties to change thumb appearance in disabled and checked states:

DisabledCheckedThumbColor
Gets or sets the thumb color of the DXSwitch in disabled and checked states. This is a bindable property.
DisabledCheckedIconColor
Gets or sets the thumb icon color of the DXSwitch in disabled and checked states. This is a bindable property.

#Thumb Appearance in the Disabled State

The following example changes thumb appearance in the disabled state:

.NET MAUI DXSwitch - Disabled Thumb Appearance

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
        <dx:DXSwitch ...
             IsEnabled="False"

             DisabledThumbColor="DimGray"
             DisabledIconColor="WhiteSmoke" /> 
</ContentPage>

Use the following properties to change thumb appearance in the disabled state:

DisabledThumbColor
Gets or sets the thumb color of the DXSwitch in the disabled state. This is a bindable property.
DisabledIconColor
Gets or sets the thumb icon color of the DXSwitch in the disabled state. This is a bindable property.