Displaying Image and Text in a Toolbar Item

Updated over 6 months ago

Environment

Version	Product	Author
6.2.0	Telerik UI for .NET MAUI Toolbar	Dobrinka Yordanova

Description

How can I add both an image and some textual content to the buttons of the Toolbar for .NET MAUI?

Solution

To display both an image and text in the Toolbar's ButtonToolbarItem, use a style with the DisplayOptions property set to a bitwise combination of Text and Image enum members. This allows you to enable both options simultaneously.

1. Define a style for the ButtonToolbarItemView target type.
2. Set the DisplayOptions property of the style to "Text, Image".
3. Optionally, set the ImagePosition property to specify the position of the image relative to the text in the toolbar item.

Here is an example of how to define the style in XAML:

xaml

<Style TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="DisplayOptions" Value="Text, Image"/>
    <Setter Property="ImagePosition" Value="Right"/>
</Style>

For more examples, you refer to the .NET MAUI Toolbar configuration examples.

Notes

• The DisplayOptions property supports a bitwise combination of enum members to enable multiple options.
• The ImagePosition property allows you to specify the position of the image relative to the text.

See Also

• Toolbar for .NET MAUI Documentation: ButtonToolbarItem