Freigeben über


Übersicht über RichTextBox

Aktualisiert: November 2007

Das RichTextBox-Steuerelement ermöglicht es Ihnen, fortlaufenden Inhalt, einschließlich Absätze, Bilder, Tabellen und mehr, anzuzeigen oder zu bearbeiten. In diesem Thema wird die TextBox-Klasse eingeführt. Außerdem sind Beispiele für ihre Verwendung in Extensible Application Markup Language (XAML) und C# enthalten.

Dieses Thema enthält folgende Abschnitte.

  • TextBox oder RichTextBox?
  • Erstellen eines RichTextBox-Elements
  • Rechtschreibprüfung in Echtzeit
  • Kontextmenü
  • Bearbeitungsbefehle
  • Erkennen von Inhaltsänderungen
  • Speichern, Laden und Drucken von RichTextBox-Inhalt
  • Verwandte Abschnitte

TextBox oder RichTextBox?

Sowohl mit RichTextBox als auch mit TextBox können Benutzer Text bearbeiten. Die zwei Steuerelemente werden jedoch in unterschiedlichen Szenarien eingesetzt. Ein RichTextBox ist die bessere Wahl, wenn der Benutzer formatierten Text, Bilder, Tabellen oder andere umfangreiche Inhalte bearbeiten muss. So lässt sich das Bearbeiten von Dokumenten, Artikeln oder Blogs, die Formatierung, Bilder usw. benötigen, am besten mit einem RichTextBox erreichen. Ein TextBox erfordert weniger Systemressourcen als ein RichTextBox. Es ist ideal, wenn nur reiner Text bearbeitet werden muss (d. h. bei der Verwendung in Formularen). Weitere Informationen zum TextBox finden Sie unter Übersicht über TextBox. In der unten stehenden Tabelle werden die wichtigsten Features von TextBox und RichTextBox zusammengefasst.

Steuerelement

Rechtschreibprüfung in Echtzeit

Kontextmenü

Formatierungsbefehle wie ToggleBold (STRG+B)

FlowDocument-Inhalte wie Bilder, Absätze, Tabellen usw.

TextBox

Ja

Ja

Nein

Nein.

RichTextBox

Ja

Ja

Ja

Ja

Hinweis: Obwohl TextBox keine formatierungsbezogenen Befehle wie ToggleBold (STRG+B) unterstützt, werden viele Grundbefehle, z. B. MoveToLineEnd, von beiden Steuerelementen unterstützt.

Die Features aus der vorstehenden Tabelle werden später ausführlicher behandelt.

Erstellen eines RichTextBox-Elements

Der folgende Code veranschaulicht, wie ein RichTextBox-Element erstellt wird, in dem ein Benutzer umfangreichen Inhalt bearbeiten kann.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <!-- A RichTextBox with no initial content in it. -->
    <RichTextBox />

</Page>

Genauer gesagt handelt es sich bei dem Inhalt, der in einem RichTextBox bearbeitet wird, um fortlaufenden Inhalt. Fortlaufender Inhalt kann viele Elementtypen einschließlich formatierten Texts, Bilder, Listen und Tabellen enthalten. Ausführliche Informationen zu Flussdokumenten finden Sie unter Übersicht über Flussdokumente. Für die Aufnahme von fortlaufendem Inhalt hostet ein RichTextBox-Element ein FlowDocument-Objekt, das wiederum den bearbeitbaren Inhalt enthält. Zur Veranschaulichung von fortlaufendem Inhalt in einem RichTextBox zeigt der folgende Code, wie ein RichTextBox mit einem Absatz und fett formatiertem Text erstellt wird.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel>
    <RichTextBox>
      <FlowDocument>
        <Paragraph>
          This is flow content and you can <Bold>edit me!</Bold>
        </Paragraph>
      </FlowDocument>
    </RichTextBox>
  </StackPanel>

</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Documents;
namespace SDKSample
{
    public partial class BasicRichTextBoxWithContentExample : Page
    {
        public BasicRichTextBoxWithContentExample()
        {
            StackPanel myStackPanel = new StackPanel();

            // Create a FlowDocument to contain content for the RichTextBox.
            FlowDocument myFlowDoc = new FlowDocument();

            // Create a Run of plain text and some bold text.
            Run myRun = new Run("This is flow content and you can ");
            Bold myBold = new Bold(new Run("edit me!"));

            // Create a paragraph and add the Run and Bold to it.
            Paragraph myParagraph = new Paragraph();
            myParagraph.Inlines.Add(myRun);
            myParagraph.Inlines.Add(myBold);

            // Add the paragraph to the FlowDocument.
            myFlowDoc.Blocks.Add(myParagraph);

            RichTextBox myRichTextBox = new RichTextBox();

            // Add initial content to the RichTextBox.
            myRichTextBox.Document = myFlowDoc;

            myStackPanel.Children.Add(myRichTextBox);
            this.Content = myStackPanel;

        }
    }
}

Die folgende Abbildung zeigt, wie dieses Beispiel gerendert wird.

