public class SfToolbar : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IToolbar, IParentThemeElement, IThemeElement

Constructors

SfToolbar()

Initializes a new instance of the SfToolbar class.

Declaration

public SfToolbar()

Fields

BackwardButtonBackgroundProperty

Identifies the BackwardButtonBackground bindable property.

Declaration

public static readonly BindableProperty BackwardButtonBackgroundProperty

Field Value

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

BackwardButtonIconColorProperty

Identifies the BackwardButtonIconColor bindable property.

Declaration

public static readonly BindableProperty BackwardButtonIconColorProperty

Field Value

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

ForwardButtonBackgroundProperty

Identifies the ForwardButtonBackground bindable property.

Declaration

public static readonly BindableProperty ForwardButtonBackgroundProperty

Field Value

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

ForwardButtonIconColorProperty

Identifies the ForwardButtonIconColor bindable property.

Declaration

public static readonly BindableProperty ForwardButtonIconColorProperty

Field Value

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

ItemLongPressedCommandProperty

Identifies the ItemLongPressedCommand dependency property.

Declaration

public static readonly BindableProperty ItemLongPressedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemLongPressedCommand dependency property.

ItemSpacingProperty

Identifies the ItemSpacing bindable property.

Declaration

public static readonly BindableProperty ItemSpacingProperty

Field Value

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

ItemsProperty

Identifies the Items bindable property.

Declaration

public static readonly BindableProperty ItemsProperty

Field Value

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

ItemTouchInteractionCommandProperty

Identifies the ItemTouchInteractionCommand bindable property.

Declaration

public static readonly BindableProperty ItemTouchInteractionCommandProperty

Field Value

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

MoreButtonBackgroundProperty

Identifies the MoreButtonBackground bindable property.

Declaration

public static readonly BindableProperty MoreButtonBackgroundProperty

Field Value

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

MoreButtonIconColorProperty

Identifies the MoreButtonIconColor bindable property.

Declaration

public static readonly BindableProperty MoreButtonIconColorProperty

Field Value

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

MoreButtonTappedCommandProperty

Identifies the MoreButtonTappedCommand bindable property.

Declaration

public static readonly BindableProperty MoreButtonTappedCommandProperty

Field Value

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

MoreItemsChangedCommandProperty

Identifies the MoreItemsChangedCommand dependency property.

Declaration

public static readonly BindableProperty MoreItemsChangedCommandProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for MoreItemsChangedCommand dependency property.

MoreItemsRelativePositionProperty

Identifies the MoreItemsRelativePosition bindable property.

Declaration

public static readonly BindableProperty MoreItemsRelativePositionProperty

Field Value

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

OrientationProperty

Identifies the Orientation bindable property.

Declaration

public static readonly BindableProperty OrientationProperty

Field Value

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

OverflowModeProperty

Identifies the OverflowMode bindable property.

Declaration

public static readonly BindableProperty OverflowModeProperty

Field Value

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

TappedCommandProperty

Identifies the TappedCommand bindable property.

Declaration

public static readonly BindableProperty TappedCommandProperty

Field Value

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

ToolTipSettingsProperty

Identifies the ToolbarToolTipSettings bindable property.

Declaration

public static readonly BindableProperty ToolTipSettingsProperty

Field Value

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

Properties

BackwardButtonBackground

Gets or sets the value to customize back navigation button background.

Declaration

