ToolbarToggleButton Class

A button within a DXToolbar that has two states: checked and unchecked. You can group several ToolbarToggleButtons to implement exclusive selection.

Namespace: DevExpress.Maui.Controls

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

Declaration

public class ToolbarToggleButton :
    ToolbarButton

Remarks

DevExpress Toolbar for .NET MAUI - Default State of Toggle ToolbarButton MAUI Toolbar - ToggleButton

Add ToolbarToggleButton to DXToolbar

The following code sample displays the Bookmark ToolbarToggleButton:

XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <Grid>
        <dxc:DXToolbar>
            <!-- ... -->
            <dxc:ToolbarToggleButton Content="Bookmark" Icon="bookmark"/>
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

Group ToggleToolbarButtons

You can group several ToolbarToggleButtons to implement exclusive selection. In this case, selecting one ToolbarToggleButton deselects other ToolbarToggleButton in this group.

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

DevExpress .NET MAUI Toolbar - Exclusive ToggleButton Selection

XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <Grid>
        <dxc:DXToolbar>
            <!-- ... -->
            <dxc:ToolbarToggleButton x:Name="OnePage" GroupName="Layout" Icon="onepage" IsChecked="true" />
            <dxc:ToolbarToggleButton x:Name="TitlePage" GroupName="Layout" Icon="titlepage" />
            <dxc:ToolbarToggleButton x:Name="TwoPages" GroupName="Layout" Icon="twopages"/>
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

Use the AllowUncheckInGroup to specify whether ToolbarToggleButtons within a group can be unchecked.

Handle Taps and Check Items

You can use the following events to handle a ToolbarToggleButton tap:

Event	Description
IsChecked	Gets or sets whether the ToolbarToggleButton is checked. This is a bindable property.
ToolbarButton.Clicked	Fires when a user taps the toolbar button.
CheckedChanging	Fires before the ToolbarToggleButton.IsChecked property is changed.
CheckedChanged	Fires after the ToolbarToggleButton.IsChecked property is changed.

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 ToolbarToggleButton. You can define the CommandParameter property to specify a command’s parameter.

XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <Grid>
        <dxc:DXToolbar>
            <!-- ... -->
            <dxc:DXToolbar>
                <dxc:ToolbarToggleButton x:Name="bookmarkbutton" Content="Bookmark" Icon="bookmark" Command="{Binding TapButtonCommand}"
                                            CommandParameter="{Binding ButtonType, Source={x:Reference bookmarkbutton}}"/>
            </dxc:DXToolbar>
        </dxc:DXToolbar>
    </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 ToolbarToggleButton class includes the ButtonType property. The list below contains the available button types and corresponding button appearances in different states:

ToolButton (default)

State	Image
Default
Pressed
Checked
CheckedPressed
Disabled
CheckedDisabled

Accent

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

Button Availability

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

Handle Loading

You can use the following inherited member to handle the ToolbarToggleButton loading:

Property	Description
IsLoaded	Gets or sets whether a DXElementBase descendant is loaded.
Loaded	Fires when the DXElementBase descendant is loaded.
Unloaded	Fires when the DXElementBase descendant is unloaded.

Customize Appearance

You can use the following properties to customize common ToolbarToggleButton appearance settings:

Property	Description
ThemeSeedColor	Gets or sets the predefined color used to generate colors for ToolbarButton. This is a bindable property.
CornerRadius	Gets or sets a ToolbarContentItemBase descendant’s corner radius. This is a bindable property.
Margin	Gets or sets the margin value of a ToolbarContentItemBase descendant. This is a bindable property.
Padding	Gets or sets the padding of a ToolbarContentItemBase descendant. This is a bindable property.
ShowContent	Gets or sets whether a ToolbarContentItemBase descendant’s content is displayed. This is a bindable property.
Content	Gets or sets the custom content of the toolbar button. This is a bindable property.
ContentTemplate	Gets or sets a template that configures the content‘s appearance. This is a bindable property.
ViewStyle	Gets or sets the style that is applied to the DXToggleButton that is displayed within the ToolbarToggleButton. This is a bindable property.
Style	Gets or sets the style applied to a DXElementBase descendant. This is a bindable property.

Size and Alignment

You can use the following properties to customize common ToolbarToggleButton size and alignment settings:

Property	Description
HeightRequest	Gets or sets height of a ToolbarContentItemBase descendant. This is a bindable property.
MaximumHeightRequest	Gets or sets maximum height of a ToolbarContentItemBase descendant. This is a bindable property.
MinimumHeightRequest	Gets or sets minimum height of a ToolbarContentItemBase descendant. This is a bindable property.
WidthRequest	Gets or sets width of a ToolbarContentItemBase descendant. This is a bindable property.
MaximumWidthRequest	Gets or sets maximum width of a ToolbarContentItemBase descendant. This is a bindable property.
MinimumWidthRequest	Gets or sets minimum width of a ToolbarContentItemBase descendant. This is a bindable property.
HorizontalOptions	Gets or sets the horizontal alignment of a ToolbarContentItemBase descendant. This is a bindable property.
HorizontalContentAlignment	Gets or sets the horizontal alignment of a ToolbarContentItemBase descendant’s content. This is a bindable property.
VerticalOptions	Gets or sets the vertical alignment of a ToolbarContentItemBase descendant. This is a bindable property.
VerticalContentAlignment	Gets or sets the vertical alignment of a ToolbarContentItemBase descendant’s content. This is a bindable property.

