diff --git a/controls/imageeditor/toolbar/styling.md b/controls/imageeditor/toolbar/styling.md index 6c5ac2f68..2b6025dcc 100644 --- a/controls/imageeditor/toolbar/styling.md +++ b/controls/imageeditor/toolbar/styling.md @@ -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` | diff --git a/controls/pdfviewer/toolbar/styling.md b/controls/pdfviewer/toolbar/styling.md index 4dff1f5d2..7b2324038 100644 --- a/controls/pdfviewer/toolbar/styling.md +++ b/controls/pdfviewer/toolbar/styling.md @@ -10,9 +10,29 @@ slug: pdfviewer-toolbar-styling The .NET MAUI PDF Viewer 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: diff --git a/controls/richtexteditor/styling/toolbar-styling.md b/controls/richtexteditor/styling/toolbar-styling.md index acc430469..e0208ce6c 100644 --- a/controls/richtexteditor/styling/toolbar-styling.md +++ b/controls/richtexteditor/styling/toolbar-styling.md @@ -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: diff --git a/controls/richtexteditor/toolbar/overview.md b/controls/richtexteditor/toolbar/overview.md index dfacb9c79..6e5390a30 100644 --- a/controls/richtexteditor/toolbar/overview.md +++ b/controls/richtexteditor/toolbar/overview.md @@ -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. |