Code editor control with syntax highlighting for Silverlight available

by Vlad 1. November 2010 14:12

This is an update to my Syntax Highlighting TextBox in Silverlight using MVVM post.

First of all, i'd like to thank Jeff Willcox for his port to Silverlight of Drew Miller's syntax highlighting engine called ColorCode and Morten Nielsen for putting it together with my overlaying TextBox idea.

Morten's SyntaxHighlightingTextBox control is just for demo (he mentions that a polished version will be included in their SDK), and the performance goes down when the text is bigger than just a few lines of code.

I rewrote the control in order to improve the performance - the goal was to get instant update when typing.

Changes:

Used a RichTextBox in the background instead of a TextBox. They both use Inlines for the content so the change is trivial, but from my observations the RichTextBox is faster, especially for scrolling.

Fixed a couple of bugs in the Colorizer.

Problem:

Syntax highlighting is done on the UI thread at every key press; refreshing the syntax caused the whole content do be cleared and rebuilt.

Solution:

Use in memory entities for formatting instead of updating the Inlines collection directly. This decouples the syntax highlighting code from the UI and also enables background processing. Also, it enables partial updating - basically updating only the Inlines that changed instead of clearing and reloading all the content for the RichTextBox. Even more, it is possible to update only the style (color) for existing Inlines if the text is the same.

Problem:

With the syntax highlighting in the background, the UI continues responsive, but typing takes place in the invisible overlaying TextBox and it is not visible until the syntax highlighting updates the background RichTextBox, and it is confusing for the user. (For big texts, the syntax highlighting can take seconds).

Solution:

Use a DiffTextBox as overlay. A DiffTextBox handles all key presses and updates a list of text transforms (insert, remove, move caret). Using that information, I can update rapidly the affected RichTextBox Inlines and get instant update for the background. The syntax highlighting can now be delayed so that it takes place after the user stops typing (configurable HighlightDelay).

There is still a limit of text size that the text box can handle - if the text is very big (dozens of pages), the Silverlight TextBox and RichTextBox slow down considerably. I'm thinking this could be fixed by managing "virtual pages" and loading only the current context (several pages) in the control so that it keeps being responsive.

You can see the control in action in this code sharing site I built: CodeReturn.com. You can upload code that you want to share and / or embed in your pages. The best part is that you can edit the code (and soon: post replies to other people's code) directly in the page where it is embedded! You just need to login with any OpenID account!

Like this:

Also, you can grab the source code here: SyntaxHighlighting.zip (99.63 kb).

Links - 2010-07-06

by Vlad 6. July 2010 15:39

Benoit Mandelbrot: Fractals and the art of roughness

At TED2010, mathematics legend Benoit Mandelbrot develops a theme he first discussed at TED in 1984 -- the extreme complexity of roughness, and the way that fractal math can find order within patterns that seem unknowably complicated.

 

Silverlight for Symbian

Silverlight includes a runtime that is optimized to display content on memory-constrained devices. Silverlight support for Nokia S60 5th Edition devices includes:

  • The ability to view Silverlight applications in the mobile browser.
  • Tools to build Silverlight applications that target devices

Tips and Tricks for INotifyPropertyChanged

As a WPF or Silverlight developer, you know that your models must implement INotifyPropertyChanged and it can be a pain. To do it safely, you really need to check to see if there are any registered handlers, then raise the event. To add insult to injury, the event arguments take a string, so if you mistype the property name you're out of luck. Some clever individuals have created nice code snippets to generate the needed plumbing, but it doesn't help with refactoring.

One common solution is to create a base class that provides the plumbing for a raise property notification.

Import Art from Photoshop and Make into Silverlight Controls

In this tutorial, we’ll take graphics created in Adobe Photoshop and Illustrator, import them into Expression Blend and then quickly turn the visual assets into interactive Silverlight controls.

Create a Custom Control - Inheriting from TextBox

When a control almost does what you want it to – if only it had another button or behaved slightly differently – you may be able to extend it by writing a custom control. Custom controls let you change an existing control or write a completely new control.

Categories: News | Silverlight

DesignData support for Silverlight in Visual Studio 2010 and Blend 4

by Vlad 14. May 2010 12:52

In order to take advantage of the design-time binding support in Blend (and now VS .NET 2010), especially when using MVVM, you had these options:

1. Set the DataContext in XAML to a StaticResource (like a ViewModel) created for design only, and change it to the real thing at runtime.

Good: use the existing class structure, XAML intellisense and autocompletion.

Bad: the design-time object will get created at runtime too, cannot access private set or readonly properties, must have a parameterless constructor.

2. Create sample data in Blend (XML).

Good: can be created by designers, can use private set or readonly properties, no runtime penalty.

Bad: must be kept in sync with the actual ViewModel, no compile-time checking, no intellisense support.

DesignData

The DesignData combines the advantages of the two options - you can create a XAML with your design values, based on the existing class model.

You can take advantage of intellisense and autocompletion and you're able to set readonly properties, instantiate classes with no parameterless contructors.

The objects will be created only at design time, so there is no runtime penalty. You also get compile-time checking - you get an error if you try to set an invalid value to a int property, for example.

This functionality has been available since Blend 3, but it was (and still is) kind of hidden - in Blend 3 / VS 2008 you had to manually edit the project file to get it to work.

Fortunately in VS 2010 you don't need to edit the project file, but there still is no Item Template for DesignData files.

More...

Categories: MVVM | Silverlight | DesignData

Syntax Highlighting TextBox in Silverlight using MVVM

by Vlad 5. May 2010 19:53

EDIT: You can find an update to this post here: Code editor control with syntax highlighting for Silverlight available.

This is a demo about leveraging the databinding and templating support in Silverlight and the MVVM pattern to create a simple syntax highlighting textbox control.

The idea is to have an invisible TextBox (handling the editing) overlapping a ItemsControl that uses TextBlocks to highlight the keywords in the text. The ItemsSource property of the ItemsControl is bound to a collection property on the ViewModel, so we only need to update this collection in order to maintain the controls in sync.

In the end we'll get something like this:

More...