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.

SelectionHighlightColorProperty

Identifies the SelectionHighlightColor dependency property.

Declaration

public static readonly BindableProperty SelectionHighlightColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionHighlightColor dependency 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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets",
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    IconSize = 24,
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets",
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    IsEnabled = false,
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets"
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets",
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

private void OnToolbarTapped(object sender, ToolbarTappedEventArgs e)
{
    var overLayToolbar = e.NewToolbarItem?.OverlayToolbar;
    if (overLayToolbar != null)
    {
        if (this.MyLayout.Children.Contains(overLayToolbar))
        {
            this.MyLayout.Children.Remove(overLayToolbar);
        }
        else
        {
            this.MyLayout.Children.Add(overLayToolbar);
        }
    }
}

SelectionHighlightColor

Gets or sets the color used to highlight the selected toolbar item.

Declaration

public Color SelectionHighlightColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color value that defines the selection highlight color. Set to Microsoft.Maui.Graphics.Colors.Transparent to remove the selection highlight.

Examples

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

XAML
C#

<toolbar:SfToolbar x:Name="Toolbar" HeightRequest="56">
<toolbar:SfToolbar.Items>
       <toolbar:SfToolbarItem Name = "Bold"
                              ToolTipText="Bold"
                              SelectionHighlightColor="Transparent">
          <toolbar:SfToolbarItem.Icon>
               <FontImageSource Glyph = "&#xE770;"
                                FontFamily="MauiMaterialAssets" />
           </toolbar:SfToolbarItem.Icon>
       </toolbar:SfToolbarItem>
   </toolbar:SfToolbar.Items>
</toolbar:SfToolbar>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "Bold",
    Text = "Bold",
    SelectionHighlightColor = Colors.Transparent,
    Icon = new FontImageSource()
    {
        Glyph = "\uE770",
        FontFamily = "MaterialAssets"
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    Size = new Size(50, 50),
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets"
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Text = "Zoom-in",
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets",
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    TextPosition = ToolbarItemTextPosition.Top,
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets",
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    TextStyle = new ToolbarTextStyle()
    {
        TextColor = Colors.Red,
        FontSize = 16,
        FontFamily = "OpenSansSemibold",
        FontAttributes = FontAttributes.Bold,
        FontAutoScalingEnabled = true
    },
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets"
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    Text = "Zoom-in",
    ToolTipText = "Click to zoom in",
    Icon = new FontImageSource()
    {
        Glyph = "\uE713",
        FontFamily = "MaterialAssets"
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;

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>

SfToolbar toolbar = new SfToolbar();
toolbar.HeightRequest = 56;
toolbar.Orientation = ToolbarOrientation.Horizontal;
SfToolbarItem toolbarItem = new SfToolbarItem
{
    Name = "ToolbarItem1",
    View = new Button
    {
        Text = "This is a button",
        BackgroundColor = Colors.LightBlue
    }
};
toolbar.Items.Add(toolbarItem);
this.Content = toolbar;