RichTextBox in Silverlight 4


Following are the feature of rich text box control

  • Rich content - multimedia
  • Inline images
  • Formatted text
  • Hyperlinks

Rich text box offer two modes

  • Editing mode which is by default.
  • Read only mode which can be set by using IsReadOnly="True"

    image1.gif


Note: The hyperlinks will work only if IsReadOnly property is set to true.

Main Page

Following image shows how the page looks with rich text box.

image2.gif

To set the content of RichTextBox control you can use Paragraph element as shown below

image3.gif

Hyperlink

To show the hyperlink you can use the Hyperlink element. The hyperlink will navigate only if the rich text box is in read only mode i.e. isReadOnly=True

image4.gif

UIElement

To show the text with the inline UIElement object like image as shown below

image5.gif

Left Alignment

To change the alignment to left or start typing from left, then select the text and click on the left button. As shown below

image6.gif

For this use the following code:

image7.gif

Center Alignment

To change the alignment to center or start typing from center, then select the text and click on the center button. As shown below.

image8.gif

For this use the following code:

image9.gif

Right Alignment

To change the alignment to right or start typing from right, then select the text and click on the right button. As shown below.

image10.gif

For this use the following code:

image11.gif

Bold

To make the text bold, then first select the text and click on the bold button. As shown below:

image12.gif

For this use the following code:

image13.gif

Italic

To make the text italic, then first select the text and click on the italic button. As shown below:

image14.gif

For this use the following code:

image15.gif

Underline

To make the text underline, then first select the text and click on the underline button. As shown below:

image16.gif

For this use the following code:

image17.gif

Wrap / Unwrap

To wrap the content, then check wrap checkbox. As shown below:

image18.gif

To remove wrap, then uncheck wrap checkbox. As shown below:

image19.gif

For this use the following code:

image19.1.gif

Load image

To load multimedia content like image, specify the location of the image and then click load button. As shown below.

image20.gif

For this use the following code:

image21.gif
 


Similar Articles