Implementing Split Views

Many editors offer split-views of a document, allowing you to keep a part of the document visible while you work on another part.

You can achieve this easily by connecting two or more C1RichTextBox controls to the same underlying C1Document. Each control acts as an independent view, allowing you to scroll, select, and edit the document as usual. Changes made to one view are reflected on all other views.

To show how this works, let's extend the previous example by adding a few lines of code to the page constructor:

Public Sub New()

' Default initialization

InitializeComponent()

' Create the C1RichTextBox and add it to the page

_rtb = New C1RichTextBox()

LayoutRoot.Children.Add(_rtb)

' Create document and show it in the C1RichTextBox

_rtb.Document = DocumentAssembly(GetType(C1RichTextBox).Assembly)

_rtb.IsReadOnly = True

' Attach event handler

AddHandler _rtb.ElementMouseLeftButtonDown, AddressOf _rtb_ElementMouseLeftButtonDown

' Add a second C1RichTextBox to the page

LayoutRoot.RowDefinitions.Add(New RowDefinition())

Dim rtb2 = New C1RichTextBox()

rtb2.SetValue(Grid.RowProperty, 1)

LayoutRoot.Children.Add(rtb2)

' Bind the second C1RichTextBox to the same document

rtb2.Document = _rtb.Document

End Sub

public MainPage()

// Default initialization

  InitializeComponent();

// Create the C1RichTextBox and add it to the page

  _rtb = new C1RichTextBox();

  LayoutRoot.Children.Add(_rtb);

// Create document and show it in the C1RichTextBox

  _rtb.Document = DocumentAssembly(typeof(C1RichTextBox).Assembly);

  _rtb.IsReadOnly = true;

// Attach event handler

  _rtb.ElementMouseLeftButtonDown += _rtb_ElementMouseLeftButtonDown;

// Add a second C1RichTextBox to the page

  LayoutRoot.RowDefinitions.Add(new RowDefinition());

  LayoutRoot.RowDefinitions.Add(new RowDefinition());

  var rtb2 = new C1RichTextBox();

  rtb2.SetValue(Grid.RowProperty, 1);

  LayoutRoot.Children.Add(rtb2);

// Bind the second C1RichTextBox to the same document

  rtb2.Document = _rtb.Document;

The new code adds a new C1RichTextBox to the page and then sets its Document property to the document being shown by the original C1RichTextBox.

The bottom control is editable (we did not set its IsReadOnly property to False). If you type into it, you will see the changes on both controls simultaneously.

The mechanism is general; we could easily attach more views of the same document. Moreover, any changes you make to the underlying document are immediately reflected on all views.