RichTextBox Codeblock MVVM

[Amiel]

Hello,

I'm using: Telerik 2019.1.116.45

1. I'm looking to display code in a read only view.  I have found the RichTextBox API for insert code block and I like the formatting and key word coloring for the CSharp setting.  I am wondering how can I interact with the Codeblock through MVVM, instead of calling the insert code api.  

 

2.  I have found that it takes a bit of time to load when the code is perhaps around 60-70 lines.  Any way/settings I can set to increase the speed?

[Tanya]

Hi Amiel,

I will get straight to the questions.

1. I am wondering how can I interact with the Codeblock through MVVM, instead of calling the insert code api.  

There is a command exposed by the API that invokes the CodeFormatting dialog so that the user can insert the desired content. You can bind a button to that command using XAML similar to the following one:

<telerik:RadRibbonButton telerik:ScreenTip.Description="Insert block containing formatted programming source code." LargeImage="{telerik:IconResource IconRelativePath=32/CodeBlock.png,IconSources={StaticResource IconSources}}" telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ShowCodeFormattingDialogCommand}" Size="Large" Text="Code" telerik:ScreenTip.Title="Insert Code Block"/>

Directly inserting the code using MVVM would require the implementation of a custom command that can do that using the InsertCodeBlock() method.

2. Any way/settings I can set to increase the speed?

RadRichTextBox is designed as a rich-text editor that has pretty complex mechanisms for resolving the styling of content. The code blocks are implemented using complex styles which inevitably affects the performance and I am afraid there isn't much I can suggest for improving it in this case. Something I would like to mention is that since R3 2019, we have released a SyntaxEditor control that is intended to enable the users to show and modify code using different languages and might be suitable for your scenario.

Hope this information is helpful.

 

Regards,
Tanya
Progress Telerik

[Amiel]

Hello,

I don't quite understand number 1.  If I have a RadRichTextBox do I need a reference to Telerik in my view model?  What is ShowCodeFormattingDialogCommand?  Do can you provide a simple example demonstrating mvvm for setting the code content?

Thanks!

[Tanya]

Hi Amiel,

Please, excuse me if I wasn't clear enough.

The ShowCodeFormattingDialogCommand is a command exposed by RadRichTextBox that opens the dialog responsible for code formatting. I have prepared a sample project to show how you can bind the command from your view model. Please, find the sample attached to this reply.

If you would like to directly modify the code content inside RadRichTextBox, you will need to implement a custom command that you can bind to a button from the UI. We currently don't have an example which I could share but here are the steps you will need to perform to achieve that:

1. Create a new command by implementing the ICommand interface.
2. In the execution of the command, you can use the InsertCodeBlock() exposed by RadRichTextBox to insert code into the document
3. Bind the command in a way similar to the one demonstrated in the attached project

Hope this helps.

Regards,
Tanya
Progress Telerik