Class SfOverlayToolbar

Represents the SfOverlayToolbar that holds the overlay toolbar layout and it's settings.

Inheritance
System.Object
SfView
ToolBarBase
SfOverlayToolbar
Implements
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<Microsoft.Maui.IView>
System.Collections.Generic.ICollection<Microsoft.Maui.IView>
System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>
System.Collections.IEnumerable
Microsoft.Maui.ISafeAreaView
Microsoft.Maui.IPadding
Microsoft.Maui.ICrossPlatformLayout
Microsoft.Maui.IVisualTreeElement
Inherited Members
Namespace: Syncfusion.Maui.Toolbar
Assembly: Syncfusion.Maui.Toolbar.dll
Syntax
public class SfOverlayToolbar : ToolBarBase, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IToolbarView, ITouchListener

Constructors

SfOverlayToolbar()

Initializes a new instance of the SfOverlayToolbar class.

Declaration
public SfOverlayToolbar()

Fields

BackIconAlignmentProperty

Identifies the BackIconAlignment bindable property.

Declaration
public static readonly BindableProperty BackIconAlignmentProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for the BackIconAlignment bindable property.

BackIconColorProperty

Identifies the BackIconColor bindable property.

Declaration
public static readonly BindableProperty BackIconColorProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

Gets or sets the color of the forward icon.

BackIconTemplateProperty

Identifies the BackIconTemplate bindable property.

Declaration
public static readonly BindableProperty BackIconTemplateProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for the BackIconTemplate bindable property.

BackIconToolTipTextProperty

Identifies the BackIconToolTipText bindable property.

Declaration
public static readonly BindableProperty BackIconToolTipTextProperty
Field Value
Type Description
Microsoft.Maui.Controls.BindableProperty

The identifier for the BackIconToolTipText bindable property.

Properties

BackIconAlignment

Gets or sets the position of the Overlay toolbar back button.

Declaration
public OverlayToolbarBackIconPosition BackIconAlignment { get; set; }
Property Value
Type
OverlayToolbarBackIconPosition
Examples

the following code demonstrates how to set the backIcon alignment for overlayToolbar.

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

BackIconColor

Gets or sets the value to customize back icon color.

Declaration
public Color BackIconColor { get; set; }
Property Value
Type
Microsoft.Maui.Graphics.Color
Examples

the following code demonstrates how to set the backIcon color for overlayToolbar.

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

BackIconTemplate

Gets or sets a custom view for the back icon in the overlay toolbar. Use this to fully customize the back icon beyond just the icon.

Declaration
public DataTemplate BackIconTemplate { get; set; }
Property Value
Type
Microsoft.Maui.Controls.DataTemplate
Examples

the following code demonstrates how to set the backIcon template for overlayToolbar.

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

BackIconToolTipText

Gets or sets the tooltip text shown when hovering the back icon in the overlay toolbar.

Declaration
public string BackIconToolTipText { get; set; }
Property Value
Type
System.String
Remarks

If TooltipText is provided, tooltip will be displayed on the back icon. If not provided, use must handle the tooltip manually.

Examples

the following code demonstrates how to set the backIcon tooltip text for overlayToolbar.

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

Methods

ArrangeContent(Rect)

Method to arrange the overlay toolbar content.

Declaration
protected override Size ArrangeContent(Rect bounds)
Parameters
Type Name Description
Microsoft.Maui.Graphics.Rect bounds

The size that this element should use to arrange its child elements.
Returns
Type Description
Microsoft.Maui.Graphics.Size

The actual size used.
Overrides

MeasureContent(Double, Double)

Method to measure the size of the overlay toolbar content.

Declaration
protected override Size MeasureContent(double widthConstraint, double heightConstraint)
Parameters
Type Name Description
System.Double widthConstraint

The available width.
System.Double heightConstraint

The available height.
Returns
Type Description
Microsoft.Maui.Graphics.Size

The desired size.
Overrides

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

OnHandlerChanged()

Invokes on handler changed.

Declaration
protected override void OnHandlerChanged()
Overrides

OnPropertyChanged(String)

Method trigger when the property changed.

Declaration
protected override void OnPropertyChanged(string propertyName = null)
Parameters
Type Name Description
System.String propertyName

The property name.

Implements

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