MVVM example of using the SyntaxEditor

1 Answer 27 Views
SyntaxEditor
Chris
Top achievements
Rank 1
Chris asked on 17 Jun 2021, 08:41 AM

Hope somebody can help out here.

We have recently started using the RadSyntaxEditor in an application that uses the Prism framework. There have been some posts about the SyntaxEditor not showing in the UI unless you put it in a ContentControl. We did this and bound the Content to the SyntaxEditor instance in the VM.

This worked fine and we can add a custom tagger but none of the event subscriptions to the Document.TextContentChanged event seem to work.

If we then template the SyntaxEditor in the XAML and bind to an instance of the TextDocument like this, how do you set up a custom tagger?

<ControlTemplate x:Key="SyntaxEditorControlTemplate" TargetType="{x:Type ContentControl}">
            <telerik:RadSyntaxEditor AutoScrollToCaretOnTextChange="True"
                                      CaretDisplayMode="Block"
                                      Document="{Binding SyntaxTextDocument}">

            </telerik:RadSyntaxEditor>
</ControlTemplate>

Can anybody point us to an example of using the SyntaxEditor with MVVM please.

Thanks

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 21 Jun 2021, 10:43 AM

Hello Chris, 

Please, allow me to start by saying that the Document property of the RadSyntaxEditor is not a DependencyProperty and you will need to create custom logic to bind it in an MVVM scenario. An approach that you can try is to use an Attached Property. The following code snippets demonstrate this approach:

public class SyntaxEditorAttachedProperties
{
    public static TextDocument GetTextDocument(DependencyObject obj)
    {
        return (TextDocument)obj.GetValue(TextDocumentProperty);
    }

    public static void SetTextDocument(DependencyObject obj, TextDocument value)
    {
        obj.SetValue(TextDocumentProperty, value);
    }

    // Using a DependencyProperty as the backing store for TextDocument.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextDocumentProperty =
        DependencyProperty.RegisterAttached("TextDocument", typeof(TextDocument), typeof(SyntaxEditorAttachedProperties), new PropertyMetadata(OnDocumentChanged));

    private static void OnDocumentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var syntaxEditor = d as RadSyntaxEditor;
        var newDocument = e.NewValue as TextDocument;
        syntaxEditor.Document = newDocument;
    }
}
<telerik:RadSyntaxEditor x:Name="syntaxEditor" local:SyntaxEditorAttachedProperties.TextDocument="{Binding MyDocumentProperty}"/>

You can also use a similar approach in order to add taggers to the control. 

I hope you find this information helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Chris
Top achievements
Rank 1
commented on 22 Jun 2021, 07:19 AM

Thanks Vladimir, we'll try this approach.
Tags
SyntaxEditor
Asked by
Chris
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Share this question
or