Gambaran Umum RichTextBox

Kontrol RichTextBox memungkinkan Anda untuk menampilkan atau mengedit konten dengan alur, termasuk paragraf, gambar, tabel, dan lainnya. Topik ini memperkenalkan TextBox kelas dan memberikan contoh cara menggunakannya dalam Extensible Application Markup Language (XAML) dan C#.

Kotak Teks atau RichTextBox

Kedua RichTextBox dan TextBox memungkinkan pengguna untuk mengedit teks, namun, kedua kontrol digunakan dalam skenario yang berbeda. RichTextBox adalah pilihan yang lebih baik ketika pengguna perlu mengedit teks, gambar, tabel, atau konten kaya lainnya yang diformat. Misalnya, mengedit dokumen, artikel, atau blog yang memerlukan pemformatan, gambar, dll paling baik dicapai menggunakan RichTextBox. TextBox membutuhkan lebih sedikit sumber daya sistem dibandingkan RichTextBox dan sangat ideal ketika hanya perlu mengedit teks biasa, misalnya, penggunaan dalam formulir. Lihat TextBox untuk informasi selengkapnya tentang TextBox. Tabel di bawah ini meringkas fitur TextBox utama dan RichTextBox.

Pengendalian	Pemeriksaan Ejaan Waktu Nyata	Menu Konteks	Perintah pemformatan seperti ToggleBold (Ctr+B)	FlowDocument konten seperti gambar, paragraf, tabel, dll.
TextBox	Yes	Yes	Tidak.	Tidak.
RichTextBox	Yes	Yes	Yes	Yes

Nota

Meskipun TextBox tidak mendukung perintah terkait pemformatan seperti ToggleBold (Ctr+B), banyak perintah dasar yang didukung oleh kedua kontrol seperti MoveToLineEnd.

Fitur dari tabel di atas dibahas secara lebih rinci nanti.

Gaya dan templat

Anda dapat memodifikasi default ControlTemplate untuk memberi kontrol tampilan yang unik. Untuk informasi selengkapnya tentang mengubah templat kontrol, lihat Membuat templat untuk kontrol.

Properti konten

Properti Document adalah properti konten untuk RichTextBox. Ini berisi elemen FlowDocument yang mewakili konten kaya yang sedang ditampilkan atau diedit.

Bagian

Tabel berikut mencantumkan bagian-bagian yang diberi nama dari kontrol RichTextBox.

Bagian	Tipe	Description
PART_ContentHost	FrameworkElement	Elemen kerangka kerja yang berisi konten kotak teks.

Keadaan visual

Tabel berikut mencantumkan status visual untuk RichTextBox kontrol.

Nama VisualState	Nama VisualStateGroup	Description
Biasa	CommonStates	Kontrol berada dalam keadaan normal.
MouseOver	CommonStates	Mouse berada di atas kontrol.
Disabled	CommonStates	Kontrol dinonaktifkan.
ReadOnly	CommonStates	Kontrol bersifat baca-saja.
Terfokus	FocusStates	Kontrol memiliki fokus keyboard.
Tidak fokus	FocusStates	Kontrol tidak memiliki fokus keyboard.
Sah	StatusValidasi	Kontrol valid dan tidak memiliki kesalahan validasi.
FokusTidakValid	StatusValidasi	Kontrol memiliki kesalahan validasi dan memiliki fokus keyboard.
Tidak valid dan Tidak Difokuskan	StatusValidasi	Kontrol memiliki kesalahan validasi tetapi tidak memiliki fokus keyboard.

Membuat RichTextBox

Kode di bawah ini menunjukkan cara membuat sebuah RichTextBox tempat di mana pengguna dapat mengedit konten kaya.

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

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

</Page>