public Brush BackwardButtonBackground { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Examples

The below example shows how to set the backwardButtonBackground property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="NavigationButtons"
                   BackwardButtonBackground="DarkGray"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.NavigationButtons;
toolbar.BackwardButtonBackground = new SolidColorBrush(Colors.DarkGray);
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

BackwardButtonIconColor

Gets or sets the value to customize backward navigation button icon color.

Declaration

public Color BackwardButtonIconColor { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Color

Examples

The below example shows how to set the backwardButtonIconColor property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="NavigationButtons"
                   BackwardButtonIconColor="Blue"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.NavigationButtons;
toolbar.BackwardButtonIconColor = Colors.Blue;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

ForwardButtonBackground

Gets or sets the value to customize forward navigation button background.

Declaration

public Brush ForwardButtonBackground { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Examples

The below example shows how to set the forwardButtonBackground property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="NavigationButtons"
                   ForwardButtonBackground="LightGray"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.NavigationButtons;
toolbar.ForwardButtonBackground = new SolidColorBrush(Colors.DarkGray);
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

ForwardButtonIconColor

Gets or sets the value to customize forward navigation button icon color.

Declaration

public Color ForwardButtonIconColor { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Color

Examples

The below example shows how to set the forwardButtonIconColor property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="NavigationButtons"
                   ForwardButtonIconColor="Red"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.NavigationButtons;
toolbar.ForwardButtonIconColor = Colors.Red;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

ItemLongPressedCommand

Gets or sets the System.Windows.Input.ICommand which will be executed when longPressed the SfToolbarItem.

Declaration

public ICommand ItemLongPressedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarItemLongPressedEventArgs is passed as command parameter

Examples

The following code demonstrates how to use the toolbar toolbarItemLongPressedCommand property.

# [XAML](#tab/tabid-10)

<Grid>
<Grid.BindingContext>
    <local:ToolbarInteractionViewModel />
</Grid.BindingContext>
<toolbar:SfToolbar ItemLongPressedCommand="{Binding ToolbarItemLongPressedCommand}"
                   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>
</Grid>

# [C#](#tab/tabid-11)

public class ToolbarInteractionViewModel
{
    public ICommand ToolbarItemLongPressedCommand { get; set; }
    public ToolbarInteractionViewModel()
    {
        this.ToolbarItemLongPressedCommand = new Command<ToolbarItemLongPressedEventArgs>(ExecuteToolbarItemLongPressed, CanExecuteToolbarItemLongPressed);
    }
    private bool CanExecuteToolbarItemLongPressed(ToolbarItemLongPressedEventArgs arg)
    {
        return true;
    }
    private void ExecuteToolbarItemLongPressed(ToolbarItemLongPressedEventArgs e)
    {
        var toolbarItem = e.ToolbarItem;
    }
}

Items

Gets or sets the collection toolbar items.

Declaration

public IList<BaseToolbarItem> Items { get; set; }

Property Value

Type
System.Collections.Generic.IList<BaseToolbarItem>

Examples

The below examples shows, how to use the items property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
               HeightRequest="56"
               Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center},
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" },  Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End},
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.Items = viewModel.ToolbarItems;
toolbar.Orientation = ToolbarOrientation.Horizontal;
this.Content = toolbar;

ItemSpacing

Gets or sets the value for spacing between the toolbar items.

Declaration

public double ItemSpacing { get; set; }

Property Value

Type
System.Double

Examples

The following example demonstrates how to use the itemSpacing property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
               HeightRequest="56"
               Items="{Binding ToolbarItems}"
               Orientation="Horizontal"
               ItemSpacing="10">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center},
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End},
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.Items = viewModel.ToolbarItems;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.ItemSpacing = 10;
this.Content = toolbar;

ItemTouchInteractionCommand

Gets or sets the System.Windows.Input.ICommand which will be executed when interacting the SfToolbarItem.

Declaration

public ICommand ItemTouchInteractionCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarItemTouchInteractionEventArgs is passed as command parameter.

Examples

The following code demonstrates how to use the itemTouchInteraction command.

# [XAML](#tab/tabid-8)

<Grid>
<Grid.BindingContext>
    <local:ToolbarInteractionViewModel />
</Grid.BindingContext>
<toolbar:SfToolbar ItemTouchInteractionCommand="{Binding ToolbarItemTouchInteractedCommand}"
                   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>
</Grid>

# [C#](#tab/tabid-9)

public class ToolbarInteractionViewModel
{
    public ICommand ToolbarItemTouchInteractedCommand { get; set; }
    public ToolbarInteractionViewModel()
    {
        this.ToolbarItemTouchInteractedCommand = new Command<ToolbarItemTouchInteractionEventArgs>(ExecuteToolbarItemTouchInteracted, CanExecuteToolbarItemTouchInteracted);
    }
    private bool CanExecuteToolbarItemTouchInteracted(ToolbarItemTouchInteractionEventArgs arg)
    {
        return true;
    }
    private void ExecuteToolbarItemTouchInteracted(ToolbarItemTouchInteractionEventArgs e)
    {
        var toolbarItem = e.ToolbarItem;
        var toolbarItemAction = e.PointerActions;
    }
}

MoreButtonBackground

Gets or sets the value to customize back navigation button background.

Declaration

public Brush MoreButtonBackground { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Examples

The below example shows how to set the moreButtonBackground property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="MoreButton"
                   MoreButtonBackground="DarkGray"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.MoreButton;
toolbar.MoreButtonBackground = new SolidColorBrush(Colors.DarkGray);
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

MoreButtonIconColor

Gets or sets the value to customize more button icon color.

Declaration

public Color MoreButtonIconColor { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Color

Examples

The below example shows how to use the MoreButtonIconColor property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="MoreButton"
                   MoreButtonIconColor="Green"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.MoreButton;
toolbar.MoreButtonIconColor = Colors.Green;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

MoreButtonTappedCommand

Gets or sets the System.Windows.Input.ICommand which will be executed when tapping the more button.

Declaration

public ICommand MoreButtonTappedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarMoreButtonTappedEventArgs is passed as command parameter

Examples

The following code demonstrates how to use the toolbar moreButtonTappedCommand property.

# [XAML](#tab/tabid-12)

<Grid>
<Grid.BindingContext>
    <local:ToolbarInteractionViewModel />
</Grid.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar" MoreButtonTappedCommand="{Binding MoreButtonTappedCommand}"
                   HeightRequest="56"
                   WidthRequest="150"
                   Orientation="Horizontal"
                   OverflowMode="MoreButton">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </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>
</Grid>

# [C#](#tab/tabid-13)

public class ToolbarInteractionViewModel
{
    public ICommand MoreButtonTappedCommand { get; set; }
    public ToolbarInteractionViewModel()
    {
        this.MoreButtonTappedCommand = new Command<ToolbarMoreButtonTappedEventArgs>(ExecuteMoreButtonTapped, CanExecuteMoreButtonTapped);
    }
    private bool CanExecuteMoreButtonTapped(ToolbarMoreButtonTappedEventArgs arg)
    {
        return true;
    }
    private void ExecuteMoreButtonTapped(ToolbarMoreButtonTappedEventArgs e)
    {
        var moreItems = e.ToolbarItems;
    }
}

MoreItemsChangedCommand

Gets or sets the System.Windows.Input.ICommand which will be executed when the more button is changed.

Declaration

public ICommand MoreItemsChangedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarMoreItemsChangedEventArgs is passed as command parameter.

Examples

The following code demonstrates how to use the toolbar moreItemsChangedCommand property.

# [XAML](#tab/tabid-14)

<Grid>
<Grid.BindingContext>
    <local:ToolbarInteractionViewModel />
</Grid.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar" MoreItemsChangedCommand="{Binding MoreItemsChangedCommand}"
                   HeightRequest="56"
                   WidthRequest="150"
                   Orientation="Horizontal"
                   OverflowMode="MoreButton">
    <toolbar:SfToolbar.Items>
        <toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
            <toolbar:SfToolbarItem.Icon>
                <FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
            </toolbar:SfToolbarItem.Icon>
        </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>
</Grid>

# [C#](#tab/tabid-15)

public class ToolbarInteractionViewModel
{
    public ICommand MoreItemsChangedCommand { get; set; }
    public ToolbarInteractionViewModel()
    {
        this.MoreItemsChangedCommand = new Command<ToolbarMoreItemsChangedEventArgs>(ExecuteMoreItemsChanged, CanExecuteMoreItemsChanged);
    }
    private bool CanExecuteMoreItemsChanged(ToolbarMoreItemsChangedEventArgs arg)
    {
        return true;
    }
    private void ExecuteMoreItemsChanged(ToolbarMoreItemsChangedEventArgs e)
    {
        var moreItems = e.ToolbarItems;
    }
}

MoreItemsRelativePosition

Gets or sets the moreItems popup view position.

Declaration

public ToolbarRelativePosition MoreItemsRelativePosition { get; set; }

Property Value

Type
ToolbarRelativePosition

Remarks

It is applicable when overflow mode is more button.

Examples

The below example shows how to use the moreItemsRelativePosition property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   HeightRequest="56"
                   WidthRequest="200"
                   Orientation="Horizontal"
                   OverflowMode="MoreButton"
                   MoreItemsRelativePosition="Right"
                   Items="{Binding ToolbarItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 200;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.Items = viewModel.ToolbarItems;
toolbar.MoreItemsRelativePosition = ToolbarRelativePosition.Right;
this.Content = toolbar;

Orientation

Gets or sets the orientation of the toolbar either in horizontal or vertical layout.

Declaration

public ToolbarOrientation Orientation { get; set; }

Property Value

Type
ToolbarOrientation

Examples

The following example demonstrates how to use the orientation property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
               WidthRequest="56"
               Items="{Binding ToolbarItems}"
               Orientation="Vertical">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center},
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" },  Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End},
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.WidthRequest = 56;
toolbar.Items = viewModel.ToolbarItems;
toolbar.Orientation = ToolbarOrientation.Vertical;
this.Content = toolbar;

OverflowMode

Gets or sets the scroll option of toolbar.

Declaration

public ToolbarItemOverflowMode OverflowMode { get; set; }

Property Value

Type
ToolbarItemOverflowMode

Remarks

OverFlowMode only applicable for SfToolbar and not applicable for SfOverlayToolbar

Examples

The following example demonstrates how to use the overflowMode property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
               HeightRequest = "56"
               WidthRequest = "100"
               Items="{Binding ToolbarItems}"
               Orientation="Horizontal"
               OverflowMode="MoreButton">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center},
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End},
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.WidthRequest = 100;
toolbar.Items = viewModel.ToolbarItems;
toolbar.Orientation = ToolbarOrientation.Horizontal;
toolbar.OverflowMode = ToolbarItemOverflowMode.MoreButton;
this.Content = toolbar;

