Telerik blogs

Moving further into our discussion of controls as “tools” that we utilize, we want to take a look at RadRichTextBox and see just how it provides an amazing out-of-the-box rich text editing experience.

One of the first questions we often hear when demoing this control to people is “That isn’t Word?”, meaning that our team has done a pretty good job of setting up the control to look and perform like everyone’s favorite Office document editing solution.  Now we can take a look at just how easy it is to get started with “This isn’t Word?” and some of the new functionality that comes out-of-the-box with the Q2 2011 release.

Step 1 – Setup, aka, That was Easy!

For anyone who has used RadRichTextBox before, you probably already know that the setup experience is about as easy as it gets in Visual Studio.  Everyone else, just follow these steps to get the full rich text editing experience into your application in a few simple steps:

  1. Start a new Silverlight 4/WPF 4 Project in Visual Studio
  2. Add the following assemblies to your project:

    RRTB Assemblies
  3. Either use the Wizard (detailed in this video on Telerik TV) or
  4. Add the following Xaml to your page:

    <UserControl ... xmlns:telerik=http://schemas.telerik.com/2008/xaml/presentation ...>
       
        <Grid x:Name="LayoutRoot"
              Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <telerik:RadRichTextBoxRibbonUI x:Name="xRadRibbonUI" />
            <telerik:RadRichTextBox x:Name="xRadRichTextBox"
                                    Grid.Row="1" />
        </Grid>
    </UserControl>
  5. Right click on the Ribbon UI and select the ‘Load Default Items’ option:

    Load Items in RRTB

Run your project.  That’s it. :)  Take a moment to see how cool RadRichTextBox is in action then come back for step 2.

Step 2 – Word, Anyone?

Setup is pretty ridiculously easy, as you have just seen, so now we can look a bit into the Q2 2011 feature set making it into RadRichTextBox.  The first thing we’ll notice is that there is a new ‘Headers & Footers’ tab in our default layout, which work rather like the default Word options.

Making a Header on our page is easy.  Head into View to use Print Layout and add some margin in the Page Layout tab to set our document up, then simply click into what you would expect to be the Header region:

RichTextEditor Header

Meaning you can add text, images, even tables for formatting into your header.  If you then go to the Insert tab, you can see the options over on the right for inserting a header (which we just did) and a footer, which works just as easily as the header.  Simple as that!

Step 3 – Images, Anyone?

Documents wouldn’t be any fun if we could only type into them, generally speaking including images into our documents helps to better represent ideas, explain concepts, and illustrate examples.  Since we now know that there is an amazing Image Editor control in the Q2 2011 release, wouldn’t it be nice if there were improvements to how images are handled in RadRichTextBox? 

Well as a matter of a fact – there are!  We have added two important features to RadRichTextBox in this release that can be seen in this image:

Text Wrapping Options

First up is Text Wrapping, which allows us to determine how images will interact with the text around them.  In the image above you can see that the image kind of lumps into the middle of text creating a pretty undesirable effect on the look and feel of our document.  By utilizing the Text Wrapping options, as seen in the menu we just clicked:

Text Wrapping Options

we can now choose to have images go behind our text, in front of it, or even have text intelligently wrap around images to create a nicer looking document.  I’m sure we can all agree that this looks a lot nicer than the above image:

Wrapped Text looks better

Second up is inline image editing.  I won’t give a lengthy explanation on this one considering we’ve simply included the RadImageEditor control as an inline image editor, meaning you can insert an image, edit it as you need (resize, flip, crop, or perform effects, to name a few options), and position it nicely within your document, all without leaving our Word-like interface. 

Step 4 – Wrap-up

As you may have noticed, we spent very little time in Visual Studio getting RadRichTextBox setup and instead spent most of the time going over the new features found in RadRichTextBox during a runtime exploration.  That is because RadRichTextBox, while containing a great API for programmatically working with documents and extending functionality to the control, is another tool in your Telerik arsenal for adding lots of rich functionality to your applications with very little effort on your part as a developer.  Instead your users can benefit from the time our team has put into recreating the Word experience, all while you can spend your time worrying about more complex business concerns in your applications.

Normally I offer a source link, but since this control is so easy to setup, instead I am linking to the document I made above so that you can check it out in Word and see the results.


About the Author

Evan Hutnick

works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.

Related Posts

Comments

Comments are disabled in preview mode.