This article is about a custom WPF control that enables the definition and usage of
BBCode in your XAML application.
I was trying to create an ASP.NET backoffice for basic CMS operations on a Silverlight page. Since XAML/XML is hard to edit without some kind of code completion, I decided to give
BBCode a shot, since it's easy and the square brackets look a lot nicer to the user. :)
The design of the control is fairly simple. It has a
BBCode dependency property that stores the
BBCode currently on display, a collection of Tags that are used during the parsing, a
DefaultElementName that is used for elements without any tag, and a
RootElementName, that is used as a root for the parsed XAML output.
Parse method utilizes the tags to transform the
BBCode into XAML and then uses the
XamlReader.Load method to set the
UserControl.Content property of the
Explanation of the Tag Objects
ParametrizedTag: [img width=100 height=200]image.jpg[/img]
You can add your own tags if you wish. Just implement the
ITag interface, and you can use it in
Parser.Tags in code or XAML!
Using the Code
Here is a example of how one can define custom
BBCodes for the
And this is the demo app:
Tags are dependency properties, you can use bindings on them. In the demo app, I have bound the
Textbox.Text to the
Parser.BBCode property. And you have a (very) simple editor!
Points of Interest
My first attempt to write this control was with regular expressions, but I decided to write the parsing manually because I had problems with nested
I had problems with special Slovenian characters (š, c, ž) using the
XamlReader.Parse(string) method. I had to use...
XamlReader.Load(new MemoryStream(Encoding.UTF8.GetBytes(xaml)), pc);
... to get it to work properly. Seems like the
Parse method uses
Encoding.ASCI to get the bytes from the input string.
- 27-11-2008: First release