TappedCommand

Gets or sets the System.Windows.Input.ICommand which will be executed when tapping the SfToolbarItem.

Declaration

public ICommand TappedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarTappedEventArgs is passed as command parameter.

Examples

The following code demonstrates how to use the toolbar tappedCommand property.

# [XAML](#tab/tabid-6)

<Grid>
<Grid.BindingContext>
    <local:ToolbarInteractionViewModel />
</Grid.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                   TappedCommand="{Binding ToolbarTappedCommand}"
                   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>
</Grid>

# [C#](#tab/tabid-7)

public class ToolbarInteractionViewModel
{
    public ICommand ToolbarTappedCommand { get; set; }
    public ToolbarInteractionViewModel()
    {
        this.ToolbarTappedCommand = new Command<ToolbarTappedEventArgs>(ExecuteTapped, CanExecuteTapped);
    }
    private bool CanExecuteTapped(ToolbarTappedEventArgs arg)
    {
        return true;
    }
    private void ExecuteTapped(ToolbarTappedEventArgs obj)
    {
        var oldItem = obj.PreviousToolbarItem;
        var newItem = obj.NewToolbarItem;
    }
}

ToolTipSettings

Gets or sets the toolTipSettings for the items.

Declaration

public ToolbarToolTipSettings ToolTipSettings { get; set; }