Secara khusus, konten yang diedit dalam RichTextBox adalah konten alur. Konten alur dapat berisi banyak jenis elemen termasuk teks, gambar, daftar, dan tabel yang diformat. Lihat Gambaran Umum Dokumen Alur untuk informasi mendalam tentang dokumen alur. Untuk menampung konten alur, RichTextBox menopang objek FlowDocument yang pada gilirannya mengandung konten yang dapat diedit. Untuk menunjukkan konten alur dalam RichTextBox, kode berikut menunjukkan cara membuat RichTextBox dengan paragraf dan beberapa teks tebal.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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;
        }
    }
}

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

Ilustrasi berikut menunjukkan cara sampel ini tampil.

Elemen seperti Paragraph dan Bold menentukan bagaimana konten di dalam RichTextBox muncul. Saat pengguna mengedit RichTextBox konten, mereka mengubah konten alur ini. Untuk mempelajari selengkapnya tentang fitur konten alur dan cara bekerja dengannya, lihat Gambaran Umum Dokumen Alur.

Nota

Konten alur di dalam RichTextBox tidak berperilaku persis seperti konten alur yang ada dalam kontrol lain. Misalnya, dalam sebuah RichTextBox, tidak ada kolom dan karenanya tidak ada perilaku mengubah ukuran otomatis. Selain itu, fitur bawaan seperti pencarian, mode tampilan, navigasi halaman, dan zoom tidak tersedia dalam RichTextBox.

Pemeriksaan Ejaan secara Real-time

Anda dapat mengaktifkan pemeriksaan ejaan real-time di TextBox atau RichTextBox. Saat pemeriksaan ejaan diaktifkan, garis merah muncul di bawah kata yang salah eja (lihat gambar di bawah).

Lihat Mengaktifkan Pemeriksaan Ejaan dalam Kontrol Pengeditan Teks untuk mempelajari cara mengaktifkan pemeriksaan ejaan.

Menu Konteks

Secara default, keduanya TextBox dan RichTextBox memiliki menu konteks yang muncul saat pengguna mengklik kanan di dalam kontrol. Menu konteks memungkinkan pengguna untuk memotong, menyalin, atau menempel (lihat ilustrasi di bawah).

Anda dapat membuat menu konteks kustom Anda sendiri untuk mengambil alih menu default. Lihat Memposisikan Menu Konteks Kustom di RichTextBox untuk informasi selengkapnya.

Perintah Pengeditan

Perintah pengeditan memungkinkan pengguna memformat konten yang dapat diedit di dalam RichTextBox. Selain perintah pengeditan dasar, RichTextBox menyertakan perintah pemformatan yang TextBox tidak mendukung. Misalnya, saat mengedit di RichTextBox, pengguna dapat menekan Ctr+B untuk mengalihkan pemformatan teks tebal. Lihat EditingCommands untuk daftar lengkap perintah yang tersedia. Selain menggunakan pintasan keyboard, Anda dapat menghubungkan perintah hingga kontrol lain seperti tombol. Contoh berikut menunjukkan cara membuat bilah alat sederhana yang berisi tombol yang dapat digunakan pengguna untuk mengubah pemformatan teks.

<Window x:Class="RichTextBoxInputPanelDemo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Ilustrasi berikut menunjukkan bagaimana sampel ini ditampilkan.

Deteksi kapan Konten Berubah

Biasanya peristiwa TextChanged harus digunakan untuk mendeteksi setiap kali teks di TextBox atau RichTextBox berubah, bukan di KeyDown seperti yang mungkin Anda harapkan. Lihat Mendeteksi Kapan Teks di Kotak Teks Telah Berubah misalnya.

Simpan, Muat, dan Cetak Konten RichTextBox

Contoh berikut menunjukkan cara menyimpan konten RichTextBox ke file, memuat konten tersebut kembali ke RichTextBox, dan mencetak konten. Di bawah ini adalah markup untuk contoh.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Di bawah ini adalah kode di belakang untuk contoh.

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

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

Lihat juga

• Dokumen di WPF
• Gambaran Umum Dokumen Alur
• TextBox