Skip to content

Commit c181dfe

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #3607 from syncfusion-content/mdViewer-ugChanges
968298 - Added the Contents How to Customize the Images, Tables and Scrollbar of MAUI SfMarkdownViewer
2 parents bb6a2a9 + 6784951 commit c181dfe

File tree

6 files changed

+157
-62
lines changed

6 files changed

+157
-62
lines changed

‎MAUI/MarkdownViewer/GettingStarted.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,4 +282,4 @@ N> For more details about binding Markdown content from various sources, refer t
282282

283283
![Output of Markdown Viewer](Images/maui-markdown-viewer-gettingstarted.png)
284284

285-
You can access a complete getting started sample [here]().
285+
You can access a complete getting started sample [here](https://github.com/SyncfusionExamples/.NET_MAUI_Markdown_Viewer_GettingStarted).

‎MAUI/MarkdownViewer/Images/maui-markdownviewer-image-styling.png‎

45.8 KB
Loading

‎MAUI/MarkdownViewer/Images/maui-markdownviewer-scrollbar.gif‎

473 KB
Loading

‎MAUI/MarkdownViewer/Images/maui-markdownviewer-table-styling.png‎

42 KB
Loading

‎MAUI/MarkdownViewer/OverridingDefaultStyles.md‎

Lines changed: 155 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,187 @@
11
---
22
layout: post
3-
title: Override Default Styles in .NET MAUI MarkdownViewer | Syncfusion
3+
title: Apply CSS Style Rules in .NET MAUI MarkdownViewer | Syncfusion
44
description: Learn how to override the default appearance of Markdown content using custom CSS in the Syncfusion .NET MAUI MarkdownViewer control.
55
platform: MAUI
66
control: SfMarkdownViewer
77
documentation: ug
88
---
99

10-
# How to Override Default Styles in .NET MAUI SfMarkdownViewer
10+
# How to Apply CSS Style Rules in .NET MAUI SfMarkdownViewer
1111

12-
The [SfMarkdownViewer]() control in .NET MAUI comes with a set of built-in default styles that ensure Markdown content is rendered cleanly and consistently across platforms. However, in many real-world applications, developers may need to override these defaults to match their app’s branding, improve readability, or create a custom visual experience.
12+
The `SfMarkdownViewer` control in .NET MAUI comes with a set of built-in default styles that ensure Markdown content is rendered cleanly and consistently across platforms. However, in many real-world applications, developers may need to override these defaults to match their app’s branding, improve readability, or create a custom visual experience.
1313

14-
This guide explains how to override the default styles using the [MarkdownStyleSettings]() class and the [CssStyleRules]() property.
14+
This guide explains how to override the default styles using the `MarkdownStyleSettings` class and the `CssStyleRules` property.
1515

16-
### Defining Styles
16+
## Defining Styles
1717

1818
**XAML**
1919

2020
{% highlight xaml %}
2121

22-
<ContentPage.Resources>
23-
<ResourceDictionary>
24-
<x:String x:Key="CustomStyle">
25-
body {
26-
background: #F5F7FA;
27-
font-family: 'Segoe UI', sans-serif;
28-
font-size: 16px;
29-
color: #2E2E2E;
30-
line-height: 1.7;
31-
}
32-
33-
h1 {
34-
font-weight: 700;
35-
font-size: 30px;
36-
line-height: 38px;
37-
letter-spacing: 0.5px;
38-
color: #1E3A8A;
39-
margin-bottom: 16px;
40-
}
41-
42-
h2 {
43-
font-weight: 600;
44-
font-size: 24px;
45-
line-height: 32px;
46-
letter-spacing: 0.4px;
47-
color: #3B5BAA;
48-
margin-top: 24px;
49-
margin-bottom: 12px;
50-
}
51-
52-
h3 {
53-
font-weight: 500;
54-
font-size: 20px;
55-
line-height: 28px;
56-
letter-spacing: 0.3px;
57-
color: #6C83C1;
58-
margin-top: 20px;
59-
margin-bottom: 10px;
60-
}
61-
</x:String>
62-
</ResourceDictionary>
63-
</ContentPage.Resources>
22+
<ContentPage.Resources>
23+
<ResourceDictionary>
24+
<x:String x:Key="CustomStyle">
25+
body {
26+
background: #F5F7FA;
27+
font-family: 'Segoe UI', sans-serif;
28+
font-size: 16px;
29+
color: #2E2E2E;
30+
line-height: 1.7;
31+
}
32+
33+
h1 {
34+
font-weight: 700;
35+
font-size: 30px;
36+
line-height: 38px;
37+
letter-spacing: 0.5px;
38+
color: #1E3A8A;
39+
margin-bottom: 16px;
40+
}
41+
42+
h2 {
43+
font-weight: 600;
44+
font-size: 24px;
45+
line-height: 32px;
46+
letter-spacing: 0.4px;
47+
color: #3B5BAA;
48+
margin-top: 24px;
49+
margin-bottom: 12px;
50+
}
51+
52+
h3 {
53+
font-weight: 500;
54+
font-size: 20px;
55+
line-height: 28px;
56+
letter-spacing: 0.3px;
57+
color: #6C83C1;
58+
margin-top: 20px;
59+
margin-bottom: 10px;
60+
}
61+
</x:String>
62+
</ResourceDictionary>
63+
</ContentPage.Resources>
6464

6565
{% endhighlight %}
6666

6767
Apply the defined CSS style to the Markdown Viewer using the `CssStyleRules` property, as shown in the XAML code below:
6868

6969
{% highlight xaml %}
7070

71-
<ContentPage
72-
. . .
73-
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
74-
assembly=Syncfusion.Maui.MarkdownViewer">
75-
. . .
76-
<markdown:SfMarkdownViewer Source={Binding MarkdownContent}>
77-
<markdown:SfMarkdownViewer.Settings>
78-
<markdown:MarkdownStyleSettings CssStyleRules="{StaticResource CustomStyle}" />
79-
</markdown:SfMarkdownViewer.Settings>
80-
</markdown:SfMarkdownViewer>
71+
<ContentPage
72+
. . .
73+
xmlns:markdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;
74+
assembly=Syncfusion.Maui.MarkdownViewer">
75+
. . .
76+
<markdown:SfMarkdownViewer Source={Binding MarkdownContent}>
77+
<markdown:SfMarkdownViewer.Settings>
78+
<markdown:MarkdownStyleSettings CssStyleRules="{StaticResource CustomStyle}" />
79+
</markdown:SfMarkdownViewer.Settings>
80+
</markdown:SfMarkdownViewer>
8181

82-
</ContentPage>
82+
</ContentPage>
8383

8484
{% endhighlight %}
8585

8686
The output below reflects the styled appearance of the Markdown content.
8787

88-
![Overriding default styles output image](Images/maui-markdown-viewer-overriding-styles.png).
88+
![Applying CSS Style Rules](Images/maui-markdown-viewer-overriding-styles.png)
8989

9090
By defining custom styles, you can transform the Markdown Viewer into a fully branded and polished content surface that fits seamlessly into your app’s design system.
9191

92-
N> Apply CSS styles only when necessary as they will override the properties of individual Markdown elements such as `H1FontSize`, `H1Color`, `BodyTextColor`, `TableHeaderFontSize`, etc., defined in the [MarkdownStyleSettings]() class.
92+
N> Apply CSS styles only when necessary as they will override the properties of individual Markdown elements such as `H1FontSize`, `H1Color`, `BodyTextColor`, `TableHeaderFontSize`, etc., defined in the `MarkdownStyleSettings` class.
93+
94+
## Define Styles for Images
95+
96+
Images are a vital part of Markdown content, providing visual context and detail. SfMarkdownViewer allows you to override the appearance of images through CSS, enabling custom sizing, borders, or even special effects. For example:
97+
98+
{% highlight xaml %}
99+
100+
<x:String x:Key="CustomStyle">
101+
img {
102+
border-radius: 12px;
103+
border: 8px solid #e0e3ea;
104+
max-width: 95%;
105+
box-shadow: 0 4px 16px rgba(31,45,61,0.75);
106+
margin: 16px 16px;
107+
}
108+
</x:String>
109+
110+
{% endhighlight %}
111+
112+
This CSS makes all images inside the Markdown content appear with rounded corners, a subtle border, and a shadow that helps them blend elegantly with modern app designs. Adjust the `margin` or `max-width` to fit the layout of your application.
113+
114+
![Image Customization with CSS Styling](Images/maui-markdownviewer-image-styling.png)
115+
116+
## Define Styles for Tables
117+
118+
Tables are commonly used to present data and comparisons. While basic table styling (such as header font size, text color, and table background) can be easily set using properties of the `MarkdownStyleSettings` class, see the detailed explanation in the [Customize Appearance](https://help.syncfusion.com/maui/markdownviewer/appearance) documentation. You can take your table designs further by using custom CSS through the `CssStyleRules` property.
119+
120+
This enables effects such as striped rows, rounded corners, advanced padding, and borders for maximum brand consistency. For example:
121+
122+
{% highlight xaml %}
123+
124+
<x:String x:Key="CustomStyle">
125+
table {
126+
background: #FAFBFC;
127+
border-collapse: collapse;
128+
margin: 16px 0;
129+
width: 100%;
130+
border-radius: 6px;
131+
overflow: hidden;
132+
}
133+
th, td {
134+
border: 1px solid #E0E4EA;
135+
padding: 10px 16px;
136+
text-align: left;
137+
}
138+
th {
139+
background: #EDF2FB;
140+
color: #193466;
141+
font-size: 17px;
142+
font-weight: 600;
143+
}
144+
tr:nth-child(even) {
145+
background: #F5F7FB;
146+
}
147+
</x:String>
148+
149+
{% endhighlight %}
150+
151+
CSS styles provide much finer control over table appearance than the standard style properties. For thorough details on property based styling including `TableHeaderFontSize`, `TableHeaderTextColor`, and more, please refer to the [Customize Appearance](https://help.syncfusion.com/maui/markdownviewer/appearance) documentation page. When both CSS and style properties are specified, CSS will take precedence.
152+
153+
![Table Customization with CSS Styling](Images/maui-markdownviewer-table-styling.png)
154+
155+
## Define Styles for ScrollBar
156+
157+
Scrollbars are crucial for navigating through long Markdown documents, especially on desktop platforms or when embedding the control in a constrained space. SfMarkdownViewer enables you to customize scrollbar appearance and behavior via CSS:
158+
159+
- **Scrollbar Visibility:** You can show or hide the scrollbar by targeting the `::-webkit-scrollbar` selector (on applicable platforms).
160+
- **Scrollbar Color:** Make the scrollbar match your branding or fade it as needed.
161+
162+
Example CSS for a modern, visible scrollbar:
163+
164+
{% highlight xaml %}
165+
166+
<x:String x:Key="CustomStyle">
167+
::-webkit-scrollbar {
168+
width: 10px;
169+
background: #eeeeee;
170+
}
171+
::-webkit-scrollbar-thumb {
172+
background: #3B82F6;
173+
border-radius: 8px;
174+
border: 2px solid #1E293B;
175+
}
176+
::-webkit-scrollbar-thumb:hover {
177+
background: #2563EB;
178+
}
179+
</x:String>
180+
181+
{% endhighlight %}
182+
183+
![Scrollbar Customization with CSS Styling](Images/maui-markdownviewer-scrollbar.gif)
184+
185+
You can further hide the scrollbar by setting `display: none;` in the `::-webkit-scrollbar` selector or by setting its width to 0, or match its color and thickness to seamlessly blend with your application's UI. Custom scrollbar styling will be effective on supported platforms (typically Windows and Android). Always verify cross-platform appearance for best results.
186+
187+
With tailored scrollbar, table, and image styles, the SfMarkdownViewer control delivers beautiful, readable, and fully brand-aligned Markdown content in your .NET MAUI applications.

‎maui-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -885,7 +885,7 @@
885885
<li>
886886
How to
887887
<ul>
888-
<li><a href="/maui/MarkdownViewer/OverridingDefaultStyles">Override default styles using custom CSS</a></li>
888+
<li><a href="/maui/MarkdownViewer/OverridingDefaultStyles">Apply CSS Style Rules</a></li>
889889
</ul>
890890
</li>
891891
</ul>

0 commit comments

Comments
 (0)