Thursday, November 19, 2009

Revisiting Lorem Ipsum in Silverlight 4 with RichTextArea and Printing

Earlier I explored some options to allow inline hyperlinks in Silverlight 3 using some extensions and the WrapPanel. In Silverlight 4, which was released as beta earlier this week, the problem is solved in the framework. Silverlight 4 gives us the RichTextArea control, which allows us to organize runs, spans, paragraphs, and even embed other UI elements to create a very richly illustrated document.

To illustrate this, I fired up a new Silverlight Application in Visual Studio 2010 and chose a Silverlight 4 application. Grabbing some more "lorem ipsum" text, I threw it into a RichTextArea control and then began embellishing with hyper links, formatting, and tossed in a red rectangle for good measure. The markup looks like this:

<RichTextArea TextWrapping="Wrap">
                <Paragraph>Lorem ipsum dolor sit amet consectetur adipiscing elit.
                    <Bold>Suspendisse eu erat quis nibh laoreet hendrerit.</Bold>
                    <Italic>Tortor quam, auctor vel elementum et, rhoncus id augue.</Italic>
                    <Span Foreground="BlueViolet">Vestibulum nulla augue, dictum ut placerat et,</Span>
                    <Span>hendrerit a lorem. Vestibulum ante ipsum primis in</Span>
                    <Hyperlink NavigateUri=""> faucibus orci luctus </Hyperlink>
                    <Run>et ultrices posuere cubilia Curae; Donec sollicitudin feugiat augue, eu 
                        vestibulum eros dapibus vel.
                        <Rectangle Width="20" Height="20" Stroke="Black" Fill="Red"/>
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.                  

As you can see, I am able to mix raw text, spans and runs that format colors or fonts, hyperlinks, and even use the InlineUIContainer to toss a rectangle into the mix. After building and publishing, this is what appears in the browser:

Rich text area in Silverlight 4 Beta

As you can see, a very serviceable rendering!

Next, we'll have a quick bit of fun. I add some row definitions and a header:

             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
         <TextBlock FontWeight="Bold" Grid.Row="0">Header

I wire the text area into row 1, then add this button to the last row:

  <Button Click="Button_Click" Content="Print" Grid.Row="2"/>

Do you get where I'm going? We don't want to print the header or the button, just the lorem ipsum section, so this is what we wire into the code behind:

public partial class MainPage : UserControl
    PrintDocument _pd; 

    public MainPage()
        _pd = new PrintDocument();
        _pd.PrintPage += new EventHandler(pd_PrintPage);

    void pd_PrintPage(object sender, PrintPageEventArgs e)
        e.PageVisual = MainText;

    private void Button_Click(object sender, RoutedEventArgs e)
        _pd.DocumentName = "Lorem Ipsum";

Note that we have three steps:

  1. Create a printing surface
  2. Trigger the print by calling the print method (and optionally setting some parameters)
  3. Wiring into the print event and setting the visual to print only what we want (keep in mind we could have created an entirely new set of UI elements here).

The new page looks like this:

Silverlight 4 Beta Print Button

When I click "print" I'm given the familiar print dialog. I selected the XPS writer and saved it as an XPS document. Here is the final result:

Silverlight 4 Beta Page Printed from Browser

I'll continue to follow how Silverlight 4 makes our life easier by integrating into the framework what we used to have to build ourselves!

Jeremy Likness


  1. Hi,
    I have inserted a Button to a RichTextArea using the following code on a button click.
    InlineUIContainer GappitContainer = new InlineUIContainer();
    TextBox textBox = new TextBox();
    GappitContainer.Child = textBox;

    When I insert a textbox for the second time it is not aligned to the top.
    But it is aligned automatically if we start typing in the textbox.
    Is there any way to align the newly inserted textbox.
    I have tried with vertical alignment and all… is not working

  2. i dont see the RichTextArea control in the RC.. any ideas where it went?

  3. 2010 RC only supports Silverlight 3 development, not Silverlight 4. For that, you need to stick with the beta 4.

  4. Is their any way to use this in a wcf application?? I have been searching for this....

  5. I'm not sure I follow, where does the WCF come into play?

  6. jeremy,
    I would like to do is develop simple paragraphs in a silverlight wcf web application using the rich text box. Is this possible? I have not seen any tutorials on this subject. How can you achieve this?? I would appreciate any tutorials
    on this subject or just developing a wcf web service paragraph development for silverlight 4.
    Thank you!

  7. Paragraphs are easy ... you can use the existing Run and LineBreak tags for that.