.NET MAUI DXSwitch: Thumb

• Nov 14, 2024
• 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:

Thumb Appearance

The following example changes thumb appearance:

XAML

<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:

XAML

<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:

XAML

<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:

XAML

<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:

XAML

<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.