You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CS/CodeEditor/Docs/CodeEditor.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# CodeEditor
2
2
3
-
WPF control that embeds Monaco Editor (VS Code editor) using WebView2 for code editing with syntax highlighting.
3
+
WPF code editor control with syntax highlighting and other modern code display/navigation capabilities. This control embeds Monaco Editor (Visual Studio Code editor) using WebView2.
4
4
5
5
## Properties
6
6
7
7
| Name | Type | Description |
8
8
| ---- | ---- | ----------- |
9
-
|`Text`|`string`| Gets or sets editor text. This is a dependency property. Supports two-way binding. |
9
+
|`Text`|`string`| Gets or sets the editor text. This is a dependency property. Supports two-way binding. |
10
10
|`EditorLanguage`|`string`| Gets or sets the programming language for syntax highlighting. This is a dependency property. Default: `"csharp"`|
11
11
|`ReadOnly`|`bool`| Gets or sets whether the editor is read-only. This is a dependency property. Default: `false`|
12
12
|`IsModified`|`bool`| Gets whether the content has been modified since the last save. This is a readonly dependency property. |
@@ -39,7 +39,7 @@ WPF control that embeds Monaco Editor (VS Code editor) using WebView2 for code e
39
39
| Name | Description |
40
40
| ---- | ----------- |
41
41
|`GetAvailableLanguagesAsync(CancellationToken)`| Asynchronously retrieves a list of available programming language IDs. |
42
-
|`RegisterLanguage(LanguageDescriptor)`| Registers a custom programming language with Monarch tokenizer. |
42
+
|`RegisterLanguage(LanguageDescriptor)`| Registers a custom programming language with a Monarch tokenizer. |
43
43
|`RegisterTheme(MonacoTheme)`| Registers a custom Monaco Editor theme. |
44
44
|`MarkAsSaved()`| Resets the `IsModified` property to `false`. |
Copy file name to clipboardExpand all lines: CS/CodeEditor/Docs/CodeEditorService.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,4 +18,4 @@ public interface ICodeEditorService {
18
18
| ---- | ----------- |
19
19
|`MarkAsSaved()`| Resets the `IsModified` flag of the associated `CodeEditor` to `false`. |
20
20
|`GetLanguagesAsync(CancellationToken)`| Asynchronously retrieves a collection of available programming language IDs from the associated `CodeEditor`. |
21
-
|`RegisterLanguage(LanguageDescriptor)`| Registers a custom programming language with Monarch tokenizer in the associated `CodeEditor`. |
21
+
|`RegisterLanguage(LanguageDescriptor)`| Registers a custom programming language with a Monarch tokenizer in the associated `CodeEditor`. |
Copy file name to clipboardExpand all lines: CS/CodeEditor/Docs/Overview.md
+20-25Lines changed: 20 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,29 +1,25 @@
1
1
## Introduction
2
2
3
-
`CodeEditor`is a WPF control that embeds the [Monaco Editor](https://microsoft.github.io/monaco-editor/)(the editor engine used by Visual Studio Code) using [Microsoft WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/).
3
+
This DevExpress WPF example can display code using a specially-designed `CodeEditor`control. This control is a wrapper around the [Monaco Editor](https://microsoft.github.io/monaco-editor/) used by Visual Studio Code. This advanced editor supports numerous modern code editing capabilities such as syntax highlighting, region folding, minimap, theming, and custom language support. Since **Monaco Editor** is a web control, our WPF wrapper uses [Microsoft WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/) to display it.
4
4
5
-
The editor includes modern code editing capabilities — syntax highlighting, folding, minimap, theming, and custom languages — within WPF applications.
5
+
6
6
7
-
The primary editing surface is the `CodeEditor` control, which exposes a focused, WPF-friendly API.
7
+
8
8
9
-
The library also includes:
9
+
Our `CodeEditor` control implementation uses the following helper classes:
10
10
11
11
-`ThemeBehavior` - integrates Monaco with DevExpress themes.
12
12
-`CodeEditorService` - a lightweight service for cases where direct interaction with the control is not sufficient.
13
13
14
14
The control is designed as a **state-driven wrapper**: WPF owns the editor state through dependency properties, and Monaco reflects that state while propagating changes back to WPF in an MVVM-friendly way.
15
15
16
-
> **Supported Monaco version:** 0.55.1
17
-
> The control is built and validated against this specific release.
18
16
19
17
## Prerequisites
20
18
21
-
- Windows with [Microsoft Edge WebView2 Runtime](https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution)
- Monaco Editor v0.55.1 (the control is built and validated against this specific release)
21
+
- .NET version compatible with DevExpress WPF version you use: [WPF Controls → Prerequisites → .NET / .NET Core](https://docs.devexpress.com/WPF/8091/prerequisites#netnet-core)
22
+
- Windows with [Microsoft Edge WebView2 Runtime](https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution)
27
23
28
24
> The `CodeEditor` project must be compiled against the same DevExpress WPF version that is used in the consuming application.
29
25
@@ -95,21 +91,21 @@ The editor content is automatically synchronized with the bound property.
95
91
96
92
### Built-in Monaco Themes
97
93
98
-
You can use any of the standard Monaco themes:
94
+
You can use standard Monaco themes:
99
95
100
96
```csharp
101
97
editor.ThemeName="vs";
102
98
editor.ThemeName="vs-dark";
103
99
editor.ThemeName="hc-black";
104
100
```
105
101
106
-
These themes are provided by Monaco.
102
+
107
103
108
104
### DevExpress Theme Integration
109
105
110
-
By default, `CodeEditor` does not automatically track DevExpress theme changes.
106
+
111
107
112
-
To synchronize Monaco with the active DevExpress theme, attach `ThemeBehavior`:
108
+
To synchronize a Monaco Editor with the active DevExpress theme, attach a`ThemeBehavior`:
`ThemeBehavior` synchronizes DevExpress themes and Monaco Editor appearance in the following manner:
133
129
134
-
- Detects the current DevExpress theme
130
+
- Detects the current DevExpress theme at startup and each time the theme changes
135
131
- Resolves Light / Dark / High Contrast base
136
132
- Registers and applies a corresponding Monaco theme
137
133
- Optionally maps DevExpress palette colors to Monaco color keys via the `ApplyDevExpressColors` property
138
134
139
-
The theme is updated automatically when the DevExpress theme changes.
135
+
140
136
141
137
### Custom Themes
142
138
@@ -164,7 +160,7 @@ For a complete list of commonly used Monaco theme color keys, see the official V
164
160
165
161
In addition to UI colors, Monaco themes support token-level styling via `Rules`.
166
162
167
-
Rules define how specific token types (such as `keyword`, `comment`, `string`, and other) are rendered.
163
+
Rules define how the editor renders specific token types such as `keyword`, `comment`, `string`, and others.
168
164
169
165
You can use `Rules` to override the appearance of existing token types or to define styling for custom tokens introduced by a custom language definition.
The `Monarch` property defines the syntax highlighting rules.
248
+
The `Monarch` property defines syntax highlighting rules.
253
249
254
250
The property must contain a valid Monaco Monarch tokenizer definition specified as a JavaScript object literal.
255
251
@@ -261,11 +257,11 @@ All standard Monarch features are supported:
261
257
- Rule objects
262
258
- Includes and state transitions
263
259
264
-
Refer to the following topic for additional information: [Monarch Documentation](https://microsoft.github.io/monaco-editor/monarch.html)
260
+
Refer to the following help topic for additional information: [Monarch Documentation](https://microsoft.github.io/monaco-editor/monarch.html)
265
261
266
262
### Language Configuration
267
263
268
-
The optional `Configuration` property defines editor behavior such as:
264
+
The optional `Configuration` property defines editor behavior attributes such as:
269
265
270
266
- Line and block comments
271
267
- Brackets
@@ -274,8 +270,7 @@ The optional `Configuration` property defines editor behavior such as:
274
270
275
271
The configuration must also be provided as a JavaScript object literal.
276
272
277
-
For language configuration details (brackets, comments, auto-closing pairs, etc.),
278
-
refer to the following topic: [Language Configuration Guide](https://code.visualstudio.com/api/language-extensions/language-configuration-guide)
273
+
For additional information, refer to the following help topic: [Language Configuration Guide](https://code.visualstudio.com/api/language-extensions/language-configuration-guide)
0 commit comments