Silverlight Rich TextBox
This Silverlight only 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.
You need to login to Download the Rich TextBox example, If you do not have a login you can register for free!
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/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="620" Height="620">
<Canvas Width="620" Height="620">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="timer">
<DoubleAnimation x:Name="animation" BeginTime="00:00:00" Duration="00:00:0.02" Storyboard.TargetName="InvisibleRect" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Visibility="Visible" x:Name="InvisibleRect" Width="1" Height="1" />
<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="20" Canvas.ZIndex="2">
<Button x:Name="applyCut" Width="24" Height="23" Click="Cut_Click" Margin="2">
<Canvas>
<Image Source="images/cut.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="applyCopy" Width="24" Height="23" Click="Copy_Click" Margin="2">
<Canvas>
<Image Source="images/copy.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="applyPaste" Width="24" Height="23" Click="Paste_Click" Margin="2">
<Canvas>
<Image Source="images/paste.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="applyPainter" Width="24" Height="23" Click="Painter_Click" Margin="2">
<Canvas>
<Image Source="images/painter.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="undo" Width="24" Height="23" Margin="10, 2, 2, 2" Click="Undo_Click">
<Canvas>
<Image Source="images/undo.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="redo" Width="24" Height="23" Margin="2" Click="Redo_Click">
<Canvas>
<Image Source="images/redo.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeBold" Width="24" Height="23" Click="MakeBold_Click" Margin="10, 2, 2, 2">
<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">
<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">
<TextBlock x:Name="underlineText" Text="U" FontFamily="Arial" FontSize="14" TextDecorations="Underline" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
<liquid:DropDownList x:Name="selectFontFamily" Width="165" Height="23" Margin="10, 2, 2, 2" ItemSelected="SelectFontFamily_ItemSelected">
<liquid:DropDownList.Items>
<liquid:ListItem Key="Arial" Value="Arial" FontFamily="Arial" />
<liquid:ListItem Key="Arial Black" Value="Arial Black" FontFamily="Arial Black" />
<liquid:ListItem Key="Comic Sans MS" Value="Comic Sans MS" FontFamily="Comic Sans MS" />
<liquid:ListItem Key="Courier New" Value="Courier New" FontFamily="Courier New" />
<liquid:ListItem Key="Lucida Grande" Value="Lucida Grande" FontFamily="Lucida Grande" />
<liquid:ListItem Key="Lucida Sans Unicode" Value="Lucida Sans Unicode" FontFamily="Lucida Sans Unicode" />
<liquid:ListItem Key="Times New Roman" Value="Times New Roman" FontFamily="Times New Roman" />
<liquid:ListItem Key="Trebuchet MS" Value="Trebuchet MS" FontFamily="Trebuchet MS" />
<liquid:ListItem Key="Verdana" Value="Verdana" FontFamily="Verdana" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
<liquid:DropDownList x:Name="selectFontSize" Width="55" Height="23" Margin="2" ItemSelected="SelectFontSize_ItemSelected">
<liquid:DropDownList.Items>
<liquid:ListItem Key="8" Value="8" />
<liquid:ListItem Key="9" Value="9" />
<liquid:ListItem Key="10" Value="10" />
<liquid:ListItem Key="11" Value="11" />
<liquid:ListItem Key="12" Value="12" />
<liquid:ListItem Key="14" Value="14" />
<liquid:ListItem Key="16" Value="16" />
<liquid:ListItem Key="18" Value="18" />
<liquid:ListItem Key="20" Value="20" />
<liquid:ListItem Key="22" Value="22" />
<liquid:ListItem Key="24" Value="24" />
<liquid:ListItem Key="26" Value="26" />
<liquid:ListItem Key="28" Value="28" />
<liquid:ListItem Key="36" Value="36" />
<liquid:ListItem Key="48" Value="48" />
<liquid:ListItem Key="72" Value="72" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
<liquid:DropDownList x:Name="selectColor" Width="55" Height="23" Margin="2" ItemSelected="SelectColor_ItemSelected" SelectedIndex="0">
<liquid:DropDownList.Items>
<liquid:ListItem Key="ff000000" Fill="#ff000000" />
<liquid:ListItem Key="ffff0000" Fill="#ffff0000" />
<liquid:ListItem Key="ffffff00" Fill="#ffffff00" />
<liquid:ListItem Key="ffff00ff" Fill="#ffff00ff" />
<liquid:ListItem Key="ff00ff00" Fill="#ff00ff00" />
<liquid:ListItem Key="ff00ffff" Fill="#ff00ffff" />
<liquid:ListItem Key="ff0000ff" Fill="#ff0000ff" />
<liquid:ListItem Key="ffff8888" Fill="#ffff8888" />
<liquid:ListItem Key="ff88ff88" Fill="#ff88ff88" />
<liquid:ListItem Key="ff88ffff" Fill="#ff88ffff" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
</StackPanel>
<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="50" Canvas.ZIndex="1">
<Button x:Name="makeLeft" Width="24" Height="23" Click="MakeLeft_Click" Margin="2">
<Canvas>
<Image Source="images/left.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeCenter" Width="24" Height="23" Click="MakeCenter_Click" Margin="2">
<Canvas>
<Image Source="images/center.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeRight" Width="24" Height="23" Click="MakeRight_Click" Margin="2">
<Canvas>
<Image Source="images/right.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="indent" Width="24" Height="23" Margin="10, 2, 2, 2" Click="Indent_Click">
<Canvas>
<Image Source="images/indent.png" Canvas.Top="-2" />
</Canvas>
</Button>
<Button x:Name="outdent" Width="24" Height="23" Margin="2" Click="Outdent_Click">
<Canvas>
<Image Source="images/dedent.png" Canvas.Top="-2" />
</Canvas>
</Button>
<Button x:Name="bulletList" Width="24" Height="23" Margin="10, 2, 2, 2" Click="BulletList_Click">
<Canvas>
<Image Source="images/bullets.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="numberList" Width="24" Height="23" Margin="2" Click="NumberList_Click">
<Canvas>
<Image Source="images/numbers.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeLink" Width="24" Height="23" Margin="2" Click="Link_Click">
<Canvas>
<Image Source="images/link.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeSuperscript" Width="24" Height="23" Margin="10, 2, 2, 2" Click="Superscript_Click">
<Canvas>
<Image Source="images/superscript.png" Canvas.Top="-1" />
</Canvas>
</Button>
<Button x:Name="makeSubscript" Width="24" Height="23" Margin="2" Click="Subscript_Click">
<Canvas>
<Image Source="images/subscript.png" Canvas.Top="-1" />
</Canvas>
</Button>
<liquid:DropDownList x:Name="insertImage" Width="75" Height="23" Margin="10, 2, 2, 2" DefaultText="Images" ItemSelected="InsertImage_ItemSelected">
<liquid:DropDownList.Items>
<liquid:ListItem Key="images/cake.png" ImageURL="images/cake.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/bell.png" ImageURL="images/bell.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/feed.png" ImageURL="images/feed.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/house.png" ImageURL="images/house.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/telephone.png" ImageURL="images/telephone.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/tick.png" ImageURL="images/tick.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/user.png" ImageURL="images/user.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/cloud.png" ImageURL="images/cloud.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/earth.png" ImageURL="images/earth.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/shield.png" ImageURL="images/shield.png" ImageOffset="4,2" />
<liquid:ListItem Key="images/tv.png" ImageURL="images/tv.png" ImageOffset="4,2" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
<liquid:TextBoxPlus x:Name="searchTerms" Width="100" Margin="10, 2, 2, 2" />
<Button x:Name="search" Width="50" Height="23" Content="Search" Margin="2" Click="Search_Click" />
</StackPanel>
<Grid x:Name="layoutGrid" Canvas.Left="10" Canvas.Top="85" Width="600" Height="500" Background="#00ffffff">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="leftColumn" Width="600" />
</Grid.ColumnDefinitions>
<liquid:RichTextBox x:Name="richTextBox" Grid.Row="0" Grid.Column="0" Width="Auto" Height="Auto" LinkClicked="RichTextBox_LinkClicked" />
</Grid>
<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="590">
<Button x:Name="exportButton" Width="70" Margin="4 0 0 0" Content="Export" Click="Export_Click" />
<Button x:Name="importButton" Width="70" Margin="4 0 0 0" Content="Import" Click="Import_Click" />
<Button x:Name="elementsButton" Width="70" Margin="15 0 0 0" Content="Elements" Click="ElementsButton_Click" />
<Button x:Name="visualButton" Width="70" Margin="4 0 0 0" Content="Lines" Click="VisualsButton_Click" />
<Button x:Name="historyButton" Width="70" Margin="4 0 0 0" Content="History" Click="HistoryButton_Click" />
</StackPanel>
<TextBlock x:Name="stat" Canvas.Left="10" Canvas.Top="835" Text="" Visibility="Collapsed" />
<TextBlock x:Name="statStart" Canvas.Left="10" Canvas.Top="855" Text="" Visibility="Collapsed" />
<TextBlock x:Name="statEnd" Canvas.Left="10" Canvas.Top="875" Text="" Visibility="Collapsed" />
<liquid:Dialog x:Name="enterURL" Canvas.Left="250" Canvas.Top="250" Width="254" Height="110" Resizable="False" Title="Enter URL" Canvas.ZIndex="10" Closed="EnterURL_Closed">
<liquid:Dialog.Children>
<liquid:TextBoxPlus x:Name="url" Canvas.Left="5" Canvas.Top="8" Width="238" FontFamily="Arial" FontSize="14" Text="http://www.silverlight.net" />
</liquid:Dialog.Children>
</liquid:Dialog>
<liquid:Dialog x:Name="exportPopup" Canvas.Left="250" Canvas.Top="250" Width="400" Height="400" Resizable="False" Title="Export Rich Text To..." Buttons="Close" Canvas.ZIndex="10">
<liquid:Dialog.Children>
<Canvas Margin="2">
<StackPanel Orientation="Horizontal" Canvas.ZIndex="1">
<liquid:DropDownList x:Name="exportFormat" Width="150" DefaultText="Choose...">
<liquid:DropDownList.Items>
<liquid:ListItem Key="html" Value="HTML" />
<liquid:ListItem Key="xml" Value="XML" />
<liquid:ListItem Key="text" Value="Plain Text" />
</liquid:DropDownList.Items>
</liquid:DropDownList>
<Button x:Name="updateExportedText" Width="60" Content="Go!" Margin="4 0 0 0" Click="UpdateExportedText_Click" />
</StackPanel>
<TextBox x:Name="exportedText" Canvas.Top="30" Canvas.ZIndex="0" AcceptsReturn="True" TextWrapping="Wrap" Width="390" Height="300" VerticalScrollBarVisibility="Auto" />
</Canvas>
</liquid:Dialog.Children>
</liquid:Dialog>
<liquid:Dialog x:Name="importPopup" Canvas.Left="250" Canvas.Top="250" Width="400" Height="400" Resizable="False" Title="Import Rich Text From...