Silverlight Rich TextBox

This free Silverlight Rich TextBox is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

To use the Rich TextBox control you will need to add a reference to Liquid.RichText.dll in your project.


How to Use the Rich TextBox Control

To use the Rich TextBox on your Silverlight page:

<UserControl x:Class="RichTextBox.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquidRichText="clr-namespace:Liquid;assembly=Liquid.RichText"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="20">
            <Button x:Name="makeBold" Width="24" Height="23" Click="MakeBold_Click" Margin="10, 2, 2, 2" ToolTipService.ToolTip="Bold">
                <TextBlock x:Name="boldText" Text="B" FontFamily="Arial" FontSize="14" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button x:Name="makeItalic" Width="24" Height="23" Click="MakeItalic_Click" Margin="2" ToolTipService.ToolTip="Italic">
                <TextBlock x:Name="italicText" Text="I" FontFamily="Arial" FontSize="14" FontStyle="Italic" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button x:Name="makeUnderline" Width="24" Height="23" Click="MakeUnderline_Click" Margin="2" ToolTipService.ToolTip="Underline">
                <TextBlock x:Name="underlineText" Text="U" FontFamily="Arial" FontSize="14" TextDecorations="Underline" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <ComboBox x:Name="selectFontFamily" Width="155" Height="23" Margin="10, 2, 2, 2" SelectionChanged="SelectFontFamily_ItemSelected">
                <ComboBoxItem Content="Arial" FontSize="14" FontFamily="Arial" IsSelected="True" />
                <ComboBoxItem Content="Arial Black" FontSize="14" FontFamily="Arial Black" />
                <ComboBoxItem Content="Comic Sans MS" FontSize="14" FontFamily="Comic Sans MS" />
                <ComboBoxItem Content="Courier New" FontSize="14" FontFamily="Courier New" />
                <ComboBoxItem Content="Lucida Grande" FontSize="14" FontFamily="Lucida Grande" />
                <ComboBoxItem Content="Lucida Sans Unicode" FontSize="14" FontFamily="Lucida Sans Unicode" />
                <ComboBoxItem Content="Times New Roman" FontSize="14" FontFamily="Times New Roman" />
                <ComboBoxItem Content="Trebuchet MS" FontSize="14" FontFamily="Trebuchet MS" />
                <ComboBoxItem Content="Verdana" FontSize="14" FontFamily="Verdana" />
            </ComboBox>

            <ComboBox x:Name="selectFontSize" Width="45" Height="23" Margin="2" SelectionChanged="SelectFontSize_ItemSelected">
                <ComboBoxItem Content="8" />
                <ComboBoxItem Content="9" />
                <ComboBoxItem Content="10" IsSelected="True" />
                <ComboBoxItem Content="11" />
                <ComboBoxItem Content="12" />
                <ComboBoxItem Content="14" />
                <ComboBoxItem Content="16" />
                <ComboBoxItem Content="18" />
                <ComboBoxItem Content="20" />
                <ComboBoxItem Content="22" />
                <ComboBoxItem Content="24" />
                <ComboBoxItem Content="26" />
                <ComboBoxItem Content="28" />
                <ComboBoxItem Content="36" />
                <ComboBoxItem Content="48" />
                <ComboBoxItem Content="72" />
            </ComboBox>
        </StackPanel>
        <liquidRichText:RichTextBox x:Name="richTextBox" Canvas.Left="20" Canvas.Top="50" Width="295" Height="200" />
    </Canvas>
</UserControl>


The Rich TextBox can be set to plain text or rich text in the custom format.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Liquid;
using Liquid.Components;

namespace RichTextBox
{
    public partial class Page : UserControl
    {
        #region Private Properties

        private SolidColorBrush _buttonFillStyleNotApplied = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
        private SolidColorBrush _buttonFillStyleApplied = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
        private bool _ignoreFormattingChanges = false;

        #endregion

        public Page()
        {
            InitializeComponent();

            richTextBox.Text = "Some plain text.";
            richTextBox.SelectionChanged += new RichTextBoxEventHandler(RichTextBox_SelectionChanged);
        }

        private void RichTextBox_SelectionChanged(object sender, RichTextBoxEventArgs e)
        {
            UpdateFormattingControls();
        }

        private void UpdateFormattingControls()
        {
            makeBold.Background = _buttonFillStyleNotApplied;
            makeItalic.Background = _buttonFillStyleNotApplied;
            makeUnderline.Background = _buttonFillStyleNotApplied;

            if (richTextBox.SelectionStyle.Weight == FontWeights.Bold)
            {
                makeBold.Background = _buttonFillStyleApplied;
            }

            if (richTextBox.SelectionStyle.Style == FontStyles.Italic)
            {
                makeItalic.Background = _buttonFillStyleApplied;
            }

            if (richTextBox.SelectionStyle.Decorations == TextDecorations.Underline)
            {
                makeUnderline.Background = _buttonFillStyleApplied;
            }

            SetSelected(selectFontFamily, richTextBox.SelectionStyle.Family);
            SetSelected(selectFontSize, richTextBox.SelectionStyle.Size.ToString());
        }

