{"id":55000205,"date":"2020-02-01T00:00:00","date_gmt":"2020-06-15T11:56:37","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=205"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"FormatMenue_fuer_die_RichTextBox","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/FormatMenue_fuer_die_RichTextBox\/","title":{"rendered":"Format-Menü für die RichTextBox"},"content":{"rendered":"

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.<\/b><\/p>\n

\"RichTextBox-Steuerelement<\/p>\n

Bild 1: RichTextBox-Steuerelement mit Formatierungs-Menü<\/span><\/b><\/p>\n

RichTextBox-Inhalte formatieren<\/b><\/p>\n

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.<\/p>\n

\"RichTextBox-Steuerelement<\/p>\n

Bild 1: RichTextBox-Steuerelement mit Formatierungs-Menü<\/span><\/b><\/p>\n

Die Steuerelemente platzieren wir in einer zusätzlichen Zeile des Grid<\/b>-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 <\/b>unseres Projekts hinzu (siehe Bild 2). <\/p>\n

\"Icons<\/p>\n

Bild 2: Icons im Projektmappen-Explorer<\/span><\/b><\/p>\n

Alternative Icons direkt von Microsoft finden Sie etwa unter folgendem Link:<\/p>\n

https:\/\/www.microsoft.com\/en-us\/download\/details.aspxid=35825<\/pre>\n
Wir verwenden jedoch die Icons von der Seite www.iconexperience.com<\/b>.<\/p>\n
Der neuen Zeile im Grid<\/b>-Element fügen wie ein StackPanel<\/b>-Element mit horizontaler Ausrichtung hinzu, das vier Button<\/b>-Elemente aufnimmt. Diese statten wir jeweils mit einer Bezeichnung wie btnTextAlignLeft<\/b>, btnTextAlignCenter<\/b>, btnTextAlignRight<\/b> und btnTextAlignJustified <\/b>aus und legen für das Click<\/b>-Ereignis einer jeden Schaltfläche eine passende Ereignismethode an:<\/p>\n
<StackPanel Orientation=\"Horizontal\" Grid.Row=\"1\">\r\n     <Button x:Name=\"btnTextAlignLeft\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\"  \r\n             Click=\"BtnTextAlignLeft_Click\">\r\n         <Image Source=\"images\/text_align_left.ico\"><\/Image>\r\n     <\/Button>\r\n     <Button x:Name=\"btnTextAlignCenter\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" \r\n             Click=\"BtnTextAlignCenter_Click\">\r\n         <Image Source=\"images\/text_align_center.ico\"><\/Image>\r\n     <\/Button>\r\n     <Button x:Name=\"btnTextAlignRight\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" \r\n             Click=\"BtnTextAlignRight_Click\">\r\n         <Image Source=\"images\/text_align_right.ico\"><\/Image>\r\n     <\/Button>\r\n     <Button x:Name=\"btnTextAlignJustified\" Margin=\"2\" Width=\"24\" Height=\"24\" \r\n             HorizontalAlignment=\"Left\" Click=\"BtnTextAlignJustified_Click\">\r\n         <Image Source=\"images\/text_align_justified.ico\"><\/Image>\r\n     <\/Button>\r\n<\/StackPanel><\/pre>\n
Die dadurch ausgelösten Methoden implementieren wir im Code behind-Modul des XAML-Fensters:<\/p>\n
Public Class<\/span> FlowDocumentInRichTextBox\r\n     Private <\/span>Sub BtnTextAlignCenter_Click(sender As Object<\/span>, _\r\n             e As <\/span>RoutedEventArgs)\r\n         EditingCommands.AlignCenter.Execute(vbNull, Me.rtb)\r\n     End Sub\r\n     Private <\/span>Sub BtnTextAlignJustified_Click(sender As Object<\/span>, _\r\n             e As <\/span>RoutedEventArgs)\r\n         EditingCommands.AlignJustify.Execute(vbNull, Me.rtb)\r\n     End Sub\r\n     Private <\/span>Sub BtnTextAlignLeft_Click(sender As Object<\/span>, e As <\/span>RoutedEventArgs)\r\n         EditingCommands.AlignLeft.Execute(vbNull, Me.rtb)\r\n     End Sub\r\n     Private <\/span>Sub BtnTextAlignRight_Click(sender As Object<\/span>, e As <\/span>RoutedEventArgs)\r\n         EditingCommands.AlignRight.Execute(vbNull, Me.rtb)\r\n     End Sub\r\nEnd Class<\/span><\/pre>\n
Die Methoden rufen jeweils eine Methode der Klasse EditingCommands <\/b>auf, in diesem Fall AlignCenter<\/b>, AlignJustify<\/b>, AlignLeft <\/b>und AlignRight<\/b>. Diese wird mit der Execute<\/b>-Methode ausgeführt, wobei wir mit dem zweiten Parameter dieser Methode das Ziel der Methode angeben – in diesem Fall das RichTextBox<\/b>-Element.<\/p>\n
Das gleiche Ergebnis erhalten wir übrigens, wenn wir die entsprechenden Command<\/b>-Elemente dem Attribut Command <\/b>der Schaltflächen zuweisen. Dazu fügen wir einen neuen Satz mit vier weiteren Schaltflächen zum .xaml<\/b>-Code hinzu. Jede Schaltfläche erhält das Attribut Command <\/b>mit dem Befehl, den wir zuvor in der Ereignisprozedur aufgerufen haben – zum Beispiel EditingCommands.AlignLeft<\/b>.<\/p>\n
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 <\/b>jeweils auf den Wert {Binding ElementName=rtb} <\/b>ein, wobei rtb <\/b>der Name des RichTextBox<\/b>-Steuerelements ist:<\/p>\n
<Button x:Name=\"btnTextAlignLeftCommand\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" Command=\"EditingCommands.AlignLeft\" CommandTarget=\"{Binding ElementName=rtb}\">\r\n     <Image Source=\"images\/text_align_left.ico\"><\/Image>\r\n<\/Button>\r\n<Button x:Name=\"btnTextAlignCenterCommand\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" Command=\"EditingCommands.AlignCenter\" CommandTarget=\"{Binding ElementName=rtb}\">\r\n     <Image Source=\"images\/text_align_center.ico\"><\/Image>\r\n<\/Button>\r\n<Button x:Name=\"btnTextAlignRightCommand\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" Command=\"EditingCommands.AlignRight\" CommandTarget=\"{Binding ElementName=rtb}\">\r\n     <Image Source=\"images\/text_align_right.ico\"><\/Image>\r\n<\/Button>\r\n<Button x:Name=\"btnTextAlignJustifiedCommand\" Margin=\"2\" Width=\"24\" Height=\"24\" HorizontalAlignment=\"Left\" Command=\"EditingCommands.AlignJustify\" CommandTarget=\"{Binding ElementName=rtb}\">\r\n     <Image Source=\"images\/text_align_justified.ico\"><\/Image>\r\n<\/Button><\/pre>\n
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).<\/p>\n
\"Ausrichten<\/p>\n
Bild 3: Ausrichten von Text mit selbstgebauten Schaltflächen<\/span><\/b><\/p>\n
Damit Sie schnell im RichTextBox<\/b>-Element arbeiten können, steht für die meisten Befehle auch ein eingebauter Tastenkombination bereit – für die wichtigsten drei der vier oben vorgestellten Befehle beispielsweise mit den folgenden Tastenkombinationen:<\/p>\n