Class SfToolbarItem

Represents the SfToolbarItem class.

Inheritance

System.Object

BaseToolbarItem

SfToolbarItem

Inherited Members

BaseToolbarItem.Alignment

BaseToolbarItem.AlignmentProperty

Namespace: Syncfusion.Maui.Toolbar

Assembly: Syncfusion.Maui.Toolbar.dll

Syntax

public class SfToolbarItem : BaseToolbarItem, IThemeElement

Constructors

SfToolbarItem()

Initializes a new instance of the SfToolbarItem class.

Declaration

public SfToolbarItem()

Fields

IconProperty

Identifies the Icon bindable property.

Declaration

public static readonly BindableProperty IconProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the Icon bindable property.

IconSizeProperty

Identifies the IconSize bindable property.

Declaration

public static readonly BindableProperty IconSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the IconSize bindable property.

IsEnabledProperty

Identifies the IsEnabled bindable property.

Declaration

public static readonly BindableProperty IsEnabledProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the IsEnabled bindable property.

NameProperty

Identifies the Name bindable property.

Declaration

public static readonly BindableProperty NameProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the Name bindable property.

OverlayToolbarProperty

Identifies the OverlayToolbar bindable property.

Declaration

public static readonly BindableProperty OverlayToolbarProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the OverlayToolbar bindable property.

SizeProperty

Identifies the Size bindable property.

Declaration

public static readonly BindableProperty SizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the Size bindable property.

TextPositionProperty

Identifies the TextPosition bindable property.

Declaration

public static readonly BindableProperty TextPositionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the TextPosition bindable property.

TextProperty

Identifies the Text bindable property.

Declaration

public static readonly BindableProperty TextProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the Text bindable property.

TextStyleProperty

Identifies the TextStyle bindable property.

Declaration

public static readonly BindableProperty TextStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the TextStyle bindable property.

ToolTipTextProperty

Identifies the Text bindable property.

Declaration

public static readonly BindableProperty ToolTipTextProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the Text bindable property.

ViewProperty

Identifies the View bindable property.

Declaration

public static readonly BindableProperty ViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for the View bindable property.

Properties

Icon

Gets or sets the icon for the toolbar item.

Declaration

public FontImageSource Icon { get; set; }

Property Value

Type
Microsoft.Maui.Controls.FontImageSource

Examples

The below example shows how to set the icon property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;"
                                 FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

IconSize

Gets or sets the icon size for the toolbar item.

Declaration

public double IconSize { get; set; }

Property Value

Type
System.Double

Examples

The below example shows how to set the iconSize property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in" IconSize="24">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

IsEnabled

Gets or sets a value indicating whether the toolbar item is enabled or not.

Declaration

public bool IsEnabled { get; set; }

Property Value

Type
System.Boolean

Examples

The below example shows how to use the isEnabled property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in" IsEnabled="False">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

Name

Gets or sets the name for the toolbar items.

Declaration

public string Name { get; set; }

Property Value

Type
System.String

Examples

The below example shows how to the name property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

OverlayToolbar

Gets or sets the overlay toolbar which will be shown on tapping the toolbar item.

Declaration

public SfOverlayToolbar OverlayToolbar { get; set; }

Property Value

Type
SfOverlayToolbar

Examples

the following code demonstrates how to use the overlayToolbar property of a toolbar item.

• XAML
• C#

<VerticalStackLayout x:Name="MyLayout">
    <toolbar:SfToolbar x:Name="Toolbar" Tapped="OnToolbarTapped"
                HeightRequest="56"
                WidthRequest="200"
                Orientation="Horizontal">
        <toolbar:SfToolbar.Items>
            <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
                <toolbar:SfToolbarItem.Icon>
                    <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
                </toolbar:SfToolbarItem.Icon>
                <toolbar:SfToolbarItem.OverlayToolbar>
                    <toolbar:SfOverlayToolbar x:Name="OverlayToolbar" HeightRequest="56" WidthRequest="200">
                        <toolbar:SfOverlayToolbar.Items>
                            <toolbar:SfToolbarItem Name="ToolbarItem4" Text="Settings">
                                <toolbar:SfToolbarItem.Icon>
                                    <FontImageSource Glyph="&#xE716;" FontFamily="MaterialAssets"/>
                                </toolbar:SfToolbarItem.Icon>
                            </toolbar:SfToolbarItem>
                            <toolbar:SfToolbarItem Name="ToolbarItem5" Text="Message">
                                <toolbar:SfToolbarItem.Icon>
                                    <FontImageSource Glyph="&#xE717;" FontFamily="MaterialAssets"/>
                                </toolbar:SfToolbarItem.Icon>
                            </toolbar:SfToolbarItem>
                        </toolbar:SfOverlayToolbar.Items>
                    </toolbar:SfOverlayToolbar>
                </toolbar:SfToolbarItem.OverlayToolbar>
            </toolbar:SfToolbarItem>
            <toolbar:SfToolbarItem Name="ToolbarItem2" Text="Zoom-out">
                <toolbar:SfToolbarItem.Icon>
                    <FontImageSource Glyph="&#xE714;" FontFamily="MaterialAssets"/>
                </toolbar:SfToolbarItem.Icon>
            </toolbar:SfToolbarItem>
            <toolbar:SfToolbarItem Name="ToolbarItem3" Text="Search">
                <toolbar:SfToolbarItem.Icon>
                    <FontImageSource Glyph="&#xE715;" FontFamily="MaterialAssets"/>
                </toolbar:SfToolbarItem.Icon>
            </toolbar:SfToolbarItem>
        </toolbar:SfToolbar.Items>
    </toolbar:SfToolbar>
</VerticalStackLayout>

Size

Gets or sets the size of the toolbar item.

Declaration

public Size Size { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Size

Examples

The below example shows how to set the size property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in" Size="50,50">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbar.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

Text

Gets or sets the text for the toolbar item.

Declaration

public string Text { get; set; }

Property Value

Type
System.String

Examples

The below example shows how to set the text property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

TextPosition

Gets or sets the text position for toolbar item.

Declaration

public ToolbarItemTextPosition TextPosition { get; set; }

Property Value

Type
ToolbarItemTextPosition

Examples

The below example shows how to set the textPosition property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in" TextPosition="Top">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

TextStyle

Gets or sets the text style the toolbar item.

Declaration

public ToolbarTextStyle TextStyle { get; set; }

Property Value

Type
ToolbarTextStyle

Examples

The below example shows how to use the textStyle property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
            <toolbar:SfToolbarItem.TextStyle>
                <toolbar:ToolbarTextStyle TextColor="Red"
                                          FontSize="16"
                                          FontFamily="OpenSansSemibold"
                                          FontAttributes="Bold"
                                          FontAutoScalingEnabled="True"/>
            </toolbar:SfToolbarItem.TextStyle>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

ToolTipText

Gets or Sets the toolTip text for the toolbar item.

Declaration

public string ToolTipText { get; set; }

Property Value

Type
System.String

Examples

The below example shows how to set the toolTipText property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in" ToolTipText="Click to zoom in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

View

Gets or sets the view to be displayed in the toolbar item.

Declaration

public View View { get; set; }

Property Value

Type
Microsoft.Maui.Controls.View

Examples

The below example shows how to set the view property of the toolbar item.

• XAML
• C#

<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   Orientation="Horizontal">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1">
            <toolbar:SfToolbarItem.View>
                <Button Text="This is a button" BackgroundColor="LightBlue"/>
            </toolbar:SfToolbarItem.View>
        </toolbar:SfToolbarItem>
    </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>