Skip to content

update toolbars #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 2, 2025
Merged

update toolbars #1183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8bda2f0
update toolbars
didiyordanova Jun 20, 2025
4453e85
Update controls/pdfviewer/toolbar/styling.md
didiyordanova Jul 2, 2025
45f0ec6
Update controls/pdfviewer/toolbar/styling.md
didiyordanova Jul 2, 2025
d658849
Update controls/richtexteditor/styling/toolbar-styling.md
didiyordanova Jul 2, 2025
ff9daf3
Update controls/richtexteditor/styling/toolbar-styling.md
didiyordanova Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion controls/imageeditor/toolbar/styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Each toolbar item has a `Style` property and the target type of the property is

| Toolbar Item | Style Target type |
| ------------ | ------- |
| `ImageEditorTransformationsToolbarItem` | `NavigationButtonToolbarItem` |
| `ImageEditorTransformationsToolbarItem` | `NavigationButtonToolbarItemView` |
| `ImageEditorFiltersToolbarItem` | `ImageEditorFilterOptionsToolbarItemView` |
| `ImageEditorCropOptionsToolbarItem` | `ImageEditorCropOptionsToolbarItemView` |
| `ImageEditorResizeOptionsToolbarItem` | `ImageEditorResizeOptionsToolbarItemView` |
Expand Down
24 changes: 22 additions & 2 deletions controls/pdfviewer/toolbar/styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,29 @@ slug: pdfviewer-toolbar-styling

The <a href="https://www.telerik.com/maui-ui/pdf-viewer" target="_blank">.NET MAUI PDF Viewer</a> provides a flexible styling API for its toolbar items.

As the `PDFViewerToolbar` is based on the `RadToolbar` control, all toolbar items in the PDF Viewer inherit from `ButtonToolbarItem`. All styling properties available for the `ButtonToolbarItem` are also applicable for the PDF toolbar items.
## Style the Toolbar Items

Here is an example:
The `PDFViewerToolbar` is based on the `RadToolbar` control, so the toolbar items in the PDF Viewer use a `ToolbarItem`.

Each toolbar item has a `Style` property and the target type of the property is the corresponding `ToolbarItemView`:

| Toolbar Item | Style Target Type |
| ------------ | ------- |
| `PdfViewerFitToWidthToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerZoomInToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerZoomOutToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerSearchToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerToggleLayoutModeToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerNavigateToPreviousPageToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerNavigateToNextPageToolbarItem ` | `ButtonToolbarItemView` |
| `PdfViewerNavigateToPageToolbarItem ` | `ToolbarItemView` |
| `PdfViewerSearchNavigationToolbarItem ` | `NavigationButtonToolbarItemView` |

All styling properties available for the target type [`ButtonToolbarItemView`]({%slug toolbar-items-button%}) are also applicable for the PDF toolbar items that use this target type.

All properties applicable for [`NavigationButtonToolbarItemView`({%slug toolbar-items-navigation-button%}) can be used for stlying the `PdfViewerSearchNavigationToolbarItem`.

## Example for Styling the Toolbar

**1.** PDF Viewer and Toolbar definitions in XAML:

Expand Down
46 changes: 43 additions & 3 deletions controls/richtexteditor/styling/toolbar-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,51 @@ slug: richtexteditor-toolbar-styling

The [.NET MAUI RichTextEditor]({%slug richtexteditor-overview%}) provides a flexible styling API for its toolbar items.

The `RichTextEditorToolbar` is based on the `RadToolbar` control. All toolbar items in the RichTextEditor inherit from `ButtonToolbarItem`.
## Style the Toolbar Items

All styling properties available for the `ButtonToolbarItem` are applicable for the rich text editor toolbar items.
The `RichTextEditorToolbar` is based on the `RadToolbar` control, so the toolbar items in the RichTextEditor use a `ToolbarItem`.

Here is an example:
Each toolbar item has a `Style` property and the target type of the property is the corresponding `ToolbarItemView`:

| Toolbar Item | Style Target Type |
| ------------- | --------------- |
| `RichTextEditorFontFamilyToolbarItem` | `RichTextEditorListPickerToolbarItemView` |
| `RichTextEditorFontSizeToolbarItem` | `RichTextEditorListPickerToolbarItemView` |
| `SeparatorToolbarItem` | `ToolbarItem` |
| `RichTextEditorBoldToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorItalicToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorUnderlineToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorAlignLeftToolbarItem` | `RadioButtonToolbarItemView` |
| `RichTextEditorAlignCenterToolbarItem` | `RadioButtonToolbarItemView` |
| `RichTextEditorAlignRightToolbarItem` | `RadioButtonToolbarItemView` |
| `RichTextEditorAlignJustifyToolbarItem` | `RadioButtonToolbarItemView` |
| `RichTextEditorTextColorToolbarItem` | `RichTextEditorColorPickerToolbarItemView` |
| `RichTextEditorHighlightTextColorToolbarItem` | `RichTextEditorColorPickerToolbarItemView` |
| `RichTextEditorBulletingToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorNumberingToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorOutdentToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorIndentToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorTextFormattingToolbarItem` | `RichTextEditorListPickerToolbarItemView` |
| `RichTextEditorClearFormattingToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorStrikethroughToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorSuperscriptToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorSubscriptToolbarItem` | `ToggleButtonToolbarItemView` |
| `RichTextEditorUndoToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorRedoToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorColorPickerToolbarItem` | `RichTextEditorColorPickerToolbarItemView` |
| `RichTextEditorCopyToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorCutToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorPasteHtmlToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorAddOrEditHyperlinkToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorAddHyperlinkToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorRemoveHyperlinkToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorAddOrEditImageToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorHyperlinkNavigationToolbarItem` | `ButtonToolbarItemView` |
| `RichTextEditorImageNavigationToolbarItem` | `ButtonToolbarItemView` |

All styling properties available for the target type [`ButtonToolbarItemView`]({%slug toolbar-items-button%}), [`ToggleButtonToolbarItemView`]({%slug toolbar-items-toggle-button%}), [`RadioButtonToolbarItemView`]({%slug toolbar-items-radio-button%}) are also applicable for the RichTextEditor toolbar items that use this target type.

## Example for Styling the Toolbar

**1.** RichTextEditor and Toolbar definitions in XAML:

Expand Down
1 change: 1 addition & 0 deletions controls/richtexteditor/toolbar/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ The table below shows all toolbar items available for both Desktop and Mobile:
| `RichTextEditorColorPickerToolbarItem` | Allows picking a specific color from a collection of colors. |
| `RichTextEditorCopyToolbarItem` | Copies the selected HTML to the clipboard. |
| `RichTextEditorCutToolbarItem` | Cuts the selected HTML to the clipboard. |
| `RichTextEditorPasteHtmlToolbarItem` | Pastes HTML from the clipboard. |
| `RichTextEditorAddOrEditHyperlinkToolbarItem` | Opens a popup to add ot edit a hyperlink. |
| `RichTextEditorAddHyperlinkToolbarItem` | Adds a hyperlink. |
| `RichTextEditorRemoveHyperlinkToolbarItem` | Remove the hyperlink for the current selection. |
Expand Down