Reader Level:
ARTICLE

Rich TextBox Editor in WPF

Posted by Mahak Gupta Articles | WPF May 28, 2012
In this article we will be discuss the Rich TextBox Editor In WPF.
  • 0
  • 0
  • 12974
Download Files:
 

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:

RichBox1.jpg

After that we take a RichTextBox like this:

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

The output will be:

RichBox2.jpg

In this example we use the Bold property.

COMMENT USING

Trending up