Class ToolbarToolTipSettings

Represents the ToolbarToolTipSettings class to hold toolbar tooltip settings.

Inheritance

System.Object

ToolbarToolTipSettings

Namespace: Syncfusion.Maui.Toolbar

Assembly: Syncfusion.Maui.Toolbar.dll

Syntax

public class ToolbarToolTipSettings : Element, IThemeElement

Constructors

ToolbarToolTipSettings()

Initializes a new instance of the ToolbarToolTipSettings class.

Declaration

public ToolbarToolTipSettings()

Fields

BackgroundProperty

Identifies the Background bindable property.

Declaration

public static readonly BindableProperty BackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TextStyleProperty

Identifies the TextStyle bindable property.

Declaration

public static readonly BindableProperty TextStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ToolTipPositionProperty

Identifies the ToolTipPosition bindable property.

Declaration

public static readonly BindableProperty ToolTipPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

Background

Gets or sets the background color for the tooltip view.

Declaration

public Brush Background { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Examples

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

<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"/>
    </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,
};
toolbar.ToolTipSettings = toolTipSettings;
this.Content = toolbar;

TextStyle

Gets or sets the text style of the tooltip view.

Declaration

public ToolbarTextStyle TextStyle { get; set; }

Property Value

Type
ToolbarTextStyle

Examples

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

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                 HeightRequest="56"
                 Items="{Binding ToolbarItems}"
                 Orientation="Horizontal">
    <toolbar:SfToolbar.ToolTipSettings>
        <toolbar:ToolbarToolTipSettings>
            <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
{
    TextStyle = new ToolbarTextStyle
    {
        TextColor = Colors.Yellow,
        FontSize = 18,
        FontAttributes = FontAttributes.Italic,
        FontAutoScalingEnabled = true,
        FontFamily = "OpenSansSemibold"
    }
};
toolbar.ToolTipSettings = toolTipSettings;
this.Content = toolbar;

ToolTipPosition

Gets or sets the text tooltip position based on toolbar position.

Declaration

public ToolbarRelativePosition ToolTipPosition { get; set; }

Property Value

Type
ToolbarRelativePosition

Examples

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

<ContentPage.BindingContext>
    <local:ToolbarViewModel/>
</ContentPage.BindingContext>
<toolbar:SfToolbar x:Name="Toolbar"
                 HeightRequest="56"
                 Items="{Binding ToolbarItems}"
                 Orientation="Horizontal">
    <toolbar:SfToolbar.ToolTipSettings>
        <toolbar:ToolbarToolTipSettings ToolTipPosition="Top"/>
    </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
{
    ToolTipPosition = ToolbarRelativePosition.Top,
};
toolbar.ToolTipSettings = toolTipSettings;
this.Content = toolbar;