Vue d'ensemble de RichTextBox

  • Article

Le contrôle RichTextBox vous permet d'afficher ou de modifier le contenu d'un flux, y compris les paragraphes, images, tableaux, etc. Cette rubrique présente la classe TextBox et fournit des exemples de la manière de l'utiliser en Extensible Application Markup Language (XAML) et C#.

Cette rubrique comprend les sections suivantes.

  • TextBox ou RichTextBox ?
  • Création d'un RichTextBox
  • Vérification de l'orthographe en temps réel
  • Menu contextuel
  • Commandes d'édition
  • Détecter quand le contenu est modifié
  • Enregistrer, charger et imprimer le contenu d'un RichTextBox
  • Rubriques connexes

TextBox ou RichTextBox ?

RichTextBox et TextBox permettent tous deux aux utilisateurs de modifier du texte mais les deux contrôles s'utilisent dans des scénarios différents. RichTextBox est un meilleur choix lorsque l'utilisateur doit modifier du texte mis en forme, des images, des tableaux ou un autre contenu riche. Par exemple, la modification d'un document, d'un article ou d'un blog qui nécessite une mise en forme, des images, etc. est mieux réalisée à l'aide de RichTextBox. Un TextBox nécessite moins de ressources système qu'un RichTextBox et est idéal lorsque seul du texte brut doit être modifié (par exemple, utilisation dans les formulaires). Consultez Vue d'ensemble de TextBox pour plus d'informations TextBox. Le tableau suivante résume les fonctionnalités principales de TextBox et RichTextBox.

Contrôle

Vérification de l'orthographe en temps réel

Menu contextuel

Commandes de mise en forme telles que ToggleBold (Ctr+B)

Contenu FlowDocument comme des images, des paragraphes, des tableaux, etc.

TextBox

Oui

Oui

Non

Non.

RichTextBox

Oui

Oui

Oui

Oui

Remarque : Bien que TextBox ne prenne pas en charge les commandes de mise en forme apparentées telles que ToggleBold (Ctr+B), les deux contrôles prennent en charge de nombreuses commandes de base comme MoveToLineEnd.

Les fonctionnalités énumérées dans le tableau ci-dessus sont abordées plus en détail par la suite.

Création d'un RichTextBox

Le code suivant montre comment créer un RichTextBox permettant à l'utilisateur de modifier du contenu enrichi.

<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>

Précisons que le contenu modifié dans un RichTextBox est un contenu de flux. Un contenu de flux peut comprendre de nombres types d'éléments dont du texte mis en forme, des images, des listes et des tableaux. Consultez Vue d'ensemble des documents dynamiques pour plus d'informations sur les documents dynamiques. Pour pouvoir abriter du contenu de flux, un RichTextBox contient un objet FlowDocument, lequel contient en fait le contenu modifiable. Pour illustrer un contenu de flux dans un RichTextBox, le code suivant montre comment créer un RichTextBox avec un paragraphe et du texte gras.

<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>


Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Documents
Namespace SDKSample
    Partial Public Class BasicRichTextBoxWithContentExample
        Inherits Page
        Public Sub New()
            Dim myStackPanel As New StackPanel()

            ' Create a FlowDocument to contain content for the RichTextBox.
            Dim myFlowDoc As New FlowDocument()

            ' Create a Run of plain text and some bold text.
            Dim myRun As New Run("This is flow content and you can ")
            Dim myBold As New Bold(New Run("edit me!"))

            ' Create a paragraph and add the Run and Bold to it.
            Dim myParagraph As New Paragraph()
            myParagraph.Inlines.Add(myRun)
            myParagraph.Inlines.Add(myBold)

            ' Add the paragraph to the FlowDocument.
            myFlowDoc.Blocks.Add(myParagraph)

            Dim myRichTextBox As New RichTextBox()

            ' Add initial content to the RichTextBox.
            myRichTextBox.Document = myFlowDoc

            myStackPanel.Children.Add(myRichTextBox)
            Me.Content = myStackPanel

        End Sub
    End Class
End Namespace

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;

        }
    }
}

L'illustration suivante montre le rendu de cet exemple.

RichTextBox avec contenu

Des éléments comme Paragraph et Bold déterminent l'apparence du contenu d'un RichTextBox. Lorsqu'un utilisateur apporte des changements au contenu du RichTextBox, il modifie le contenu du flux. Pour en savoir plus sur les fonctionnalités du contenu de flux et sur leur utilisation, consultez Vue d'ensemble des documents dynamiques.

Remarque : Un contenu de flux placé dans un RichTextBox ne se comporte pas tout à fait de la même façon qu'un contenu de flux d'autres contrôles. Par exemple, RichTextBox ne comporte pas de colonnes et ne permet donc pas de redimensionnement automatique. Par ailleurs, RichTextBox ne dispose pas de fonctionnalités intégrées de recherche, de mode d'affichage, de navigation entre les pages et de zoom.

