DXToggleButton Class

A toggle button control.

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

csharp

[DXLicenseMAUI]
public class DXToggleButton :
    DXButton

Remarks

DXToggleButton performs assigned actions when a user switches it to the checked or unchecked state. The control can display a caption string (Content), icon (Icon), or both.

The following example adds a DXToggleButton to the page and sets its content to match the animation above:

XAML

xaml

<ContentPage ...
    xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <Grid>
      <dx:DXToggleButton 
                        Content="Bookmark" 
                        Icon="bookmark"/>
    </Grid>
</ContentPage>

Group Toggle Buttons

You can group several DXToggleButton controls to implement exclusive selection (a radio group). When a user selects a DXToggleButton , the action deselects all other controls in the group.

Specify the same GroupName property value for all DXToggleButton within the group. The following code sample illustrates the Layout group of DXToggleButton with exclusive selection:

XAML

xaml

<dx:DXStackLayout Orientation="Vertical">
  <dx:DXStackLayout Orientation="Horizontal">
    <dx:DXToggleButton x:Name="toggle_button_1" 
                      GroupName="1" 
                      Content="London"/>
    <dx:DXToggleButton x:Name="toggle_button_2" 
                      GroupName="1" 
                      Content="Dublin"/>
  </dx:DXStackLayout>
  <dx:DXStackLayout Orientation="Horizontal">
    <dx:DXToggleButton x:Name="toggle_button_2" 
                      GroupName="1" 
                      Content="Madrid"/>
    <dx:DXToggleButton x:Name="toggle_button_2" 
                      GroupName="1" 
                      Content="Berlin" 
                      IsChecked="True"/>
  </dx:DXStackLayout>
</dx:DXStackLayout>

You can create multiple independent “radio groups” if toggle buttons are separated into different containers even when all toggle buttons have the same GroupName. To do this, set IsGroupScopeProperty to true for each container that should act as a separate “radio group”.

XAML

xaml

<dx:DXStackLayout Orientation="Vertical">
  <dx:DXStackLayout dx:DXToggleButton.IsGroupScope="True" Orientation="Horizontal">
    <dx:DXToggleButton x:Name="toggle_button_1" 
                      GroupName="1" 
                      Content="London"/>
    <dx:DXToggleButton x:Name="toggle_button_2" 
                      GroupName="1" 
                      Content="Dublin"/>
  </dx:DXStackLayout>
  <dx:DXStackLayout dx:DXToggleButton.IsGroupScope="True" Orientation="Horizontal">
    <dx:DXToggleButton x:Name="toggle_button_3" 
                      GroupName="1" 
                      Content="Madrid"/>
    <dx:DXToggleButton x:Name="toggle_button_4" 
                      GroupName="1" 
                      Content="Berlin"/>
  </dx:DXStackLayout>
</dx:DXStackLayout>

Use the AllowUncheckInGroup to specify whether all DXToggleButton within a group can be unchecked at the same time.

Handle Tap and Check Items

Use the following events to define how the DXToggleButton control should respond to taps:

ClickedFires when a user taps the toggle button.TapFires when a user taps the toggle button. This event allows you to pass additional event data.TapPressedFires when a user taps the toggle button and a finger is not released.TapReleasedFires when a user taps the toggle button and a finger is released.CheckedChangedFires after the IsChecked property is changed.CheckedChangingFires when a user clicks the toggle button to change the IsChecked property.

When the item is checked, you can use the Checked*Color properties to customize the colors of button elements (text, background, icon, and more).

You can also use the Command property to specify a command that is invoked when a user taps a DXToggleButton. You can define the CommandParameter property to specify a command’s parameter.

XAML

xaml

<ContentPage ...
    xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core"
    <Grid> 
      <dx:DXToggleButton x:Name="bookmark_button" 
                        Content="Bookmark" 
                        Icon="bookmark" 
                        Command="{Binding TapButtonCommand}"
                        CommandParameter="{Binding ButtonType, Source={x:Reference bookmark_button}}"/>
    </Grid>
</ContentPage>

You can customize button appearance in pressed state. Use Pressed*Color properties to specify colors for various button elements (text, background, icon, and more).

Button Types

The DXToggleButton control includes the ButtonType property. The list below contains the available button types and corresponding button appearance in different states:

Accent (default)

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

Filled

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

Outlined

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

Text

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

ToolButton

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

Button Availability

Use the IsEnabled property to specify whether the DXToggleButton is enabled. You can customize button appearance in the disabled state. Use the Disabled*Color property to change the colors of button elements (text, background, icon, and so on).

Content and Template

You can use the following properties to specify the DXToggleButton ‘s content, visibility, and template:

ShowContentGets or sets whether to show content within the toggle button. This is a bindable property.ContentGets or sets an object that the toggle button displays. This is a bindable property.ContentTemplateGets or sets a template that configures the toggle button appearance. This is a bindable property.

Customize Appearance

You can use the following properties to customize DXToggleButton appearance settings:

ThemeSeedColorGets or sets the primary key color of the applied theme. This is a bindable property.CornerRadiusGets or sets the corner radius of the toggle button. This is a bindable property.PaddingGets or sets the amount of space around the toggle button. This is a bindable property.

Alignment

