Rich TextBox Editor in WPF

In this article we will be discuss the Rich TextBox Editor In WPF. In this example we use the Application commands. It provides application related commands like cut, copy, open, paste etc. Now we look at the example:

For this first we create a Toolbar like this and set the Application Commands in it:

<ToolBar Name="MyMainToolBar" Height="40" DockPanel.Dock="Top"> 

<Button Style="{StaticResource FormatTheImage}" Command="ApplicationCommands.Cut" ToolTip="Cut">
<Image Source="Image\Cut.png" Height="15" Width="18"></Image>
                </Button>
<Button Style="{StaticResource FormatTheImage}"
Command="ApplicationCommands.Copy" ToolTip="Copy">
<Image Source="Image\Copy.png" Height="15" Width="18"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="ApplicationCommands.Paste" ToolTip="Paste">
<Image Source="Image\Paste.png" Height="15" Width="18"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}" Command="ApplicationCommands.Undo" ToolTip="Undo">
<Image Source="Image\Undo.png" Height="17" Width="16"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="ApplicationCommands.Redo" ToolTip="Redo">
<Image Source="Image\Redo.png" Height="15" Width="18"></Image>
</Button>
 
<Button Style="{StaticResource FormatTheText}" Command="EditingCommands.ToggleBold" ToolTip="Bold">
<TextBlock FontWeight="Bold">B</TextBlock>
</Button>
<Button Style="{StaticResource FormatTheText}" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
<TextBlock FontStyle="Italic" FontWeight="Bold">I</TextBlock>
</Button>
<Button Style="{StaticResource FormatTheText}" Command="EditingCommands.ToggleUnderline" ToolTip="Underline">
<TextBlock TextDecorations="Underline" FontWeight="Bold">U</TextBlock>
</Button>

<Button Style="{StaticResource FormatTheImage}"
Command="EditingCommands.ToggleBullets" ToolTip="Bullets">
<Image Source="Image\Bullets.png" Height="62" Width="38"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}" Command="EditingCommands.ToggleNumbering" ToolTip="Numbering">
<Image Source="Image\Numbering.png" Height="34" Width="29"></Image>

</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="EditingCommands.AlignLeft" ToolTip="Align Left">
<Image Source="Image\Letf Align.png" Height="62" Width="24"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="EditingCommands.AlignCenter" ToolTip="Align Center">
<Image Source="Image\Center Align.png" Height="62" Width="24"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="EditingCommands.AlignRight" ToolTip="Align Right">
<Image Source="Image\Right Align.png" Height="62" Width="24"></Image>
</Button>
<Button Style="{StaticResource FormatTheImage}"
Command="EditingCommands.AlignJustify" ToolTip="Align Justify">
<Image Source="Image\Justify.png" Height="62" Width="24"></Image>
</Button>

In this case, we set the style of the Button and the Image like this:

<Grid>
        <Grid.Resources>
            <Style TargetType="{x:Type Button}" x:Key="FormatTheText">
                <Setter Property="FontFamily" Value="Times New Roman"></Setter>
                <Setter Property="Width" Value="40"></Setter>
                <Setter Property="FontSize" Value ="15"></Setter>
                <Setter Property="CommandTarget" Value="{Binding ElementName=MyMainRTB
"></Setter>
            </Style>

            <Style TargetType="{x:Type Button}" x:Key="FormatTheImage">
                <Setter Property="Width" Value="40"></Setter>
                <Setter Property="CommandTarget" Value="{Binding ElementName=MyMainRTB}"></Setter>
            </Style>
        </Grid.Resources>

    </Grid>

Here we take an Image folder for the Images.

The output will be:



After that we take a RichTextBox like this:

<RichTextBox Name="MyMainRTB" AcceptsTab="True" >
</RichTextBox>

The output will be:



In this example we use the Bold property.