RichTextBox mit Inhalt

Elemente wie Paragraph und Bold bestimmen, wie der Inhalt in einem RichTextBox angezeigt wird. Wenn ein Benutzer RichTextBox-Inhalt bearbeitet, wird damit dieser fortlaufende Inhalt geändert. Weitere Informationen über die Features von fortlaufendem Inhalt und die Arbeit mit ihnen finden Sie unter Übersicht über Flussdokumente.

Hinweis: Fortlaufender Inhalt in einer RichTextBox verhält sich nicht genau wie in anderen Steuerelementen enthaltener fortlaufender Inhalt. Zum Beispiel gibt es in einem RichTextBox-Element keine Spalten und somit auch keine automatische Größenanpassung. Auch die integrierten Features wie die Suchfunktion, der Anzeigemodus, die Seitennavigation und die Zoomfunktion stehen in einem RichTextBox nicht zur Verfügung.

Rechtschreibprüfung in Echtzeit

Sie können die Rechtschreibprüfung in Echtzeit in einem TextBox oder einem RichTextBox aktivieren. Bei aktivierter Rechtschreibprüfung wird eine rote Linie unter allen falsch geschriebenen Wörtern angezeigt (siehe Abbildung unten).

TextBox mit Rechtschreibprüfung

Weitere Informationen zur Aktivierung der Rechtschreibprüfung finden Sie unter Gewusst wie: Aktivieren der Rechtschreibprüfung in einem Textbearbeitungssteuerelement.

Kontextmenü

Standardmäßig verfügen TextBox und RichTextBox über ein Kontextmenü, das angezeigt wird, wenn ein Benutzer mit der rechten Maustaste auf das Steuerelement klickt. Mithilfe des Kontextmenüs kann der Benutzer die Vorgänge Ausschneiden, Kopieren bzw. Einfügen ausführen (siehe Abbildung unten).

TextBox mit Kontextmenü

Sie können ein eigenes benutzerdefiniertes Kontextmenü erstellen, um das Standardmenü zu überschreiben. Weitere Informationen finden Sie unter Gewusst wie: Positionieren eines benutzerdefinierten Kontextmenüs in einem "RichTextBox"-Element.

Bearbeitungsbefehle

Bearbeitungsbefehle ermöglichen es Benutzern, bearbeitbaren Inhalt in einem RichTextBox zu formatieren. Außer grundlegenden Bearbeitungsbefehlen umfasst ein RichTextBox Formatierungsbefehle, die ein TextBox nicht unterstützt. Bei der Arbeit in einem RichTextBox kann zum Beispiel durch Drücken von STRG+B die Fettformatierung von Text aktiviert oder deaktiviert werden. Eine vollständige Liste der verfügbaren Befehle finden Sie unter EditingCommands. Neben der Verwendung von Tastenkombinationen können Sie Befehle mit anderen Steuerelementen wie Schaltflächen verknüpfen. Im folgenden Beispiel wird veranschaulicht, wie Sie eine einfache Symbolleiste mit Schaltflächen erstellen, mit denen die Textformatierung geändert werden kann.

<Window x:Class="RichTextBoxInputPanelDemo.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" Height="400" Width="600"
    >
  <Grid>

    <!-- Set the styles for the tool bar. -->
    <Grid.Resources>
      <Style TargetType="{x:Type Button}" x:Key="formatTextStyle">
        <Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
        <Setter Property="Width" Value="30"></Setter>
        <Setter Property="FontSize" Value ="14"></Setter>
        <Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
      </Style>

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

    <DockPanel Name="mainPanel">

      <!-- This tool bar contains all the editing buttons. -->
      <ToolBar Name="mainToolBar" Height="30" DockPanel.Dock="Top">

        <Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Cut" ToolTip="Cut">
          <Image Source="Images\EditCut.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Copy" ToolTip="Copy">
          <Image Source="Images\EditCopy.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Paste" ToolTip="Paste">
          <Image Source="Images\EditPaste.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Undo" ToolTip="Undo">
          <Image Source="Images\EditUndo.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Redo" ToolTip="Redo">
          <Image Source="Images\EditRedo.png"></Image>
        </Button>

        <Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleBold" ToolTip="Bold">
          <TextBlock FontWeight="Bold">B</TextBlock>
        </Button>
        <Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
          <TextBlock FontStyle="Italic" FontWeight="Bold">I</TextBlock>
        </Button>
        <Button Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleUnderline" ToolTip="Underline">
          <TextBlock TextDecorations="Underline" FontWeight="Bold">U</TextBlock>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.IncreaseFontSize" ToolTip="Grow Font">
          <Image Source="Images\CharacterGrowFont.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.DecreaseFontSize" ToolTip="Shrink Font">
          <Image Source="Images\CharacterShrinkFont.png"></Image>
        </Button>

        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.ToggleBullets" ToolTip="Bullets">
          <Image Source="Images\ListBullets.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.ToggleNumbering" ToolTip="Numbering">
          <Image Source="Images/ListNumbering.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignLeft" ToolTip="Align Left">
          <Image Source="Images\ParagraphLeftJustify.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignCenter" ToolTip="Align Center">
          <Image Source="Images\ParagraphCenterJustify.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignRight" ToolTip="Align Right">
          <Image Source="Images\ParagraphRightJustify.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignJustify" ToolTip="Align Justify">
          <Image Source="Images\ParagraphFullJustify.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.IncreaseIndentation" ToolTip="Increase Indent">
          <Image Source="Images\ParagraphIncreaseIndentation.png"></Image>
        </Button>
        <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.DecreaseIndentation" ToolTip="Decrease Indent">
          <Image Source="Images\ParagraphDecreaseIndentation.png"></Image>
        </Button>

      </ToolBar>

      <!-- By default pressing tab moves focus to the next control. Setting AcceptsTab to true allows the 
           RichTextBox to accept tab characters. -->
      <RichTextBox Name="mainRTB" AcceptsTab="True"></RichTextBox>
    </DockPanel>
  </Grid>