Property Value

Type
ToolbarToolTipSettings

Remarks

ToolTip is only visible for the default item view and not for the customized views such as button

Examples

The below example shows how to use the toolTipSettings property of the sfToolbar.

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                 HeightRequest="56"
                 Items="{Binding ToolbarItems}"
                 Orientation="Horizontal">
    <toolbar:SfToolbar.ToolTipSettings>
        <toolbar:ToolbarToolTipSettings Background="Red" ToolTipPosition="Top">
            <toolbar:ToolbarToolTipSettings.TextStyle>
                <toolbar:ToolbarTextStyle TextColor="Yellow" FontSize="18" FontAttributes="Italic" FontAutoScalingEnabled="True" FontFamily="OpenSansSemibold"/>
            </toolbar:ToolbarToolTipSettings.TextStyle>
        </toolbar:ToolbarToolTipSettings>
    </toolbar:SfToolbar.ToolTipSettings>
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE713", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 1", Alignment = ToolbarItemAlignment.Start },
            new SeparatorToolbarItem() { Stroke = Colors.Black, Alignment = ToolbarItemAlignment.Start },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE714", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 2", Alignment = ToolbarItemAlignment.Center },
            new SeparatorToolbarItem() { Stroke = Colors.Red, Alignment = ToolbarItemAlignment.Center },
            new SfToolbarItem() { Icon = new FontImageSource() { Glyph = "\uE715", FontFamily = "MaterialAssets" }, Text = "ToolbarItem 3", Alignment = ToolbarItemAlignment.End },
            new SeparatorToolbarItem() { Stroke = Colors.Blue, Alignment = ToolbarItemAlignment.End },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
}