You can use the following properties to customize DXToggleButton alignment settings:

TextHorizontalAlignmentGets or sets the text horizontal alignment within the toggle button content. This is a bindable property.TextVerticalAlignmentGets or sets the text vertical alignment within the toggle button content. This is a bindable property.VerticalContentAlignmentGets or sets the vertical alignment of the toggle button content (icon and text). This is a bindable property.HorizontalContentAlignmentGets or sets the horizontal alignment of the toggle button content (icon and text). This is a bindable property.IconPlacementGets or sets the icon position within the toggle button content. This is a bindable property.

Background

You can use the following properties to change the background color for a DXToggleButton :

CheckedBackgroundColorGets or sets the background color of the toggle button in the checked state. This is a bindable property.PressedBackgroundColorGets or sets the background color of the button in the pressed state. This is a bindable property.CheckedPressedBackgroundColorGets or sets the background color of the toggle button in checked and pressed states. This is a bindable property.DisabledBackgroundColorGets or sets the background color of the button in the disabled state. This is a bindable property.CheckedDisabledBackgroundColorGets or sets the background color of the toggle button in checked and disabled states. This is a bindable property.

Border

You can use the following properties to customize the border for a DXToggleButton :

BorderColorGets or sets the border color of the toggle button. This is a bindable property.BorderThicknessGets or sets the border thickness of the toggle button. This is a bindable property.CheckedBorderColorGets or sets the border color of the toggle button in the checked state. This is a bindable property.PressedBorderColorGets or sets the border color of the button in the pressed state. This is a bindable property.CheckedPressedBorderColorGets or sets the border color of the toggle button in checked and pressed states. This is a bindable property.DisabledBorderColorGets or sets the border color of the button in the disabled state. This is a bindable property.CheckedDisabledBorderColorGets or sets the border color of the toggle button in checked and disabled states. This is a bindable property.

Icon

You can use the following properties to display and customize an icon within a DXToggleButton :

IconGets or sets the icon image within the toggle button’s content. This is a bindable property.ShowIconGets or sets whether to show an icon within the toggle button’s content. This is a bindable property.IconAspectGets or sets the icon scale within the toggle button’s content. This is a bindable property.IconColorGets or sets the icon color within the toggle button’s content. This is a bindable property.CheckedIconColorGets or sets the icon color of the toggle button in the checked state. This is a bindable property.PressedIconColorGets or sets the icon color of the button in the pressed state. This is a bindable property.CheckedPressedIconColorGets or sets the icon color of the toggle button in checked and pressed states. This is a bindable property.DisabledIconColorGets or sets the icon color of the button in the disabled state. This is a bindable property.CheckedDisabledIconColorGets or sets the icon color of the toggle button in checked and disabled states. This is a bindable property.IconColorizationEnabledGets or sets whether to change the icon color within the toggle button’s content. This is a bindable property.IconHeightGets or sets the icon height within the toggle button’s content. This is a bindable property.IconWidthGets or sets the icon width within the toggle button’s content. This is a bindable property.IconIndentGets or sets the distance between icon and text within the toggle button’s content. This is a bindable property.IconPlacementGets or sets the icon position within the toggle button’s content. This is a bindable property.

Text and Font Settings

You can use the following properties to display and customize font settings for a DXToggleButton :

FontFamilyGets or sets the toggle button’s text font. This is a bindable property.FontSizeGets or sets the text font size within the toggle button’s content. This is a bindable property.FontAttributesGets or sets whether the toggle button’s text font style is bold, italic, or unmodified. This is a bindable property.FontAutoScalingEnabledGets or sets whether the toggle button’s text reflects font scaling preferences set in the operating system. This is a bindable property.TextColorGets or sets the text color within the toggle button’s content. This is a bindable property.CheckedTextColorGets or sets the text color of the toggle button in the checked state. This is a bindable property.PressedTextColorGets or sets the text color of the button in the pressed state. This is a bindable property.CheckedPressedTextColorGets or sets the text color of the toggle button in checked and pressed states. This is a bindable property.DisabledTextColorGets or sets the text color of the button in the disabled state. This is a bindable property.CheckedDisabledTextColorGets or sets the text color of the toggle button in checked and disabled states. This is a bindable property.TextCharacterSpacingGets or sets the distance between text characters within the toggle button’s content. This is a bindable property.TextDecorationsGets or sets whether the text decoration within the toggle button’s content is strikethrough, underline, or unmodified. This is a bindable property.TextHorizontalAlignmentGets or sets the text horizontal alignment within the toggle button’s content. This is a bindable property.TextVerticalAlignmentGets or sets the text vertical alignment within the toggle button’s content. This is a bindable property.TextLineBreakModeGets or sets the line breaking mode for text within the toggle button’s content. This is a bindable property.TextLineHeightGets or sets the vertical distance between lines of text within the toggle button’s content. This is a bindable property.TextMaxLinesGets or sets the maximum number of text lines within the toggle button’s content. This is a bindable property.

Customize Animation

The DXToggleButton displays the animation when you tap it. You can use the following properties to customize this animation:

AnimationDurationGets or sets the duration of the button click animation. This is a bindable property.PressedScaleGets or sets the scale for the button in the pressed state.