MVVM example of using the SyntaxEditor

[Chris]

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

[Vladimir Stoyanov]

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

[Chris]

Thanks Vladimir, we'll try this approach.

[Addam]

Hi Vladimir,

I was able to get this working like in your example, thanks.
I'm curious though, as to why the Document and Taggers properties would not be dependency properties out of the box when Data Binding is one of the main features of WPF? Are there any plans to update this control to include those as dependency properties so developers can avoid having to write extra code to support MVVM?

[Martin Ivanov]

Hey Addam,

The Document and Taggers properties were not introduced as DependencyProperty because of the nature of the values they hold. Both are part of the document and visualization model of the RadSyntaxEditor control and are better to stay in the control, instead of giving direct access to the view model to them. Additional to this, holding that type of information in the view model will couple it with the UI, which is not a good idea when it comes to MVVM.

Maybe an idea worth exploring is to have data providers similar to the ones in RadRichTextBox, that will allow you to hold the string information in the view model.

[Kemal]

Hey Vladimir, 

can you also provide an example project on multiple taggers in this mvvm style ?
If possible with the BreakpointsMargin class.

[Addam]

Thanks for the response, Martin, that makes perfect sense.