Skip to content

Commit 5d7d6ec

Browse files
Manivannan-EManivannan-E
authored
Update README.md
1 parent 7cb9090 commit 5d7d6ec

File tree

1 file changed

+98
-8
lines changed

1 file changed

+98
-8
lines changed

‎README.md‎

Lines changed: 98 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,103 @@
1-
# How to Configure Custom Language Using WPF Syntax Editor?
2-
This repository demonstrates how to configure and apply a custom language definition—specifically IronPython—in the WPF [Syntax Editor](https://help.syncfusion.com/wpf/syntax-editor/getting-started) control provided by Syncfusion. The WPF Syntax Editor is a powerful text editor control that supports syntax highlighting, code editing, and parsing for various programming languages. It is highly customizable and supports defining your own language grammars using XML-based configuration files.
1+
# How to Configure a Custom Language in WPF Syntax Editor
2+
This example demonstrates how to configure and apply a custom language definition (Python) in the Syncfusion WPF Syntax Editor control. The Syntax Editor supports syntax highlighting, code editing, and parsing for various languages. You can define your own language grammar using LexemCollection and FormatsCollection for custom syntax rules.
33

4-
In this sample, we show how to:
4+
## Why This Is Useful
5+
- **Custom Language Support**: Add domain-specific or scripting languages.
6+
- **Syntax Highlighting**: Highlight keywords, comments, operators, and literals.
7+
- **MVVM Integration**: Apply language configuration dynamically at runtime.
58

6-
- Create a custom language definition file for IronPython.
7-
- Load and apply the custom language to the Syntax Editor at runtime.
8-
- Highlight keywords, comments, strings, and other syntax elements specific to IronPython.
9-
- Integrate the Syntax Editor into a WPF application with minimal setup.
9+
## Key Steps
10+
- Define _FormatsCollection_ for syntax highlighting styles.
11+
- Define _LexemCollection_ for language tokens and rules.
12+
- Apply the custom language to the EditControl using the _CustomLanguage_ property.
1013

11-
This approach is ideal for developers building code editors, IDEs, or any application that requires syntax-aware text editing. By using custom language configurations, you can tailor the editor to support domain-specific languages or scripting environments.
14+
## Code Example
15+
**XAML**
16+
```XAML
17+
<Window.DataContext>
18+
<local:CustomLanguageViewModel />
19+
</Window.DataContext>
1220

21+
<Window.Resources>
22+
<!-- Define syntax highlighting formats -->
23+
<syncfusion:FormatsCollection x:Key="pythonLanguageFormats">
24+
<syncfusion:EditFormats Foreground="Green" FormatName="CommentFormat" />
25+
<syncfusion:EditFormats Foreground="Black" FormatName="MultilineCommentFormat" />
26+
<syncfusion:EditFormats Foreground="Blue" FormatName="KeywordFormat" />
27+
<syncfusion:EditFormats Foreground="Navy" FormatName="OperatorFormat" />
28+
<syncfusion:EditFormats Foreground="Gray" FormatName="LiteralsFormat" />
29+
</syncfusion:FormatsCollection>
30+
31+
<!-- Define language tokens -->
32+
<syncfusion:LexemCollection x:Key="pythonLanguageLexems">
33+
<syncfusion:Lexem ContainsEndText="True"
34+
EndText="\r\n"
35+
IntellisenseDisplayText="class"
36+
IsMultiline="True"
37+
IsRegex="True"
38+
LexemType="CodeSnippet"
39+
ScopeLevel="Class"
40+
StartText="class \w+[\s:\w,()]+" />
41+
<syncfusion:Lexem ContainsEndText="False"
42+
FormatName="OperatorFormat"
43+
IsMultiline="False"
44+
LexemType="Operator"
45+
StartText="**;=" />
46+
</syncfusion:LexemCollection>
47+
</Window.Resources>
48+
49+
<!-- Syntax Editor -->
50+
<syncfusion:EditControl Name="editControl"
51+
DocumentLanguage="{Binding Language}"
52+
DocumentSource="{Binding DocumentSource}"
53+
FontFamily="{Binding SelectedFont}"
54+
FontSize="14">
55+
<interactivity:Interaction.Triggers>
56+
<interactivity:EventTrigger EventName="Loaded">
57+
<interactivity:InvokeCommandAction Command="{Binding EditLoadedCommand}"
58+
CommandParameter="{Binding ElementName=editControl}" />
59+
</interactivity:EventTrigger>
60+
</interactivity:Interaction.Triggers>
61+
</syncfusion:EditControl>
62+
```
63+
**ViewModel (C#)**
64+
```C#
65+
public class CustomLanguageViewModel : NotificationObject
66+
{
67+
public ICommand EditLoadedCommand { get; }
68+
public string DocumentSource { get; set; }
69+
public Languages Language { get; set; }
70+
public FontFamily SelectedFont { get; set; }
71+
72+
public CustomLanguageViewModel()
73+
{
74+
DocumentSource = @"Data\syntaxeditor\PythonSource.py";
75+
SelectedFont = new FontFamily("Verdana");
76+
Language = Languages.Custom;
77+
EditLoadedCommand = new DelegateCommand<object>(ExecuteEditLoaded);
78+
}
79+
80+
private void ExecuteEditLoaded(object obj)
81+
{
82+
var editControl = obj as EditControl;
83+
var customLanguage = new PythonLanguage(editControl)
84+
{
85+
Lexem = (LexemCollection)Application.Current.Resources["pythonLanguageLexems"],
86+
Formats = (FormatsCollection)Application.Current.Resources["pythonLanguageFormats"]
87+
};
88+
editControl.CustomLanguage = customLanguage;
89+
}
90+
}
91+
```
92+
93+
## Notes
94+
- Requires Syncfusion WPF Syntax Editor NuGet package.
95+
- You can extend this approach for other languages or domain-specific syntax.
96+
- Use LexemCollection for token definitions and FormatsCollection for styling.
97+
98+
## Output
1399
![Syntax Editor with custom language](Images/output.png)
100+
101+
## Reference
102+
For more details refer the Syncfusion WPF Syntax Editor Documentation for [custom language](https://help.syncfusion.com/wpf/syntax-editor/language-support/custom-language-support) support.
103+

0 commit comments

Comments
 (0)