Vectorlight News

  • Chat App Converted to HTML and JQuery
    Sep 08, 2011

    Converted from Silverlight to HTML and Javascript/JQuery is the Vectorlight Chat App. Login using your Vectorlight password to chat using your username and avatar.

  • HTML5 iPhone,Android Big Guns Tower Defense
    Jul 02, 2011

    Big Guns has made the leap from Windows Phone 7 (XNA) to HTML5 so you can now play it on your iPhone, Android and other HTML5 compatible devices.

  • HTML5 Games - Word Poppers and Batty
    Jun 04, 2011

    As the take-up of HTML5 quickens (74% of users currently have a browser capable of HTML5 Canvas) we present two more games for both your browser and mobile.

  • Big Guns Tower Defense on Windows Phone 7
    May 06, 2011

    Coming soon to Windows Phone 7 is an XNA port of the popular Vectorlight tower defense game Super Tower Defense. Whilst retaining many of the graphical and gameplay features of the original Silverlight game.

  • Wakacube WP7 Update
    Apr 26, 2011

    Released to the Windows Phone 7 marketplace today is Version 1.1 of Wakacube the 3D physics game of skill. Included in the update are more levels (30 in total) and new mode Wakatime which generates random crate structures to keep players entertained long after the levels have been completed.

  • Home Page News

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.

jerrith posted on Bind to HTML directly

Hi,

I've been trying to incorporate the Liquid Rich Text editor into a Microsoft LightSwitch project, but it's not working out because there is no way to setup binding directly to the HTML of the control.

It would be great if we could bind directly to the HTML as this would allow direct binding of the text to be saved in the database.

Any plans on making this possible in the (near) future?

i have do this, but my control lost namespace reference and parameter ...

i insert this : <Xaml><editorcontrol:xcontrol param1="1"/></Xaml>

it work fine, but when i save and re-load the richText

it was this :

<Xaml><xcontrol width="auto" height="auto"></xcontrol></Xaml>


what can i do to make this work ?

mvaliani posted on Uppercase/Lowercase

Is there any property of the Liquid.Richtext, so that the typed text or the text programmatically inserted is automatically converted into uppercase/lowercase?


Many thanks

I should have known! Sql Server xml columns strip out CDATA and leave just the content. Hence I could save and view a new entry but not a saved one. I have had to change the column type back to nvarchar(max) and amend a stored procedure I was using to copy the rich text to an actual xml column on which I can then perform xpath queries. The original rich text can then be used to bind to the control.

Hi

Couls you please tell how to cature keyboard short cut in liquid rich text box. I am using silverlight 3.

I need to capture B, I etc

Here is the image with my problem : here.

Rate this: 

1 Star 2 Star 3 Star 4 Star 5 Star
48 Ratings / 3.6 Average

Tweets

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...