Vérification de l'orthographe en temps réel

Vous pouvez activer la vérification de l'orthographe en temps réel dans un TextBox ou un RichTextBox. Lorsque la vérification de l'orthographe est activée, une ligne rouge apparaît sous les mots mal orthographiés (voir l'illustration ci-dessous).

Textbox avec vérification orthographique

Consultez Comment : activer la vérification de l'orthographe dans un contrôle d'édition de texte pour savoir comment activer la vérification de l'orthographe.

Par défaut, TextBox et RichTextBox ont un menu contextuel qui apparaît lorsqu'un utilisateur clique avec le bouton droit à l'intérieur du contrôle. Le menu contextuel autorise l'utilisateur à couper, copier ou coller (voir l'illustration ci-dessous).

TextBox avec menu contextuel

Vous pouvez créer votre propre menu contextuel personnalisé pour remplacer celui par défaut. Pour plus d'informations, consultez Comment : positionner un menu contextuel personnalisé dans un RichTextBox.

Commandes d'édition

Les commandes d'édition permettent aux utilisateurs de mettre en forme le contenu modifiable d'un RichTextBox. En dehors des commandes d'édition de base, RichTextBox inclut des commandes de mise en forme que TextBox ne prend pas en charge. Par exemple, lorsqu'un utilisateur apporte des modifications dans un RichTextBox, il peut appuyer sur Ctr+B pour basculer la mise en forme en caractères gras. Pour obtenir une liste exhaustive des commandes disponibles, consultez EditingCommands. Vous pouvez utiliser les raccourcis clavier et associer des commandes à d'autres contrôles comme des boutons. L'exemple suivant montre comment créer une barre d'outils simple contenant des boutons avec lesquels l'utilisateur peut modifier la mise en forme du texte.

<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>

L'illustration suivante montre le résultat de cet exemple.

RichTextBox avec barre d'outils

Détecter quand le contenu est modifié

L'événement TextChanged doit être généralement utilisé pour détecter chaque fois que le texte d'un TextBox ou d'un RichTextBox est modifié, et non KeyDown comme vous pourriez vous y attendre. Pour obtenir un exemple, consultez Comment : détecter la modification du texte figurant dans un TextBox.

Enregistrer, charger et imprimer le contenu d'un RichTextBox

L'exemple suivant montre comment enregistrer le contenu d'un RichTextBox dans un fichier, le recharger de nouveau dans le RichTextBox, et l'imprimer. Vous trouverez ci-dessous le code de l'exemple.

<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>

Vous trouverez ci-dessous le code-behind de l'exemple.


Imports System
Imports System.IO
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Media

Namespace SDKSample

    Partial Public Class SaveLoadPrintRTB
        Inherits Page

        ' Handle "Save RichTextBox Content" button click.
        Private Sub SaveRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs)

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

        ' Handle "Load RichTextBox Content" button click.
        Private Sub LoadRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Send URL string specifying what file to retrieve XAML
            ' from to load into the RichTextBox.
            LoadXamlPackage("C:\test.xaml")
        End Sub

        ' Handle "Print RichTextBox Content" button click.
        Private Sub PrintRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs)
            PrintCommand()
        End Sub

        ' Save XAML in RichTextBox to a file specified by _fileName
        Private Sub SaveXamlPackage(ByVal _fileName As String)
            Dim range As TextRange
            Dim fStream As FileStream
            range = New TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd)
            fStream = New FileStream(_fileName, FileMode.Create)
            range.Save(fStream, DataFormats.XamlPackage)
            fStream.Close()
        End Sub

        ' Load XAML into RichTextBox from a file specified by _fileName
        Private Sub LoadXamlPackage(ByVal _fileName As String)
            Dim range As TextRange
            Dim fStream As FileStream
            If File.Exists(_fileName) Then
                range = New TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd)
                fStream = New FileStream(_fileName, FileMode.OpenOrCreate)
                range.Load(fStream, DataFormats.XamlPackage)
                fStream.Close()
            End If
        End Sub

        ' Print RichTextBox content
        Private Sub PrintCommand()
            Dim pd As New PrintDialog()
            If (pd.ShowDialog() = True) Then
                'use either one of the below      
                pd.PrintVisual(TryCast(richTB, Visual), "printing as visual")
                pd.PrintDocument(((CType(richTB.Document, IDocumentPaginatorSource)).DocumentPaginator), "printing as paginator")
            End If
        End Sub
    End Class
End Namespace

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");
            }
        }
    }
}

Voir aussi

Concepts

Vue d'ensemble de TextBox

Autres ressources

Rubriques "Comment utiliser le RichTextBox"