Background Color

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

Property	Description
BackgroundColor	Gets or sets a ToolbarContentItemBase descendant’s background color. This is a bindable property.
DisabledBackgroundColor	Gets or sets the background color of the ToolbarButton when it is disabled. This is a bindable property.
PressedBackgroundColor	Gets or sets the background color of the ToolbarButton when it is pressed. This is a bindable property.
CheckedBackgroundColor	Gets or sets the background color of the ToolbarToggleButton when it is checked. This is a bindable property.
CheckedPressedBackgroundColor	Gets or sets the background color of the ToolbarToggleButton when it is checked and pressed. This is a bindable property.
CheckedDisabledBackgroundColor	Gets or sets the background color of the ToolbarToggleButton when it is checked and disabled. This is a bindable property.

Border

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

Property	Description
BorderColor	Gets or sets a ToolbarContentItemBase descendant’s border color. This is a bindable property.
BorderThickness	Gets or sets a ToolbarContentItemBase descendant’s border thickness. This is a bindable property.
PressedBorderColor	Gets or sets the border color of the ToolbarButton when it is pressed. This is a bindable property.
DisabledBorderColor	Gets or sets the border color of a ToolbarButton when it is disabled. This is a bindable property.
CheckedBorderColor	Gets or sets the border color of the ToolbarToggleButton when it is checked. This is a bindable property.
CheckedPressedBorderColor	Gets or sets the border color of the ToolbarToggleButton when it is checked and pressed. This is a bindable property.
CheckedDisabledBorderColor	Gets or sets the border color of the ToolbarToggleButton when it is checked and disabled. This is a bindable property.

Icon

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

Property	Description
Icon	Gets or sets the icon that is displayed within a ToolbarContentItemBase descendant. This is a bindable property.
ShowIcon	Gets or sets whether a ToolbarContentItemBase descendant’s icon is displayed. This is a bindable property.
IconAspect	Gets or sets the aspect of the icon that is displayed within a ToolbarContentItemBase descendant. This is a bindable property.
IconHeight	Gets or sets the icon height of a ToolbarContentItemBase descendant. This is a bindable property.
IconWidth	Gets or sets the icon width of a ToolbarContentItemBase descendant. This is a bindable property.
IconPlacement	Gets or sets the icon placement within a ToolbarContentItemBase descendant. This is a bindable property.
IconIndent	Gets or sets the icon indent of a ToolbarContentItemBase descendant. This is a bindable property.
IconColorizationEnabled	Gets or sets whether the toolbar item’s icon should change its colors in pressed and disabled states. This is a bindable property.
IconColor	Gets or sets the icon color of a ToolbarContentItemBase descendant. This is a bindable property.
DisabledIconColor	Gets or sets the icon color of the ToolbarButton when it is disabled. This is a bindable property.
PressedIconColor	Gets or sets the icon color of the ToolbarButton when it is pressed. This is a bindable property.
CheckedIconColor	Gets or sets the icon color of the ToolbarToggleButton when it is checked. This is a bindable property.
CheckedDisabledIconColor	Gets or sets the icon color of the ToolbarToggleButton when it is checked and disabled. This is a bindable property.
CheckedPressedIconColor	Gets or sets the icon color of the ToolbarToggleButton when it is checked and pressed. This is a bindable property.

Text and Font Settings

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

Property	Description
FontAttributes	Gets or sets a ToolbarContentItemBase descendant’s font attributes. This is a bindable property.
FontFamily	Gets or sets a ToolbarContentItemBase descendant’s font family. This is a bindable property.
FontSize	Gets or sets a ToolbarContentItemBase descendant’s font size. This is a bindable property.
FontAutoScalingEnabled	Gets or sets whether the toolbar item’s text is scaled according to the operating system’s text scale setting. This is a bindable property.
TextColor	Gets or sets the text color of a ToolbarContentItemBase descendant. This is a bindable property.
DisabledTextColor	Gets or sets the text color of the ToolbarButton when it is disabled. This is a bindable property.
PressedTextColor	Gets or sets the text color of the ToolbarButton when it is pressed. This is a bindable property.
CheckedTextColor	Gets or sets the text color of the ToolbarToggleButton when it is checked. This is a bindable property.
CheckedPressedTextColor	Gets or sets the text color of the ToolbarToggleButton when it is checked and pressed. This is a bindable property.
CheckedDisabledTextColor	Gets or sets the text color of the ToolbarToggleButton when it is checked and disabled. This is a bindable property.
TextCharacterSpacing	Gets or sets the spacing between characters of a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextDecorations	Gets or sets text decorations applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextHorizontalAlignment	Gets or sets the horizontal alignment applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextVerticalAlignment	Gets or sets the vertical alignment applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextLineBreakMode	Gets or sets the line breaking mode for a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextLineHeight	Gets or sets line height applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextMaxLines	Gets or sets the maximum number of a ToolbarContentItemBase descendant’s text. This is a bindable property.

Customize Animation

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

Property	Description
PressedScale	Gets or sets the toolbar button scale when it is pressed. This is a bindable property.
AnimationDuration	Gets or sets the duration of the ToolbarButton‘s scale animation. This is a bindable property.