Format-Menü für die RichTextBox

Lies in den Artikel rein und unten bekommst Du ein unschlagbares Angebot!

Das RichTextBox-Steuerelement unter WPF offeriert eine Reihe von Formatierungsmöglichkeiten. Damit Sie diese Formatierungen komfortabel anwenden können, bauen wir in diesem Artikel ein Menü mit den gängigsten Befehlen zur Formatierung von Texten im RichTextBox-Steuerelement. Dabei können wir gleich einige der Grundlagen, die wir im Artikel “Das RichTextBox-Steuerelement” kennengelernt haben, praktisch umsetzen.

Bild 1: RichTextBox-Steuerelement mit Formatierungs-Menü

RichTextBox-Inhalte formatieren

Da das RichTextBox-Steuerelement keine offensichtlichen Steuer-elemente zum Formatieren bietet, legen wir diese einfach selbst an. Das Ergebnis soll anschließend wie in Bild 1 aussehen. Wir wollen also Schaltflächen zum Ausrichten des Absatzes, zum Einstellen fetter, kursiver und unterstrichener Schrift, zum Umwandeln von Absätzen in Auflistungen oder nummerierte Listen sowie zum Einstellen der Schriftart und -größe vorsehen.

Bild 1: RichTextBox-Steuerelement mit Formatierungs-Menü

Die Steuerelemente platzieren wir in einer zusätzlichen Zeile des Grid-Elements. Damit wir nicht alle Befehle mit Texten ausstatten müssen und da es überdies für die meisten gängigen Formatierungsbefehle gängige Icons gibt, statten wir auch unsere Schaltflächen mit passenden Icons aus. Diese fügen wir dem Unterverzeichnis images unseres Projekts hinzu (siehe Bild 2).

Bild 2: Icons im Projektmappen-Explorer

Alternative Icons direkt von Microsoft finden Sie etwa unter folgendem Link:

https://www.microsoft.com/en-us/download/details.aspxid=35825

Wir verwenden jedoch die Icons von der Seite www.iconexperience.com.

Der neuen Zeile im Grid-Element fügen wie ein StackPanel-Element mit horizontaler Ausrichtung hinzu, das vier Button-Elemente aufnimmt. Diese statten wir jeweils mit einer Bezeichnung wie btnTextAlignLeft, btnTextAlignCenter, btnTextAlignRight und btnTextAlignJustified aus und legen für das Click-Ereignis einer jeden Schaltfläche eine passende Ereignismethode an:

<StackPanel Orientation="Horizontal" Grid.Row="1">
     <Button x:Name="btnTextAlignLeft" Margin="2" Width="24" Height="24" HorizontalAlignment="Left"  
             Click="BtnTextAlignLeft_Click">
         <Image Source="images/text_align_left.ico"></Image>
     </Button>
     <Button x:Name="btnTextAlignCenter" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" 
             Click="BtnTextAlignCenter_Click">
         <Image Source="images/text_align_center.ico"></Image>
     </Button>
     <Button x:Name="btnTextAlignRight" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" 
             Click="BtnTextAlignRight_Click">
         <Image Source="images/text_align_right.ico"></Image>
     </Button>
     <Button x:Name="btnTextAlignJustified" Margin="2" Width="24" Height="24" 
             HorizontalAlignment="Left" Click="BtnTextAlignJustified_Click">
         <Image Source="images/text_align_justified.ico"></Image>
     </Button>
</StackPanel>

Die dadurch ausgelösten Methoden implementieren wir im Code behind-Modul des XAML-Fensters:

Public Class FlowDocumentInRichTextBox
     Private Sub BtnTextAlignCenter_Click(sender As Object, _
             e As RoutedEventArgs)
         EditingCommands.AlignCenter.Execute(vbNull, Me.rtb)
     End Sub
     Private Sub BtnTextAlignJustified_Click(sender As Object, _
             e As RoutedEventArgs)
         EditingCommands.AlignJustify.Execute(vbNull, Me.rtb)
     End Sub
     Private Sub BtnTextAlignLeft_Click(sender As Object, e As RoutedEventArgs)
         EditingCommands.AlignLeft.Execute(vbNull, Me.rtb)
     End Sub
     Private Sub BtnTextAlignRight_Click(sender As Object, e As RoutedEventArgs)
         EditingCommands.AlignRight.Execute(vbNull, Me.rtb)
     End Sub
End Class

Die Methoden rufen jeweils eine Methode der Klasse EditingCommands auf, in diesem Fall AlignCenter, AlignJustify, AlignLeft und AlignRight. Diese wird mit der Execute-Methode ausgeführt, wobei wir mit dem zweiten Parameter dieser Methode das Ziel der Methode angeben – in diesem Fall das RichTextBox-Element.

Das gleiche Ergebnis erhalten wir übrigens, wenn wir die entsprechenden Command-Elemente dem Attribut Command der Schaltflächen zuweisen. Dazu fügen wir einen neuen Satz mit vier weiteren Schaltflächen zum .xaml-Code hinzu. Jede Schaltfläche erhält das Attribut Command mit dem Befehl, den wir zuvor in der Ereignisprozedur aufgerufen haben – zum Beispiel EditingCommands.AlignLeft.

Das allein bewirkt allerdings noch nichts, wenn wir nicht angeben, auf welches Steuer-element sich die Aktion auswirken soll. Dazu stellen wir das Attribut CommandTarget jeweils auf den Wert {Binding ElementName=rtb} ein, wobei rtb der Name des RichTextBox-Steuerelements ist:

<Button x:Name="btnTextAlignLeftCommand" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" Command="EditingCommands.AlignLeft" CommandTarget="{Binding ElementName=rtb}">
     <Image Source="images/text_align_left.ico"></Image>
</Button>
<Button x:Name="btnTextAlignCenterCommand" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" Command="EditingCommands.AlignCenter" CommandTarget="{Binding ElementName=rtb}">
     <Image Source="images/text_align_center.ico"></Image>
</Button>
<Button x:Name="btnTextAlignRightCommand" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" Command="EditingCommands.AlignRight" CommandTarget="{Binding ElementName=rtb}">
     <Image Source="images/text_align_right.ico"></Image>
</Button>
<Button x:Name="btnTextAlignJustifiedCommand" Margin="2" Width="24" Height="24" HorizontalAlignment="Left" Command="EditingCommands.AlignJustify" CommandTarget="{Binding ElementName=rtb}">
     <Image Source="images/text_align_justified.ico"></Image>
</Button>

Das Ergebnis sieht wie in Bild 3 aus (hier zunächst nur mit dem ersten Satz der vier Schaltflächen – die Übrigen ergänzen wir auf den folgenden Seiten).