|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: About .NET MAUI Rich Text Editor control | Syncfusion® |
| 4 | +description: Learn here all about how to enable cupertino theme for Syncfusion® .NET MAUI Rich Text Editor (SfRichTextEditor) control, its elements and more. |
| 5 | +platform: maui |
| 6 | +control: SfRichTextEditor |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Cupertino Theme in .NET MAUI RichTextEditor |
| 11 | + |
| 12 | +The Cupertino theme is a modern design style that provides a sleek, minimalist appearance with clean lines, subtle visual effects, and elegant styling. It features smooth rounded corners, refined color palettes, and sophisticated visual treatments that create a polished, professional look for your RichTextEditor. |
| 13 | + |
| 14 | +N> The Cupertino liquid glass effect is only available on macOS and iOS platforms with iOS version 26 or higher. |
| 15 | + |
| 16 | +## How it Enhances RichTextEditor UI on macOS and iOS |
| 17 | + |
| 18 | +The Cupertino theme enhances the RichTextEditor with liquid glass effects on toolbar and editor elements, creating a modern and visually appealing text editing interface that delivers a sophisticated user experience. |
| 19 | + |
| 20 | +## Enable Cupertino Theme |
| 21 | + |
| 22 | +To enable the Cupertino theme's liquid glass effect, set the [EnableLiquidGlassEffect]() property to `True` on the SfRichTextEditor. For optimal visual appearance with a sleek and glassy output, set transparent backgrounds for both the editor and toolbar using the [EditorBackgroundColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.SfRichTextEditor.html#Syncfusion_Maui_RichTextEditor_SfRichTextEditor_EditorBackgroundColor) property of SfRichTextEditor and the [BackgroundColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Maui_RichTextEditor_RichTextEditorToolbarSettings_BackgroundColor) property of ToolbarSettings. |
| 23 | + |
| 24 | +{% tabs %} |
| 25 | + |
| 26 | +{% highlight xaml %} |
| 27 | + |
| 28 | +<editor:SfRichTextEditor EnableLiquidGlassEffect="True" |
| 29 | + EditorBackgroundColor="Transparent"> |
| 30 | + <editor:SfRichTextEditor.ToolbarSettings> |
| 31 | + <editor:RichTextEditorToolbarSettings BackgroundColor="Transparent" /> |
| 32 | + </editor:SfRichTextEditor.ToolbarSettings> |
| 33 | +</editor:SfRichTextEditor> |
| 34 | + |
| 35 | +{% endhighlight %} |
| 36 | + |
| 37 | +{% highlight c# %} |
| 38 | + |
| 39 | +SfRichTextEditor richTextEditor = new SfRichTextEditor() |
| 40 | +{ |
| 41 | + EnableLiquidGlassEffect = true, |
| 42 | + EditorBackgroundColor = Colors.Transparent |
| 43 | +}; |
| 44 | + |
| 45 | +richTextEditor.ToolbarSettings = new RichTextEditorToolbarSettings() |
| 46 | +{ |
| 47 | + BackgroundColor = Colors.Transparent |
| 48 | +}; |
| 49 | + |
| 50 | +{% endhighlight %} |
| 51 | + |
| 52 | +{% endtabs %} |
| 53 | + |
| 54 | +### Toolbar |
| 55 | + |
| 56 | +The liquid glass effect is applied to the overall toolbar and its elements, including font family picker, font size picker, text alignment options, text style pickers, insert link popup, table selection, table context menu popup, and the inline toolbar for links. |
| 57 | + |
| 58 | +#### Customize Toolbar Corner Radius |
| 59 | + |
| 60 | +The toolbar corner radius and toolbar selection corner radius can be customized using Syncfusion theme keys: |
| 61 | + |
| 62 | +{% tabs %} |
| 63 | + |
| 64 | +{% highlight xaml %} |
| 65 | + |
| 66 | +<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui" |
| 67 | + xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" |
| 68 | + xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> |
| 69 | + <Application.Resources> |
| 70 | + <ResourceDictionary> |
| 71 | + <ResourceDictionary.MergedDictionaries> |
| 72 | + <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="CupertinoLight"/> |
| 73 | + <ResourceDictionary> |
| 74 | + <sys:Double x:Key="SfRichTextEditorToolbarCornerRadius">25</sys:Double> |
| 75 | + <sys:Double x:Key="SfRichTextEditorToolbarSelectionCornerRadius">25</sys:Double> |
| 76 | + </ResourceDictionary> |
| 77 | + </ResourceDictionary.MergedDictionaries> |
| 78 | + </ResourceDictionary> |
| 79 | + </Application.Resources> |
| 80 | +</Application> |
| 81 | + |
| 82 | +{% endhighlight %} |
| 83 | + |
| 84 | +{% endtabs %} |
| 85 | + |
| 86 | +### Editor |
| 87 | + |
| 88 | +The liquid glass effect enhances the text editing area, providing a modern and sophisticated appearance for content creation. |
| 89 | + |
| 90 | +#### Customize Editor Corner Radius |
| 91 | + |
| 92 | +The editor corner radius can be customized using the Syncfusion theme key: |
| 93 | + |
| 94 | +{% tabs %} |
| 95 | + |
| 96 | +{% highlight xaml %} |
| 97 | + |
| 98 | +<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui" |
| 99 | + xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" |
| 100 | + xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"> |
| 101 | + <Application.Resources> |
| 102 | + <ResourceDictionary> |
| 103 | + <ResourceDictionary.MergedDictionaries> |
| 104 | + <syncTheme:SyncfusionThemeResourceDictionary VisualTheme="CupertinoLight"/> |
| 105 | + <ResourceDictionary> |
| 106 | + <sys:Double x:Key="SfRichTextEditorCornerRadius">15</sys:Double> |
| 107 | + </ResourceDictionary> |
| 108 | + </ResourceDictionary.MergedDictionaries> |
| 109 | + </ResourceDictionary> |
| 110 | + </Application.Resources> |
| 111 | +</Application> |
| 112 | + |
| 113 | +{% endhighlight %} |
| 114 | + |
| 115 | +{% endtabs %} |
| 116 | + |
| 117 | +N> `SfRichTextEditorCornerRadius` theme key works with the liquid glass effect on iOS and macOS only. |
| 118 | + |
| 119 | +N> To override the default appearance of the toolbar and the editor’s corner radius, you need to initialize the Syncfusion theme dictionary resources in the application’s resource dictionary. For more details, refer to the [documentation](https://help.syncfusion.com/maui/themes/themes). |
| 120 | + |
| 121 | + |
0 commit comments