Compartilhar via

Visão geral de RichTextBox

  • Artigo

O controle RichTextBox permite que você exiba ou edite o conteúdo de fluxo de conteúdo, incluindo parágrafos, imagens, tabelas e muito mais. Este tópico apresenta a classe TextBox e fornece exemplos de como usá-la tanto em Extensible Application Markup Language (XAML) quanto em C#.

Este tópico contém as seguintes seções.

  • TextBox ou RichTextBox?
  • Criando um RichTextBox
  • Correção ortográfica em tempo real
  • Menus de contexto
  • Editando comandos
  • Detectando quando o conteúdo for alterado
  • Salvar, carregar e imprimir conteúdo RichTextBox
  • Tópicos relacionados

TextBox ou RichTextBox?

Ambos os RichTextBox e TextBox permitem que os usuários editem texto, no entanto, os dois controles são usados em diferentes cenários. Um RichTextBox é uma opção melhor quando for necessário que o usuário edite texto formatado, imagens, tabelas ou outro conteúdo ricos. Por exemplo, a edição de um documento, artigo ou blog que requer formatação, imagens, etc. é melhor realizada usando um RichTextBox. A TextBox requer menos recursos do sistema e, em seguida, um RichTextBox e é ideal quando precisa ser editado (ou seja, apenas texto sem formatação uso em formulários). Consulte Visão geral sobre TextBox para obter mais informações em TextBox. A tabela abaixo resume os principais recursos de TextBox e RichTextBox.

Controle

Correção ortográfica em tempo real

Menus de contexto

Comandos de formatação como ToggleBold (CTR + B)

Conteúdo FlowDocument como imagens, parágrafos, tabelas etc..

TextBox

Sim

Sim

Não

Não.

RichTextBox

Sim

Sim

Sim

Sim

Observação: Embora TextBox não oferece suporte para a formatação comandos relacionados sistema autônomo ToggleBold (CTR + B), muitos comandos básicos são suportados pelo ambos sistema autônomo controles, sistema autônomo MoveToLineEnd.

Os recursos da tabela acima são abordados em mais detalhes posteriormente.

Criando um RichTextBox

O código abaixo mostra como criar um RichTextBox onde um usuário pode editar conteúdo rico.

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

Especificamente, o conteúdo editado em um RichTextBox é conteúdo de fluxo. Conteúdo de fluxo pode conter vários tipos de elementos incluindo texto formatado, imagens, listas e tabelas. Consulte Flow Document Overview para informações em profundidade sobre documentos de fluxo. Para conter conteúdo de fluxo, um RichTextBox hospeda um objeto FlowDocument que por sua vez contém o conteúdo editável. Para demonstrar o fluxo de conteúdo em um RichTextBox, o código a seguir mostra como criar um RichTextBox com um parágrafo e texto em negrito.

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

        }
    }
}

A ilustração a seguir mostra como esse exemplo é renderizado.

RichTextBox com conteúdo

Elementos como Paragraph e Bold determinam como o conteúdo em um RichTextBox aparece. Assim que o usuário edita RichTextBox conteúdo, eles alteram esse conteúdo de fluxo. Para saber mais sobre os recursos do conteúdo de fluxo e como trabalhar com ele, consulte Flow Document Overview.

Observação: Fluxo de conteúdo dentro de um RichTextBox não se comporta exatamente como conteúdo de fluxo contido em outros controles. For example, there are no columns in a RichTextBox and hence no automatic resizing behavior. Também, recursos embutidos como busca, modos de vizualização, navegação de página e ampliação não são disponíveis em um RichTextBox.

Correção ortográfica em tempo real

Você pode habilitar correção ortográfica em tempo real em um TextBox ou um RichTextBox. Quando a correção ortográfica estiver ativada, uma linha vermelha aparecerá sob as palavras incorretas (veja a imagem abaixo).

Textbox com verificação ortográfica

Consulte Como: Enable Spell Checking in a Text Editing Control para saber como habilitar a correção ortográfica.

Por padrão, tanto TextBox quanto RichTextBox têm um menu de contexto que aparece quando um usuário clica com o botão direito do mouse dentro do controle. O menu de contexto permite que o usuário recorte, copie ou cole (veja na ilustração abaixo).

TextBox com menu de contexto

Você pode criar seus próprios menus de contexto personalizados para substituir o padrão. Consulte Como: Posicionar um Menu de Contexto em uma CaixaTextoRica para obter mais informações.

Editando comandos

Comandos de edição permitem que os usuários formatar conteúdo editável em um RichTextBox. Além comandos básico de edição, RichTextBox inclui formatação de comandos que TextBox não oferece suporte. Por exemplo, ao editar em um RichTextBox, um usuário pode pressionar CTR + B para alternar a formatação de texto em negrito. Consulte EditingCommands para obter uma lista completa dos comandos disponíveis. Além de usar atalhos de teclado, você pode ligar comandos até outros controles como botões. O exemplo a seguir mostra como criar uma barra de ferramenta simples contendo botões que o usuário pode usar para alterar a formatação de texto.

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

A ilustração a seguir mostra como esse exemplo é mostrado.

RichTextBox com ToolBar

For the complete sample, see Criar um RichTextBox com um exemplo de barra de ferramentas. Além disso, consulte Exemplo de EditingCommands para uma demonstração do uso de comandos de edição com um RichTextBox.

Detectando quando o conteúdo for alterado

Geralmente, o evento TextChanged deve ser usado para detectar sempre que o texto em um TextBox ou RichTextBox sofre alterações, em vez de KeyDown como se poderia esperar. Consulte Como: Detectar quando o texto em uma TextBox foi alterado para um exemplo.

Salvar, carregar e imprimir conteúdo RichTextBox

The following example shows how to save content of a RichTextBox to a file, load that content back into the RichTextBox, and print the contents. Below is the markup for the example.

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

Below is the code behind for the example.

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

Consulte também

Tarefas

Exemplo de EditingCommands

Edição de demonstração Examiner

Demonstração do Bloco de notas

Criar um RichTextBox com um exemplo de barra de ferramentas

Conceitos

Visão geral sobre TextBox

Outros recursos

Tópicos de Como Fazer RichTextBox