Introduction
This article is about a custom WPF control that enables the definition and usage of BBCode
in your XAML application.
Background
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. :)
Parser Design
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.
The 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 Parser
control.
Explanation of the Tag Objects
SimpleTag
: [;)]
EnclosingTag
: [i]text[/i]
ValueTag
: [url]http://m0sa.net[/url]
ParameterValueTag
: [url=http://m0sa.net]m0sa.net[url]
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 BBCode
s for the Parser
control:
And this is the demo app:
Since the BBCode
and 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 BBCode
s.
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.
History
- 27-11-2008: First release