public class SfToolbar : ToolBarBase, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IToolbarView, ITouchListener, 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.

BackwardButtonTemplateProperty

Identifies the BackwardButtonTemplate bindable property.

Declaration

public static readonly BindableProperty BackwardButtonTemplateProperty

Field Value

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

CornerRadiusProperty

Identifies the CornerRadius bindable property.

Declaration

public static readonly BindableProperty CornerRadiusProperty

Field Value

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

EnableLiquidGlassEffectProperty

Identifies the EnableLiquidGlassEffect property. It indicates whether the Liquid Effect is enabled for SfToolbar or not.

Declaration

public static readonly BindableProperty EnableLiquidGlassEffectProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

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.

ForwardButtonTemplateProperty

Identifies the ForwardButtonTemplate bindable property.

Declaration

public static readonly BindableProperty ForwardButtonTemplateProperty

Field Value

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

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;

BackwardButtonTemplate

Gets or sets a custom view for the backward button in the toolbar.

Declaration

public DataTemplate BackwardButtonTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Examples

The below example shows how to set the backward button template 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.BackwardButtonTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Label Text = "<"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                            </ViewCell>
                        </DataTemplate>
                    </toolbar:SfToolbar.BackwardButtonTemplate>
</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;
template = new DataTemplate(() =>
{
   Label label = new Label() { Text = "<", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
   return label;
});
toolbar.BackwardButtonTemplate = template;
this.Content = toolbar;

CornerRadius

Gets or sets the corner radius for selected toolbar items.

Declaration

public double CornerRadius { 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"
                   CornerRadius="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.CornerRadius = 10;
toolbar.Items = viewModel.ToolbarItems;
this.Content = toolbar;

EnableLiquidGlassEffect

Gets or sets a value indicating whether the liquid glass effect is enabled for the SfToolbar.

Declaration

public bool EnableLiquidGlassEffect { get; set; }

Property Value

Type
System.Boolean

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;

ForwardButtonTemplate

Gets or sets a custom view for the forward button in the toolbar.

Declaration

public DataTemplate ForwardButtonTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Examples

The below example shows how to set the forward button template 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.ForwardButtonTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Label Text = ">"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                            </ViewCell>
                        </DataTemplate>
                    </toolbar:SfToolbar.BackwardButtonTemplate>
</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;
template = new DataTemplate(() =>
{
   Label label = new Label() { Text = ">", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
   return label;
});
toolbar.ForwardButtonTemplate = template;
this.Content = toolbar;

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;

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()

Method to invoke when handler changed.

Declaration

protected override void OnHandlerChanged()

Overrides

ToolBarBase.OnHandlerChanged()

Events

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

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