Step 1 of 3: Creating a Silverlight Application

In this step you'll create a new Silverlight application, set the application up, and add the C1RichTextBox and C1RichTextBoxToolbar controls to the application. After completing this step, you should have a mostly functional Rich Text editor.

Complete the following steps:

1. In Visual Studio 2010, select File | New | Project.

2. In the New Project dialog box, select a language in the left pane, and in the templates list select Silverlight Application. Enter a Name for your project and click OK. The New Silverlight Application dialog box will appear.

3. Click OK to accept default settings, close the New Silverlight Application dialog box, and create your project. The MainPage.xaml file should open.

4. In the Solution Explorer, right-click the project and, from the context menu, choose Add Reference.

5. In the Add Reference dialog box, select the following assemblies and click OK:

• C1.Silverlight

• C1.Silverlight.RichTextBox

• C1.Silverlight.RichTextBox.Toolbar

• C1.Silverlight.SpellChecker

6. In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

7. Add the control namespaces to the page, by editing the UserControl tag in XAML view so it appears similar to the following:

<UserControl x:Class="C1RichTextBox.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400"

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

8. Add the following markup within the <Grid> tags to add a StackPanel panel:

<!—StackPanel that will contain the C1RichTextBox and C1RichTextBoxToolbar controls. -->

</StackPanel>

9. Click between the StackPanel's tags in XAML view, and add the following markup to add C1RichTextBoxToolbar and C1RichTextBox controls:

<c1:C1RichTextBoxToolbar Name="C1RTBTB" />

<c1:C1RichTextBox Height="300" Width="675" />

10. In the XAML view, bind the C1RichTextBoxToolbar to the C1RichTextBox by adding RichTextBox="{Binding ElementName=C1RTB}" to the C1RichTextBoxToolbar's tag.

The markup will appear similar to the following:

<c1:C1RichTextBoxToolbar RichTextBox="{Binding ElementName=C1RTB}" Name="C1RTBTB" />

What You've Accomplished

If you run the application, you'll see an almost fully functional C1RichTextBox application. You can enter text in the C1RichTextBox control and edit the text with the options in the C1RichTextBoxToolbar. However, spell-checking is not currently fully functional. In the next step you'll set up spell-checking and customize the application further.