Implementing a Simple Formatting Toolbar
While you can use the C1RichTextBox control to add a full toolbar to use with the C1RichTextBox control, you can also easily create your own simple toolbar. Most rich editors include a toolbar with buttons that format the current selection, making it bold, italic, or underlined. The buttons also change state when you move the selection, to show that the selected text is bold, italic, underlined, and so on.
Implementing a simple toolbar with the C1RichTextBox is easy. For example, complete the following steps:
1. In the Solution Explorer, right-click the project and, from the context menu, choose Add Reference.
2. In the Add Reference dialog box, select the C1.Silverlight.RichTextBox assembly and click OK.
3. Update the XAML on the page, so it appears similar to the following:
<UserControl x:Class="C1RichTextBoxIntro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c1rtb=
"clr-namespace:C1.Silverlight.RichTextBox;assembly=C1.Silverlight.RichTextBox">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" >
<ToggleButton x:Name="_btnBold" Content="B" Click="_btnBold_Click" />
<ToggleButton x:Name="_btnItalic" Content="I" Click="_btnItalic_Click" />
<ToggleButton x:Name="_btnUnderline" Content="U" Click="_btnUnderline_Click" />
</StackPanel>
<c1rtb:C1RichTextBox x:Name="_rtb"
Grid.Row="1"
AcceptsReturn="True"
SelectionChanged="_rtb_SelectionChanged"/>
</Grid>
</UserControl>
This markup adds a C1RichTextBox control and three buttons (bold, italic, and underline) that control its formatting. When a button is clicked, the attached event handlers are responsible for updating the format of the selection. The code in the next step accomplishes that.
4. Right-click the page and choose View Code to switch to the Code Editor.
5. Add the following code to your application:
Private Sub _btnBold_Click(sender As Object, e As RoutedEventArgs)
Dim fw As System.Nullable(Of FontWeight) = _rtb.Selection.FontWeight
_rtb.Selection.FontWeight = If(fw.HasValue AndAlso fw.Value = FontWeights.Bold, FontWeights.Normal, FontWeights.Bold)
End Sub
•C#
private void _btnBold_Click(object sender, RoutedEventArgs e)
{
FontWeight? fw = _rtb.Selection.FontWeight;
_rtb.Selection.FontWeight = fw.HasValue && fw.Value == FontWeights.Bold
? FontWeights.Normal
: FontWeights.Bold;
}
The code starts by getting the value of the FontWeight property for the current selection. Note that the value returned is nullable (hence the '?' in the type declaration). If the selection contains a mix of different font weights, the value returned is null. The code above sets the font weight to "normal" if the whole selection has a single font weight and is bold; otherwise, the code sets the font weight to "bold".
6. Add the following code to initialize the italics button:
Private Sub _btnItalic_Click(sender As Object, e As RoutedEventArgs)
Dim fs As System.Nullable(Of FontStyle) = _rtb.Selection.FontStyle
_rtb.Selection.FontStyle = If(fs.HasValue AndAlso fs.Value = FontStyles.Italic, FontStyles.Normal, FontStyles.Italic)
End Sub
•C#
private void _btnItalic_Click(object sender, RoutedEventArgs e)
{
FontStyle? fs = _rtb.Selection.FontStyle;
_rtb.Selection.FontStyle = fs.HasValue && fs.Value == FontStyles.Italic
? FontStyles.Normal
: FontStyles.Italic;
}
The code that handles the italics button is very similar to the code that handles the bold button, except it uses the FontStyle property instead of FontWeight.
7. Add the following code to initialize the underline button:
Private Sub _btnUnderline_Click(sender As Object, e As RoutedEventArgs)
If _btnUnderline.IsChecked.HasValue Then
rtb.Selection.TextDecorations = If(_btnUnderline.IsChecked.Value, C1TextDecorations.Underline, Nothing)
End If
End Sub
•C#
private void _btnUnderline_Click(object sender, RoutedEventArgs e)
{
if (_btnUnderline.IsChecked.HasValue)
{
_rtb.Selection.TextDecorations = _btnUnderline.IsChecked.Value
? C1TextDecorations.Underline
: null;
}
}
The code that handles the underline button is similar, this time using the TextDecorations property. Note that TextDecorations property returns an actual object, and thus is not a nullable property. The above code is all it takes to make the three buttons work.
8. Add the following code to implement the event handler for the SelectionChanged event:
Private Sub _rtb_SelectionChanged(sender As Object, e As EventArgs)
Dim fw As System.Nullable(Of FontWeight) = _rtb.Selection.FontWeight
_btnBold.IsChecked = fw.HasValue AndAlso fw.Value = FontWeights.Bold
Dim fs As System.Nullable(Of FontStyle) = _rtb.Selection.FontStyle
_btnItalic.IsChecked = fs.HasValue AndAlso fs.Value = FontStyles.Italic
_btnUnderline.IsChecked = (sel.TextDecorations IsNot Nothing)
End Sub
•C#
void _rtb_SelectionChanged(object sender, EventArgs e)
{
var sel = _rtb.Selection;
FontWeight? fw = _rtb.Selection.FontWeight;
_btnBold.IsChecked = fw.HasValue && fw.Value == FontWeights.Bold;
FontStyle? fs = _rtb.Selection.FontStyle;
_btnItalic.IsChecked = fs.HasValue && fs.Value == FontStyles.Italic;
_btnUnderline.IsChecked = (sel.TextDecorations != null);
}
This event handler is responsible for changing the state of the buttons as the user moves the selection. For example, selecting a word that is bold and underlined would make the buttons appear pressed.
The code uses the FontWeight, FontStyle, and TextDecorations properties as before, and sets the IsChecked property on the corresponding buttons.
What You've Accomplished
You've created a simple toolbar. When run, the application would appear similar to the following image:
You can enter text and press the bold, italic, and underline buttons to format the text as in the above image.
A full toolbar would include more buttons and controls, and would handle them in a similar fashion. ComponentOne Studio for Silverlight includes C1RichTextBoxToolbar, a complete toolbar as a separate assembly. The source code for the C1RichTextBoxToolbar control is included so you can create your own customized version. For details, see Working with C1RichTextBoxToolbar.