ToolbarNavigationButton Class
A toolbar button that navigates you to the specified ToolbarPage.
Namespace: DevExpress.Maui.Controls
Assembly: DevExpress.Maui.Controls.dll
NuGet Package: DevExpress.Maui.Controls
#Declaration
public class ToolbarNavigationButton :
ToolbarButton
#Remarks
The ToolbarNavigationButton
is a ToolbarButton descendant that navigates you to a defined ToolbarPage on tap.
#Add ToolbarNavigationButton to DXToolbar
The following code sample displays a ToolbarNavigationButton that navigates you to the FontSettings ToolbarPage on tap:
<ContentPage ...
xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
<Grid>
<dxc:DXToolbar>
<dxc:ToolbarNavigationButton PageName="FontSettings" Icon="font" Content="Open TOC"/>
<dxc:ToolbarPage Name="FontSettings">
<!-- ... -->
</dxc:ToolbarPage>
</dxc:DXToolbar>
</Grid>
</ContentPage>
#Handle Taps
Use the ToolbarButton.Clicked inherited event to handle a ToolbarNavigationButton tap.
You can also use the ToolbarButton.Command inherited property to specify a command that is invoked when a user taps a ToolbarNavigationButton. You can define the ToolbarButton.CommandParameter inherited property to specify a command’s parameter.
<ContentPage ...
xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
xmlns:local="clr-namespace:ToolbarApplication">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
<Grid>
<dxc:DXToolbar>
<!-- ... -->
<dxc:ToolbarNavigationButton x:Name="fontsettingsbutton" PageName="FontSettings" Icon="font" Command="{Binding TapButtonCommand}"
CommandParameter="{Binding ButtonType, Source={x:Reference fontsettingsbutton}}" Content="Open TOC"/>
</dxc:DXToolbar>
</Grid>
</ContentPage>
public class MainViewModel: INotifyPropertyChanged {
public ICommand TapButtonCommand { get; set; }
public MainViewModel() {
this.TapButtonCommand = new Command<DXButtonType>(OnButtonTap);
}
private async void OnButtonTap(DXButtonType buttontype) {
await Application.Current.MainPage.DisplayAlert("The item is tapped", "The button type is "+buttontype, "Ok");
}
// ...
}
You can customize button appearance in pressed state. Use Pressed*Color properties to specify colors for various button elements (text, background, icon, and more).
#Available Button Types
The ToolbarButton 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 Disabled - Accent
State Image Default Pressed Disabled - Filled
State Image Default Pressed Disabled - Outlined
State Image Default Pressed Disabled - Text
State Image Default Pressed Disabled
#Button Availability
Use the IsEnabled property to specify whether the ToolbarNavigationButton is enabled. You can customize button appearance in disabled state. Use Disabled*Color properties to change the colors of button elements (text, background, icon, and more).
#Handle Loading
You can use the following inherited member to handle ToolbarNavigationButton 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 ToolbarNavigationButton 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 DXButton control within the Toolbar |
Style | Gets or sets the style applied to a DXElement |
#Size and Alignment
You can use the following properties to customize common ToolbarNavigationButton 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 ToolbarNavigationButton:
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 |
#Border
You can use the following properties to customize the border for a ToolbarNavigationButton:
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 |
#Icon
You can use the following properties to display and customize an icon within a ToolbarNavigationButton:
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 |
#Text and Font Settings
You can use the following properties to display and customize font settings for a ToolbarNavigationButton:
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 |
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 ToolbarNavigationButton 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 |