maui-405234-utility-controls-switch-thumb.md
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.
The image below shows all the available states of the thumb :
The following example changes 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:
ThumbColorGets or sets the thumb color of the DXSwitch. This is a bindable property.ThumbHeightGets or sets the thumb height of the DXSwitch. This is a bindable property.ThumbWidthGets or sets the thumb width of the DXSwitch. This is a bindable property.IconGets or sets the thumb icon of the DXSwitch. This is a bindable property.IconAspectGets or sets the thumb icon aspect of the DXSwitch. This is a bindable property.IconColorGets or sets the thumb icon color of the DXSwitch. This is a bindable property.IconColorizationEnabledGets or sets whether to change the thumb icon color of the DXSwitch. This is a bindable property.IconHeightGets or sets the thumb icon height of the DXSwitch. This is a bindable property.IconWidthGets or sets the thumb icon width of the DXSwitch. This is a bindable property.
The following example changes thumb appearance in the pressed state:
<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:
PressedThumbHeightGets or sets the thumb height of the DXSwitch in the pressed state. This is a bindable property.PressedThumbWidthGets or sets the thumb width of the DXSwitch in the pressed state. This is a bindable property.PressedThumbShadowColorGets or sets the thumb shadow color of the DXSwitch in the pressed state. This is a bindable property.PressedThumbShadowHeightGets or sets the thumb shadow height of the DXSwitch in the pressed state. This is a bindable property.PressedThumbShadowWidthGets or sets the thumb shadow width of the DXSwitch in the pressed state. This is a bindable property.
The following example changes thumb appearance in the checked state:
<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:
CheckedThumbColorGets or sets the thumb color of the DXSwitch in the checked state. This is a bindable property.CheckedThumbHeightGets or sets the thumb height of the DXSwitch in the checked state. This is a bindable property.CheckedThumbWidthGets or sets the thumb width of the DXSwitch in the checked state. This is a bindable property.CheckedIconGets or sets the thumb icon of the DXSwitch in the checked state. This is a bindable property.CheckedIconColorGets or sets the thumb icon color of the DXSwitch in the checked state. This is a bindable property.
The following example changes thumb appearance in disabled and checked states:
<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:
DisabledCheckedThumbColorGets or sets the thumb color of the DXSwitch in disabled and checked states. This is a bindable property.DisabledCheckedIconColorGets or sets the thumb icon color of the DXSwitch in disabled and checked states. This is a bindable property.
The following example changes thumb appearance in the disabled state:
<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:
DisabledThumbColorGets or sets the thumb color of the DXSwitch in the disabled state. This is a bindable property.DisabledIconColorGets or sets the thumb icon color of the DXSwitch in the disabled state. This is a bindable property.