</Window>

Die folgende Abbildung zeigt, wie dieses Beispiel angezeigt wird.

RichTextBox mit ToolBar

Das vollständige Beispiel finden Sie unter Beispiel für das Erstellen einer RichTextBox mit einer Symbolleiste. Zusätzlich finden Sie unter Beispiel zu EditingCommands ein Beispiel für Bearbeitungsbefehle, die mit einem RichTextBox verwendet werden.

Erkennen von Inhaltsänderungen

Sie sollten i. d. R. mit dem TextChanged-Ereignis ermitteln, wann Text in einem TextBox oder RichTextBox geändert wird, und dafür nicht, wie zu erwarten wäre, KeyDown verwenden. Ein Beispiel finden Sie unter Gewusst wie: Erkennen von Änderungen an Text in einem Textfeld.

Speichern, Laden und Drucken von RichTextBox-Inhalt

Im folgenden Beispiel wird gezeigt, wie Sie den Inhalt eines RichTextBox-Elements in eine Datei speichern, den Inhalt dann wieder in das RichTextBox-Element laden und anschließend den Inhalt drucken. Im Folgenden finden Sie das Markup für das Beispiel.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.SaveLoadPrintRTB" >

  <StackPanel>
    <RichTextBox Name="richTB">
      <FlowDocument>
        <Paragraph>
          <Run>Paragraph 1</Run>
        </Paragraph>
      </FlowDocument>
    </RichTextBox>

    <Button Click="SaveRTBContent">Save RTB Content</Button>
    <Button Click="LoadRTBContent">Load RTB Content</Button>
    <Button Click="PrintRTBContent">Print RTB Content</Button>
  </StackPanel>

</Page>

Im Folgenden finden Sie den Code-Behind für das Beispiel.

using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;

namespace SDKSample
{

    public partial class SaveLoadPrintRTB : Page
    {

        // Handle "Save RichTextBox Content" button click.
        void SaveRTBContent(Object sender, RoutedEventArgs args)
        {

            // Send an arbitrary URL and file name string specifying
            // the location to save the XAML in.
            SaveXamlPackage("C:\\test.xaml");
        }

        // Handle "Load RichTextBox Content" button click.
        void LoadRTBContent(Object sender, RoutedEventArgs args)
        {
            // Send URL string specifying what file to retrieve XAML
            // from to load into the RichTextBox.
            LoadXamlPackage("C:\\test.xaml");
        }

        // Handle "Print RichTextBox Content" button click.
        void PrintRTBContent(Object sender, RoutedEventArgs args)
        {
            PrintCommand();
        }

        // Save XAML in RichTextBox to a file specified by _fileName
        void SaveXamlPackage(string _fileName)
        {
            TextRange range;
            FileStream fStream;
            range = new TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd);
            fStream = new FileStream(_fileName, FileMode.Create);
            range.Save(fStream, DataFormats.XamlPackage);
            fStream.Close();
        }

        // Load XAML into RichTextBox from a file specified by _fileName
        void LoadXamlPackage(string _fileName)
        {
            TextRange range;
            FileStream fStream;
            if (File.Exists(_fileName))
            {
                range = new TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd);
                fStream = new FileStream(_fileName, FileMode.OpenOrCreate);
                range.Load(fStream, DataFormats.XamlPackage);
                fStream.Close();
            }
        }

        // Print RichTextBox content
        private void PrintCommand()
        {
            PrintDialog pd = new PrintDialog();
            if ((pd.ShowDialog() == true))
            {
                //use either one of the below      
                pd.PrintVisual(richTB as Visual, "printing as visual");
                pd.PrintDocument((((IDocumentPaginatorSource)richTB.Document).DocumentPaginator), "printing as paginator");
            }
        }
    }
}

Siehe auch

Aufgaben

Beispiel zu EditingCommands

Demo zu Editing Examiner

Demo für Editor

Beispiel für das Erstellen einer RichTextBox mit einer Symbolleiste

Konzepte

Übersicht über TextBox

Weitere Ressourcen

Gewusst-wie-Themen zu RichTextBox