State-of-the-art Silverlight Controls: Working with ComponentOne RichTextBox for Silverlight

Applies To:

RichTextBox for Silverlight

Author:

Steve Basl

Published On:

3/10/2009

Most RichTextBoxes work the same way: they are used to edit documents, spell check, and export documents to HTML. But what if you want more? With ComponentOne RichTextBox for Silverlight, you can illuminate your RIA with smooth rich designs, interactivity, and enhanced performance. Appearance is important, and your RIA's are no different. ComponentOne Studio for Silverlight will help you provide the results your end-users expect with show-stopping, powerful RichTextBoxes requiring minimal time and effort.

To demonstrate this control, let's create a RichTextBox sample application. We will showcase how the spellchecker works and export a document to HTML and then back to text. Creating your RIA with ComponentOne RichTextBox for Silverlight is a breeze - just follow the steps below and see how it's done.

Step 1: Create a Silverlight Application

ComponentOne RichTextBox (C1RichTextBox) is a Silverlight based control. In order to use the C1RichTextBox control, we must first create a Silverlight Application.

Open Microsoft Visual Studio and select File | New | Project from the menu. For this tutorial, we will create a Visual C# Silverlight Application using the 3.5 .NET Framework. Then, choose a unique name for the project. For this sample, name the project "RichTextBoxDemo".

In the Add Silverlight Application dialog box, select ASP.NET Web Application Project from the Project Type drop-down box. Select OK to accept the default name and create project.

Step 2: Add References to the Project

With the project created, you now have your designer in front of you; let's add the ComponentOne control references needed for this sample.

In Microsoft Visual Studio, go to your Solution Explorer and right-click the References folder. Select Add Reference, and then select the Browse tab to navigate to the ComponentOne Silverlight controls. These can be found by navigating to the C:\Program Files\ComponentOne\Studio for Silverlight\bin directory, and selecting the following files for your project:

  • C1.Silverlight.dll
  • C1.Silverlight.RichTextBox.dll
  • C1.Silverlight.RichTextBox.Toolbar.dll
  • C1.Silverlight.SpellChecker

After adding the references, we can begin to modify the XAML page. Make sure Page.xaml is open and the XAML code is in front of you. Below is the modifications made to the beginning of the UserControl.

<UserControl x:Class="RichTextBoxDemo.Page"  
    xmlns="http://schemas.microsoft.com/client/2007"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    xmlns:root="clr-namespace:RichTextBoxDemo"  
    xmlns:rtb="clr-namespace:C1.Silverlight.RichTextBox;assembly=C1.Silverlight.RichTextBox"  
    xmlns:toolbar="clr-namespace:C1.Silverlight.RichTextBox;assembly=C1.Silverlight.RichTextBox.Toolbar" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

Step 3: Setup the Layout

Next we will setup the layout of our application, setting up the toolbar, text blocks, and buttons. This is done using XAML in Visual Studio or Microsoft Expression Blend. For this example we will write the code ourselves rather than using Blend to generate the XAML. We will layout the application using a grid; below is the XAML for our grid setup. Add the following to your Page.xaml:

Step 4: Add Buttons

With parts of our grid defined, and our layout for the TextBoxes and Toolbar set, let's add some buttons so we can utilize some unique features with C1RichTextBox. The buttons we are going to create will 1) generate HTML from our text and 2) load any changes made in the HTML back to our text. Add the following to your Page.xaml:

Step 5: Add Code to the Application

Now that the XAML is completed for Page.xaml, let's move to the C# portion of our application. In your Solution Explorer, expand the Page.xaml node to locate the Page.xaml.cs file. Double-click the file; a new tab appears for editing.

The next step is declaring our references in our page. Recall we added three references to the project; now we are going to declare them in the page.

using C1.Silverlight.RichTextBox;  
using C1.Silverlight.SpellChecker;  
using C1.Silverlight;

Moving on, we need to setup the page by initializing our components, and while we are here we can start working on our SpellChecker as well.

namespace RichTextBoxDemo  
{  
    public partial class Page : UserControl  
    {  
        public Page()  
        {  
            InitializeComponent();  
            richToolbar.RichTextBox = richTB;  
            richToolbar.SpellChecker = new C1SpellChecker();  
            richToolbar.SpellChecker.MainDictionary.LoadAsync("C1Spell_en-US.dct");  
        }

Next we need to build the code for the import and export HTML buttons. The code below demonstrates how to incorporate the buttons and initializes the control to fully function on the page.

        /*  
         * Import HTML to the C1RichTextBox  
         */  
        private void btnFromHTML_Click(object sender, RoutedEventArgs e)  
        {  
            try  
            {  
                richTB.Html = richTBHTML.Text;  
            }  
            catch  
            {  
            }  
        }  

       /*  
        * Export HTML from the C1RichTextBox  
        */  
        private void btnToHTML_Click(object sender, RoutedEventArgs e)  
        {  
            richTBHTML.Text = richTB.Html;  
        }  

    }  
}

Step 6: Run the Application

Press F5 to run the application. Here is what we have at this point:

To use the SpellChecker feature in C1RichTextBox, we have to next add the dictionary to our project. To load the dictionary, navigate back to your Solution Explorer and find the Web project: RichTextBoxDemo.Web. Right-click on the project name, and select Add | Existing Item. Then locate the DCT files, which are located by default in the C:\Program Files\ComponentOne.NET 2.0\bin\dictionaries directory. For this example, we will use the C1Spell_en-US.dct dictionary. Select C1Spell_en-US.dct and click Add.

Now run the application again, and type in the text box. To test the SpellChecker, make some errors in your spelling and click the SpellChecker button in the Tools group. In the image below, "This" was misspelled and our SpellChecker detected it right away.

Lastly, we will use our buttons for exporting and importing the text and HTML. Type "A cool feature is generating HTML" in the textbox, and then make the text bold font style. We can also add some color; change the font back color to blue, and change the font color to orange. Once this is done click on the Generate HTML button.

With C1RichTextBox we were able to write text and generate HTML with a press of a button, but what happens if it's the other way? Modify the HTML, and change the background-color to black and the font color to yellow. After you are done, click the Load from HTML button.

The changes made in the HTML are reflected in the viewing pane of the RichTextBox editor.

With little work we were able to create a sharp looking text editor with advanced features for the Web. Get started today. Download the trial version of ComponentOne Studio for Silverlight, which includes ComponentOne RichTextBox.

[Download ComponentOne Studio for Silverlight](http://www.componentone.com/StudioSilverlight/Download/)

MESCIUS inc.

comments powered by Disqus