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,
DXCheckGroupConnector.IDXCheckGroupConnectorOwner
#Remarks
#Add ToolbarToggleButton to DXToolbar
The following code sample displays a ToolbarToggleButton within the DXToolbar control:
<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:
<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 |
---|---|
Is |
Gets or sets whether the Toolbar |
Toolbar |
Fires when a user taps the toolbar button. |
Checked |
Fires before the Toolbar |
Checked |
Fires after the Toolbar |
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.
<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 Checked Pressed Disabled Checked Disabled - Accent
State Image Default Pressed Checked Checked Pressed Disabled Checked Disabled - Filled
State Image Default Pressed Checked Checked Pressed Disabled Checked Disabled - Outlined
State Image Default Pressed Checked Checked Pressed Disabled Checked Disabled - Text
State Image Default Pressed Checked Checked Pressed Disabled Checked Disabled
#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 |
---|---|
Is |
Gets or sets whether a DXElement |
Loaded | Fires when the DXElement |
Unloaded | Fires when the DXElement |
#Customize Appearance
You can use the following properties to customize common ToolbarToggleButton appearance settings:
Property | Description |
---|---|
Theme |
Gets or sets the predefined color used to generate colors for Toolbar |
Corner |
Gets or sets a Toolbar |
Margin | Gets or sets the margin value of a Toolbar |
Padding | Gets or sets the padding of a Toolbar |
Show |
Gets or sets whether a Toolbar |
Content | Gets or sets the custom content of the toolbar button. This is a bindable property. |
Content |
Gets or sets a template that configures the content‘s appearance. This is a bindable property. |
View |
Gets or sets the style of the DXToggle |
Style | Gets or sets the style applied to a DXElement |
#Size and Alignment
You can use the following properties to customize common ToolbarToggleButton size and alignment settings:
Property | Description |
---|---|
Height |
Gets or sets height of a Toolbar |
Maximum |
Gets or sets maximum height of a Toolbar |
Minimum |
Gets or sets minimum height of a Toolbar |
Width |
Gets or sets width of a Toolbar |
Maximum |
Gets or sets maximum width of a Toolbar |
Minimum |
Gets or sets minimum width of a Toolbar |
Horizontal |
Gets or sets the horizontal alignment of a Toolbar |
Horizontal |
Gets or sets the horizontal alignment of a Toolbar |
Vertical |
Gets or sets the vertical alignment of a Toolbar |
Vertical |
Gets or sets the vertical alignment of a Toolbar |
#Background Color
You can use the following properties to change the background color for a ToolbarToggleButton:
Property | Description |
---|---|
Background |
Gets or sets a Toolbar |
Disabled |
Gets or sets the background color of the Toolbar |
Pressed |
Gets or sets the background color of the Toolbar |
Checked |
Gets or sets the background color of the Toolbar |
Checked |
Gets or sets the background color of the Toolbar |
Checked |
Gets or sets the background color of the Toolbar |
#Border
You can use the following properties to customize the border for a ToolbarToggleButton:
Property | Description |
---|---|
Border |
Gets or sets a Toolbar |
Border |
Gets or sets a Toolbar |
Pressed |
Gets or sets the border color of the Toolbar |
Disabled |
Gets or sets the border color of a Toolbar |
Checked |
Gets or sets the border color of the Toolbar |
Checked |
Gets or sets the border color of the Toolbar |
Checked |
Gets or sets the border color of the Toolbar |
#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 Toolbar |
Show |
Gets or sets whether a Toolbar |
Icon |
Gets or sets the aspect of the icon that is displayed within a Toolbar |
Icon |
Gets or sets the icon height of a Toolbar |
Icon |
Gets or sets the icon width of a Toolbar |
Icon |
Gets or sets the icon placement within a Toolbar |
Icon |
Gets or sets the icon indent of a Toolbar |
Icon |
Gets or sets whether the toolbar item’s icon should change its colors in pressed and disabled states. This is a bindable property. |
Icon |
Gets or sets the icon color of a Toolbar |
Disabled |
Gets or sets the icon color of the Toolbar |
Pressed |
Gets or sets the icon color of the Toolbar |
Checked |
Gets or sets the icon color of the Toolbar |
Checked |
Gets or sets the icon color of the Toolbar |
Checked |
Gets or sets the icon color of the Toolbar |
#Text and Font Settings
You can use the following properties to display and customize font settings for a ToolbarToggleButton:
Property | Description |
---|---|
Font |
Gets or sets a Toolbar |
Font |
Gets or sets a Toolbar |
Font |
Gets or sets a Toolbar |
Font |
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. |
Text |
Gets or sets the text color of a Toolbar |
Disabled |
Gets or sets the text color of the Toolbar |
Pressed |
Gets or sets the text color of the Toolbar |
Checked |
Gets or sets the text color of the Toolbar |
Checked |
Gets or sets the text color of the Toolbar |
Checked |
Gets or sets the text color of the Toolbar |
Text |
Gets or sets the spacing between characters of a Toolbar |
Text |
Gets or sets text decorations applied to a Toolbar |
Text |
Gets or sets the horizontal alignment applied to a Toolbar |
Text |
Gets or sets the vertical alignment applied to a Toolbar |
Text |
Gets or sets the line breaking mode for a Toolbar |
Text |
Gets or sets line height applied to a Toolbar |
Text |
Gets or sets the maximum number of a Toolbar |
#Customize Animation
The ToolbarToggleButton displays the animation when you tap it. You can use the following properties to customize this animation:
Property | Description |
---|---|
Pressed |
Gets or sets the toolbar button scale when it is pressed. This is a bindable property. |
Animation |
Gets or sets the duration of the Toolbar |