public abstract class ToolBarBase : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IToolbarView, ITouchListener

Fields

DividedLineStrokeProperty

Identifies the DividedLineStroke bindable property.

Declaration

public static readonly BindableProperty DividedLineStrokeProperty

Field Value

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

DividedLineStrokeThicknessProperty

Identifies the DividedLineStrokeThickness bindable property.

Declaration

public static readonly BindableProperty DividedLineStrokeThicknessProperty

Field Value

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

SelectedItemProperty

Identifies the SelectedItem bindable property.

Declaration

public static readonly BindableProperty SelectedItemProperty

Field Value

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

SelectedItemsProperty

Identifies the SelectedItems bindable property.

Declaration

public static readonly BindableProperty SelectedItemsProperty

Field Value

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

SelectionChangedCommandProperty

Identifies the SelectionChangedCommand bindable property.

Declaration

public static readonly BindableProperty SelectionChangedCommandProperty

Field Value

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

SelectionCornerRadiusProperty

Identifies the SelectionCornerRadius bindable property.

Declaration

public static readonly BindableProperty SelectionCornerRadiusProperty

Field Value

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

SelectionModeProperty

Identifies the SelectionMode dependency property.

Declaration

public static readonly BindableProperty SelectionModeProperty

Field Value

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

DividedLineStroke

Gets or sets the color for the divider line in main and overlay toolbar.

Declaration

public Color DividedLineStroke { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Color

Examples

The below example shows how to set the divided line stroke 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"
                   DividedLineStroke="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.ForwardButtonBackground = new SolidColorBrush(Colors.DarkGray);
toolbar.DividedLineStroke = Colors.Red;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

DividedLineStrokeThickness

Gets or sets the thickness for the divider line in main and overlay toolbar.

Declaration

public double DividedLineStrokeThickness { get; set; }

Property Value

Type
System.Double

Examples

The below example shows how to set the divided line stroke thickness 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"
                   DividedLineStrokeThickness = "5"
                   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.DividedLineStrokeThickness = 5;
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;
    }
}

SelectedItem

Gets or sets the selected toolbar item.

Declaration

public SfToolbarItem SelectedItem { get; set; }

Property Value

Type
SfToolbarItem

Remarks

SelectedItem applicable when SelectionMode is Single or SingleDeselect.

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}"
               SelectedItem="{Binding ToolbarItems[2]}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem { Name = "AlignLeft", ToolTipText = "Align-Left", Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" }},
            new SfToolbarItem { Name = "AlignRight", ToolTipText = "Align-Right", Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "AlignCenter", ToolTipText = "Align-Center",Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "AlignJustify", ToolTipText = "Align-Justify", Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" } },
        };
    }
    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.SelectedItem = viewModel.ToolbarItems[2];
this.Content = toolbar;

SelectedItems

Gets or sets the selected toolbar items.

Declaration

public ObservableCollection<SfToolbarItem> SelectedItems { get; set; }

Property Value

Type
System.Collections.ObjectModel.ObservableCollection<SfToolbarItem>

Remarks

SelectedItems applicable only when SelectionMode is Multiple.

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}"
               SelectedItems="{Binding SelectedItems}">
</toolbar:SfToolbar>

public class ToolbarViewModel
{
    private ObservableCollection<BaseToolbarItem> toolbarItems;
    public ToolbarViewModel()
    {
        toolbarItems = new ObservableCollection<BaseToolbarItem>()
        {
            new SfToolbarItem { Name = "Bold", ToolTipText = "Bold", Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" }},
            new SfToolbarItem { Name = "Underline", ToolTipText = "Underline", Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "Italic", ToolTipText = "Italic", Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "AlignLeft", ToolTipText = "Align-Left", Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" }},
            new SfToolbarItem { Name = "AlignRight", ToolTipText = "Align-Right", Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "AlignCenter", ToolTipText = "Align-Center",Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" } },
            new SfToolbarItem { Name = "AlignJustify", ToolTipText = "Align-Justify", Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" } },
        };
    }
    public ObservableCollection<BaseToolbarItem> ToolbarItems
    {
        get { return toolbarItems; }
        set { toolbarItems = value; }
    }
    public ObservableCollection<SfToolbarItem> SelectedItems
    {
        get { return selectedItems; }
        set { selectedItems = value; }
    }
    private ObservableCollection<SfToolbarItem> selectedItems = new ObservableCollection<SfToolbarItem>();
    public ToolbarViewModel()
    {
        int i = 0;
        foreach(SfToolbarItem item in ItemCollection)
        {
            if (i % 2 == 0)
            {
                SelectedItems.Add(item);
            }
            i++;
        }
     }
}

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

SelectionChangedCommand

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

Declaration

public ICommand SelectionChangedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Remarks

ToolbarSelectionChangedEventArgs is passed as command parameter.

SelectionCornerRadius

Gets or sets the corner radius for selected toolbar items.

Declaration

public double SelectionCornerRadius { get; set; }

Property Value

Type
System.Double

Examples

The below example shows how to set the selection corner radius 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"
                   SelectionCornerRadius="10"
                   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.SelectionCornerRadius = 10;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

SelectionMode

Gets or sets the selection behavior of toolbar items, allowing single or multiple selections.

Declaration

public ToolbarSelectionMode SelectionMode { get; set; }

Property Value

Type
ToolbarSelectionMode

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

OnHandlerChanged()

Method to invoke when handler changed.

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;
}

SelectionChanged

Event occurs when the selection of toolbar items changes in the SfToolbar This event is raised whenever a toolbar item is selected or deselected, depending on the current ToolbarSelectionMode

Declaration

public event EventHandler<ToolbarSelectionChangedEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<ToolbarSelectionChangedEventArgs>

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