SfToolbar toolbar = new SfToolbar();
ToolbarViewModel viewModel = new ToolbarViewModel();
toolbar.HeightRequest = 56;
toolbar.Items = viewModel.ToolbarItems;
toolbar.Orientation = ToolbarOrientation.Horizontal;
ToolbarToolTipSettings toolTipSettings = new ToolbarToolTipSettings
{
    Background = Colors.Red,
    ToolTipPosition = ToolbarRelativePosition.Top,
    TextStyle = new ToolbarTextStyle
    {
        TextColor = Colors.Yellow,
        FontSize = 18,
        FontAttributes = FontAttributes.Italic,
        FontAutoScalingEnabled = true,
        FontFamily = "OpenSansSemibold"
    }
};
toolbar.ToolTipSettings = toolTipSettings;
this.Content = toolbar;

Methods

ArrangeContent(Rect)

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.ArrangeContent(Rect)

ClearSelection()

Method to clear the selected toolbar item.

Declaration

public void ClearSelection()

MeasureContent(Double, Double)

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint
System.Double	heightConstraint

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.MeasureContent(Double, Double)

OnDraw(ICanvas, RectF)

Declaration

protected override void OnDraw(ICanvas canvas, RectF dirtyRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
Microsoft.Maui.Graphics.RectF	dirtyRect

Overrides

SfView.OnDraw(ICanvas, RectF)

OnHandlerChanged()

Declaration

protected override void OnHandlerChanged()

Overrides

SfView.OnHandlerChanged()

Events

ItemLongPressed

Event occurs when the toolbar item is long pressed.

Declaration

public event EventHandler<ToolbarItemLongPressedEventArgs> ItemLongPressed

Event Type

Type
System.EventHandler<ToolbarItemLongPressedEventArgs>

Examples

The following code demonstrates how to use the toolbar itemLongPressed event.

this.toolbar.ItemLongPressed += this.OnToolbarItemLongPressed;
private void OnToolbarItemLongPressed(object? sender, ToolbarItemLongPressedEventArgs e)
{
    var toolbarItem = e.ToolbarItem;
}

ItemTouchInteraction

Event occurs when the toolbar item is touch or pointer action.

Declaration

public event EventHandler<ToolbarItemTouchInteractionEventArgs> ItemTouchInteraction

Event Type

Type
System.EventHandler<ToolbarItemTouchInteractionEventArgs>

Examples

The following code demonstrates how to use the toolbar itemTouchInteraction event.

this.toolbar.ItemTouchInteraction += this.OnToolbarItemTouchInteraction;
private void OnToolbarItemTouchInteraction(object? sender, ToolbarItemTouchInteractionEventArgs e)
{
    var toolbarItem = e.ToolbarItem;
    var toolbarItemAction = e.PointerActions;
}

MoreButtonTapped

Invokes on more option button tapped.

Declaration

public event EventHandler<ToolbarMoreButtonTappedEventArgs> MoreButtonTapped

Event Type

Type
System.EventHandler<ToolbarMoreButtonTappedEventArgs>

Examples

The following code demonstrates how to use the toolbar moreButtonTapped event.

this.toolbar.MoreButtonTapped += this.OnMoreButtonTapped;
private void OnMoreButtonTapped(object? sender, ToolbarMoreButtonTappedEventArgs e)
{
    var moreItems = e.ToolbarItems;
}

MoreItemsChanged

Invokes on more items changed.

Declaration

public event EventHandler<ToolbarMoreItemsChangedEventArgs> MoreItemsChanged

Event Type

Type
System.EventHandler<ToolbarMoreItemsChangedEventArgs>

Examples

The following code demonstrates how to use the toolbar moreItemsChanged event.

this.toolbar.MoreItemsChanged += this.OnMoreItemsChanged;
private void OnMoreItemsChanged(object? sender, ToolbarMoreItemsChangedEventArgs e)
{
    var moreItems = e.ToolbarItems;
}

Tapped

Event occurs when the toolbar item is tapped.

Declaration

public event EventHandler<ToolbarTappedEventArgs> Tapped

Event Type

Type
System.EventHandler<ToolbarTappedEventArgs>

Examples

The following code demonstrates how to use the toolbar tapped event.

this.toolbar.Tapped += this.OnToolbarTapped;
private void OnToolbarTapped(object? sender, ToolbarTappedEventArgs e)
{
    var newToolbarItem = e.NewToolbarItem;
    var oldToolbarItem = e.PreviousToolbarItem;
}

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement