.NET MAUI Toolbar Styling

New to Telerik UI for .NET MAUI? Start a free 30-day trial

Updated on Sep 17, 2026

You can style the Toolbar using the Flexible Styling API.

Style the Toolbar using the following properties:

BackgroundColor(Microsoft.Maui.Graphics.Color)—Specifies the background color of the toolbar.
BorderColor(Microsoft.Maui.Graphics.Color)—Specifies the color of the border around the toolbar.
BorderThickness(Microsoft.Maui.Thickness)—Specifies the thickness of the border around the toolbar.
CornerRadius(Microsoft.Maui.Thickness)—Specifies the corner radius of the border around the toolbar.
Style(of type Microsoft.Maui.Controls.Style)—Specifies the style of the toolbar.

OverflowMenuButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.OverflowMenuButtonToolbarItemView)—Specifies the Style applied to the overflow menu button in the toolbar.
BackNavigationButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.BackNavigationButtonToolbarItemView)—Specifies the Style applied to the back navigation button in the toolbar.
ScrollForwardButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.ScrollForwardButtonToolbarItemView)—Specifies the Style applied to the scroll button in the toolbar.
ScrollBackwardButtonStyle(Microsoft.Maui.Controls.Style with target type Telerik.Maui.Controls.ScrollBackwardButtonToolbarItemView)—Specifies the Style applied to the backward scroll button in the toolbar.

Style the toolbar items using the Style(Style) property. Each toolbar item has a corresponding ToolbarItemView and this is the target type of the Style property.

Toolbar Item	Style Target Type
`ToolbarItem`	`ToolbarItemView`
`EntryToolbarItem`	`entryToolbarItemView`
`ButtonToolbarItem`	`ButtonToolbarItemView`
`DropDownButtonToolbarItem`	`DropDownButtonToolbarItemView`
`DropDownMenuButtonToolbarItem`	`DropDownMenuButtonToolbarItemView`
`ToggleButtonToolbarItem`	`ToggleButtonToolbarItemView`
`RadioButtonToolbarItem`	`RadioButtonToolbarItemView`
`NavigationButtonToolbarItem`	`NavigationButtonToolbarItemView`
`SplitButtonToolbarItem`	`SplitButtonToolbarItemView`
`OptionsButtonToolbarItem`	`OptionsButtonToolbarItemView`
`SliderToolbarItem`	`SliderToolbarItemView`
`ListPickerButtonToolbarItem`	`ToolbarListItemView`
`LabelToolbarItem`	`LabelToolbarItemView`
`BusyIndicatorToolbarItem`	`BusyIndicatorToolbarItemView`
`SeparatorToolbarItem`	`SeparatorToolbarItemView`
`GroupToolbarItem`	`GroupToolbarItemView`

Common properties that can be applied to the Style of each toolbar item are:

Orientation(enum of type Telerik.Maui.Controls.ToolbarOrientation)—Specifies the orientation of the toolbar item in the toolbar. The available options are:
- Horizontal
- Vertical
PlacementLocation(enum of type Telerik.Maui.Controls.ToolbarItemPlacementOptions)—Specifies the placement location of the toolbar item in the toolbar. This type supports a bitwise combination of its members to enable more than one option. The available options are:
- ToolStrip—The toolbar item appears in the main tool strip area of the toolbar.
- DropDown—The toolbar item appears in the overflow drop-down menu of the toolbar.
ControlTemplate(Microsoft.Maui.Controls.ControlTemplate)—Specifies the control template of the toolbar item.
BackgroundColor(Microsoft.Maui.Graphics.Color)—Specifies the background color of the toolbar item.
BorderColor(Microsoft.Maui.Graphics.Color)—Specifies the border color of the toolbar item.
BorderThickness(Microsoft.Maui.Thickness)—Specifies the border thickness of the toolbar item.
CornerRadius(Microsoft.Maui.Thickness)—Specifies the corner radius of the toolbar item.
ContentPadding(Microsoft.Maui.Thickness)—Specifies the content padding of the control.

Example

Use visual states in the toolbar items to change their appearance when they are in different states. For example, you can change the background color of a button when it is pressed or hovered over.

Define the toolbar items in XAML:

XAML

<telerik:RadToolbar x:Name="toolbarVisualStates"
                    AutomationId="toolbarVisualStates"
                    OverflowMenuButtonStyle="{StaticResource overflowMenuButtonStyle}">
    <telerik:RadToolbar.Resources>
        <Style TargetType="telerik:ButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}" />
        <Style TargetType="telerik:DropDownButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}" />
        <Style TargetType="telerik:ListPickerButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}" />
        <Style TargetType="telerik:OptionsButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}" />
        <Style TargetType="telerik:NavigationButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}" />
        <Style TargetType="telerik:ToggleButtonToolbarItemView"
               BasedOn="{StaticResource selectableItemStyle}" />
        <Style TargetType="telerik:RadioButtonToolbarItemView"
               BasedOn="{StaticResource selectableItemStyle}" />
        <Style TargetType="telerik:SplitButtonToolbarItemView"
               BasedOn="{StaticResource splitButtonItemStyle}" />
        <Style TargetType="telerik:LabelToolbarItemView"
               BasedOn="{StaticResource labelItemStyle}" />
        <Style TargetType="telerik:EntryToolbarItemView">
            <Setter Property="EntryStyle" Value="{StaticResource entryStyle}" />
            <Setter Property="WidthRequest" Value="220" />
        </Style>
        <Style TargetType="telerik:BusyIndicatorToolbarItemView">
            <Setter Property="BusyIndicatorStyle" Value="{StaticResource busyIndicatorStyle}" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
    </telerik:RadToolbar.Resources>

    <telerik:LabelToolbarItem Text="Formatting:" />
    <telerik:ButtonToolbarItem Text="Button">
        <telerik:ButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconUndo}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:ButtonToolbarItem.ImageSource>
    </telerik:ButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:ToggleButtonToolbarItem Text="ToggleButton">
        <telerik:ToggleButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconBold}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:ToggleButtonToolbarItem.ImageSource>
    </telerik:ToggleButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:GroupToolbarItem>
        <telerik:RadioButtonToolbarItem Text="Left">
            <telerik:RadioButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAlignLeft}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:RadioButtonToolbarItem.ImageSource>
        </telerik:RadioButtonToolbarItem>
        <telerik:RadioButtonToolbarItem Text="Center">
            <telerik:RadioButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAlignCenter}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:RadioButtonToolbarItem.ImageSource>
        </telerik:RadioButtonToolbarItem>
        <telerik:RadioButtonToolbarItem Text="Right">
            <telerik:RadioButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAlignRight}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:RadioButtonToolbarItem.ImageSource>
        </telerik:RadioButtonToolbarItem>
    </telerik:GroupToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:ButtonToolbarItem Text="Disabled"
                               IsEnabled="False">
        <telerik:ButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconRedo}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:ButtonToolbarItem.ImageSource>
    </telerik:ButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:DropDownButtonToolbarItem Text="DropDownButton"
                                       DropDownContentStyle="{StaticResource dropDownContentStyle}">
        <telerik:DropDownButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconBulleting}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:DropDownButtonToolbarItem.ImageSource>
        <telerik:DropDownButtonToolbarItem.DropDownContentTemplate>
            <ControlTemplate>
                <telerik:DropDownButtonToolbarItemViewContent>
                    <VerticalStackLayout Padding="10">
                        <Label Text="Bulleted" />
                        <Label Text="Numbered" />
                        <Label Text="Multilevel" />
                    </VerticalStackLayout>
                </telerik:DropDownButtonToolbarItemViewContent>
            </ControlTemplate>
        </telerik:DropDownButtonToolbarItem.DropDownContentTemplate>
    </telerik:DropDownButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:SplitButtonToolbarItem Text="Save As...">
        <telerik:SplitButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconShare}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:SplitButtonToolbarItem.ImageSource>
        <telerik:ButtonToolbarItem Text="Save as TXT" />
        <telerik:ButtonToolbarItem Text="Save as DOCX" />
        <telerik:ButtonToolbarItem Text="Save as PDF" />
    </telerik:SplitButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:ListPickerButtonToolbarItem Text="ListPickerButton">
        <telerik:ListPickerButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconFontSize}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:ListPickerButtonToolbarItem.ImageSource>
        <telerik:ListPickerButtonToolbarItem.ItemsSource>
            <x:Array Type="{x:Type x:Int32}">
                <x:Int32>8</x:Int32>
                <x:Int32>10</x:Int32>
                <x:Int32>12</x:Int32>
                <x:Int32>14</x:Int32>
            </x:Array>
        </telerik:ListPickerButtonToolbarItem.ItemsSource>
    </telerik:ListPickerButtonToolbarItem>
    <telerik:SeparatorToolbarItem />
    <telerik:OptionsButtonToolbarItem Text="Filters">
        <telerik:OptionsButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconFilters}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:OptionsButtonToolbarItem.ImageSource>
        <telerik:OptionsButtonToolbarItem.OptionsContentTemplate>
            <ControlTemplate>
                <VerticalStackLayout Spacing="10"
                                     WidthRequest="200"
                                     Padding="20">
                    <Label Text="Brightness" />
                    <Slider />
                    <Label Text="Contrast" />
                    <Slider />
                </VerticalStackLayout>
            </ControlTemplate>
        </telerik:OptionsButtonToolbarItem.OptionsContentTemplate>
    </telerik:OptionsButtonToolbarItem>
</telerik:RadToolbar>

<Label Text="NavigationButton (with Slider) and Label items:"
       FontAttributes="Bold"
       Margin="0, 10, 0, 0" />
<telerik:RadToolbar x:Name="toolbarNavigationVisualStates"
                    AutomationId="toolbarNavigationVisualStates"
                    OverflowMenuButtonStyle="{StaticResource overflowMenuButtonStyle}">
    <telerik:RadToolbar.Resources>
        <Style TargetType="telerik:NavigationButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style TargetType="telerik:LabelToolbarItemView"
               BasedOn="{StaticResource labelItemStyle}">
            <Setter Property="DisplayOptions" Value="Text" />
        </Style>
    </telerik:RadToolbar.Resources>
    <telerik:LabelToolbarItem Text="Brightness Level:" />
    <telerik:NavigationButtonToolbarItem Text="NavigationButton">
        <telerik:NavigationButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconBrightness}"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:NavigationButtonToolbarItem.ImageSource>
        <telerik:SliderToolbarItem Minimum="0"
                                   Maximum="100"
                                   Value="50" />
    </telerik:NavigationButtonToolbarItem>
</telerik:RadToolbar>

<Label Text="Entry and BusyIndicator items:"
       FontAttributes="Bold"
       Margin="0, 10, 0, 0" />
<telerik:RadToolbar x:Name="toolbarEntryVisualStates"
                    AutomationId="toolbarEntryVisualStates"
                    OverflowMenuButtonStyle="{StaticResource overflowMenuButtonStyle}">
    <telerik:RadToolbar.Resources>
        <Style TargetType="telerik:ButtonToolbarItemView"
               BasedOn="{StaticResource buttonItemStyle}">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style TargetType="telerik:LabelToolbarItemView"
               BasedOn="{StaticResource labelItemStyle}" />
        <Style TargetType="telerik:EntryToolbarItemView">
            <Setter Property="EntryStyle" Value="{StaticResource entryStyle}" />
            <Setter Property="WidthRequest" Value="220" />
        </Style>
        <Style TargetType="telerik:BusyIndicatorToolbarItemView">
            <Setter Property="BusyIndicatorStyle" Value="{StaticResource busyIndicatorStyle}" />
            <Setter Property="HorizontalOptions" Value="Start" />
        </Style>
    </telerik:RadToolbar.Resources>
    <telerik:ButtonToolbarItem Text="Reload">
        <telerik:ButtonToolbarItem.ImageSource>
            <FontImageSource Glyph="&#xe86e;"
                             FontFamily="{x:Static telerik:TelerikFont.Name}"
                             Size="16" />
        </telerik:ButtonToolbarItem.ImageSource>
    </telerik:ButtonToolbarItem>
    <telerik:EntryToolbarItem Text="https://www.telerik.com" />
    <telerik:LabelToolbarItem Text="Loading page..." />
    <telerik:BusyIndicatorToolbarItem IsBusy="True" />
</telerik:RadToolbar>

Define the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Define the visual states for the toolbar items in XAML:

For ButtonToolbarItem, DropDownButtonToolbarItem, ListPickerToolbarItem, OptionsButtonToolbarItem, and NavigationButtonToolbarItem:

XAML

<Style TargetType="telerik:ButtonToolbarItemView" x:Key="buttonItemStyle">
    <Setter Property="CornerRadius" Value="4" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#1188FF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#E6F2FF" />
                        <Setter Property="TextColor" Value="#0A5CBF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Opened">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#1188FF" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#B0B0B0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For LabelToolbarItem:

XAML

<Style TargetType="telerik:LabelToolbarItemView" x:Key="labelItemStyle">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#0A5CBF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#1188FF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#B0B0B0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For EntryToolbarItem:

XAML

<Style TargetType="telerik:RadEntry" x:Key="entryStyle">
    <Setter Property="Placeholder" Value="Search here or type a URL" />
    <Setter Property="ReserveSpaceForErrorView" Value="False" />
    <Setter Property="TextColor" Value="#0A5CBF" />
</Style>

For ToggleButtonToolbarItem and RadioButtonToolbarItem:

XAML

<Style TargetType="telerik:SelectableButtonToolbarItemView" x:Key="selectableItemStyle">
    <Setter Property="CornerRadius" Value="4" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#1188FF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#E6F2FF" />
                        <Setter Property="TextColor" Value="#0A5CBF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#1188FF" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SelectedDisabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#9FC8F0" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#B0B0B0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For SplitButtonToolbarItem:

XAML

<Style TargetType="telerik:SplitButtonToolbarItemView" x:Key="splitButtonItemStyle">
    <Setter Property="CornerRadius" Value="4" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#1188FF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#E6F2FF" />
                        <Setter Property="TextColor" Value="#0A5CBF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#B0B0B0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For OverflowMenuButtonToolbarItem:

XAML

<Style TargetType="telerik:OverflowMenuButtonToolbarItemView" x:Key="overflowMenuButtonStyle">
    <Setter Property="CornerRadius" Value="4" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#1188FF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#E6F2FF" />
                        <Setter Property="TextColor" Value="#0A5CBF" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Opened">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#1188FF" />
                        <Setter Property="TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="TextColor" Value="#B0B0B0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For BusyIndicatorToolbarItem:

XAML

<Style TargetType="telerik:RadBusyIndicator" x:Key="busyIndicatorStyle">
    <Setter Property="AnimationType" Value="Animation9" />
    <Setter Property="AnimationContentColor" Value="#1188FF" />
</Style>

For a runnable example with the Toolbar Visual States, see the SDKBrowser Demo Application and go to Toolbar > Visual States category.

Style the toolbar

Style the toolbar elements

Styling the toolbar items

Example

See Also