        private void SetSelected(ComboBox combo, string value)
        {
            if (value != null)
            {
                _ignoreFormattingChanges = true;

                foreach (ComboBoxItem item in combo.Items)
                {
                    if (item.Content.ToString().ToLower() == value.ToLower())
                    {
                        combo.SelectedItem = item;
                        break;
                    }
                }

                _ignoreFormattingChanges = false;
            }
        }

        private void MakeBold_Click(object sender, RoutedEventArgs e)
        {
            Formatting format = (makeBold.Background == _buttonFillStyleNotApplied ? Formatting.Bold : Formatting.RemoveBold);

            ExecuteFormatting(format, null);
        }

        private void MakeItalic_Click(object sender, RoutedEventArgs e)
        {
            Formatting format = (makeItalic.Background == _buttonFillStyleNotApplied ? Formatting.Italic : Formatting.RemoveItalic);

            ExecuteFormatting(format, null);
        }

        private void MakeUnderline_Click(object sender, RoutedEventArgs e)
        {
            Formatting format = (makeUnderline.Background == _buttonFillStyleNotApplied ? Formatting.Underline : Formatting.RemoveUnderline);

            ExecuteFormatting(format, null);
        }

        private void SelectFontFamily_ItemSelected(object sender, EventArgs e)
        {
            if (selectFontFamily != null)
            {
                ExecuteFormatting(Formatting.FontFamily, ((ComboBoxItem)selectFontFamily.SelectedItem).Content.ToString());
            }
        }

        private void SelectFontSize_ItemSelected(object sender, EventArgs e)
        {
            if (selectFontSize != null)
            {
                ExecuteFormatting(Formatting.FontSize, double.Parse(((ComboBoxItem)selectFontSize.SelectedItem).Content.ToString()));
            }
        }

        private void ExecuteFormatting(Formatting format, object param)
        {
            if (!_ignoreFormattingChanges)
            {
                richTextBox.ApplyFormatting(format, param);
                richTextBox.ReturnFocus();
            }
        }
    }
}


Example Silverlight Rich TextBox Control:

Silverlight Rich TextBox Control

Latest Forum Posts

Here are latest posts from around the forums, if you have a question about any of the Liquid controls you can get your answers in the Forum.

Hello Dan, thanks for great control!

Is there a way to insert formated text in the run?

I have some saved html source code(simple paragraph) that I want to insert in the position of the carret in richtextbox.


Thanks!

Veljko

dan posted on How to clear the text

Hi,


Try:


myRichTextBox.Clear();


Thanks!

dan posted on How To Update the text?

Hi,


Okay I cant reproduce this can you provide a sample project that demonstrates the problem?  Any example can be emailed to support@vectorlight.net.


Thanks!

Hi,


The IsRightToLeft cannot be used in binding.  When you say your dropdown menu is going behind your buttons, you must ensure the menu is rendered after your buttons.  To do this you can use the Canvas.ZIndex property if the 2 elements are in the same container or you will have to re-arrange your XAML to ensure the menu is higher up the visual tree than your buttons.


Thanks!

Hi Thorsten,


The RichTextBox needs to have a fixed width, otherwise like you have found it will default to 20px.


Thanks!

Hi,


The AddCustom() method is a member of the SpellChecker object thus you would add the words once to the your spell checker instance and share this between all your RichTextBox instances.


Thanks!

Silverlight Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...

Latest News

  • Super Shoot Em Up Game
    Feb 04, 2010

    Added to the games section is the new Super Shoot 'Em Up game. Take control of a tank with your aim being to blow up your opposing tanks and collect all the powerups.

  • Silverlight 3 Controls V5.2.6 Released
    Feb 04, 2010

    This release includes some minor fixes for several forum posts. Please see the notes on the download page for full details on what has changed.

  • Chaos Tournament Game
    Jan 24, 2010

    Launched today is the new Games section which contains the new Silverlight only Chaos Tournament game. This game is a remake of a classic 1985 ZX Spectrum game Chaos.

  • Silverlight 4 Local File Browser Demo
    Nov 25, 2009

    Just added today to the Demos page is the new Silverlight 4 Local File Browser Demo which, as its name suggests provides a visual way to navigate the local file system.

  • New Silverlight 4 Html RichTextArea Control
    Nov 24, 2009

    To help Silverlight 4 developers getting to grips with the RichTextArea control we have created an enhanced version that allows basic HTML to be loaded and saved.