RichTextBox の概要

[アーティクル]
08/09/2011

RichTextBox コントロールを使用すると、段落、イメージ、テーブルなどのフローコンテンツを表示または編集できます。このトピックでは、TextBox クラスについて説明し、Extensible Application Markup Language (XAML) と C# の両方で使用する例を示します。

このトピックは、次のセクションで構成されています。

TextBox と RichTextBox
RichTextBox の作成
リアルタイムスペルチェック
コンテキストメニュー
編集コマンド
コンテンツの変更の検出
RichTextBox コンテンツの保存、読み込み、および印刷
関連トピック

TextBox と RichTextBox

RichTextBox と TextBox のどちらを使用してもテキストを編集できますが、2 つのコントロールは異なるシナリオで使用されます。 RichTextBox は、書式設定されたテキスト、イメージ、テーブル、またはその他のリッチコンテンツを編集する必要がある場合に適しています。たとえば、書式設定やイメージなどが必要なドキュメント、記事、またはブログを編集する場合は、RichTextBox を使用することをお勧めします。 TextBox で必要なシステムリソースは RichTextBox よりも少ないため、プレーンテキストのみを編集する必要がある場合 ( フォームでの使用) に適しています。 TextBox の詳細については、「TextBox の概要」を参照してください。 TextBox および RichTextBox の主要な機能を次の表にまとめます。

コントロール	リアルタイムスペルチェック	コンテキストメニュー	ToggleBold (Ctrl + B) などの書式設定コマンド	イメージ、段落、テーブルなどの FlowDocument コンテンツ
TextBox	○	○	×	×
RichTextBox	○	○	○	○

メモ : TextBox では ToggleBold (Ctrl + B) などの書式設定関連のコマンドはサポートされませんが、MoveToLineEnd などのさまざまな基本コマンドが両方のコントロールでサポートされています。

上の表に示した機能については、後で詳しく説明します。

RichTextBox の作成

次のコードでは、ユーザーがリッチコンテンツを編集できる RichTextBox を作成する方法を示します。

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

具体的に言えば、RichTextBox で編集されるコンテンツはフローコンテンツです。フローコンテンツには、書式設定されたテキスト、イメージ、リスト、およびテーブルなどのさまざまな種類の要素を格納できます。フロードキュメントの詳細については、「フロードキュメントの概要」を参照してください。フローコンテンツを格納するために、RichTextBox が FlowDocument オブジェクトをホストし、そのオブジェクトが編集可能コンテンツを格納します。 RichTextBox のフローコンテンツを示すために、次のコードで、段落と太字テキストのある RichTextBox を作成する方法を示します。

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

        }
    }
}

このサンプルの表示結果を次の図に示します。

内容を含む RichTextBox

Paragraph や Bold などの要素は、RichTextBox 内のコンテンツがどのように表示されるかを決定します。ユーザーが RichTextBox のコンテンツを編集すると、これらの要素がこのフローコンテンツを変更します。フローコンテンツの機能、およびその使用方法の詳細については、「フロードキュメントの概要」を参照してください。

メモ : RichTextBox 内のフローコンテンツの動作は、他のコントロールに格納されたフローコンテンツの動作とは異なる場合があります。たとえば、RichTextBox 内には列が存在しないため、自動サイズ変更動作もありません。また、検索、表示モード、ページナビゲーション、およびズームなどの組み込み機能も、RichTextBox 内では使用できません。

リアルタイムスペルチェック

TextBox または RichTextBox でリアルタイムスペルチェックを有効にすることができます。スペルチェックを有効にすると、スペルミスがある単語の下に赤い線が表示されます (下図を参照)。

スペルチェックを含む Textbox

スペルチェックを有効にする方法については、「方法 : テキスト編集コントロールでスペルチェックを有効にする」を参照してください。

コンテキストメニュー

既定で、TextBox と RichTextBox の両方に、ユーザーがコントロール内を右クリックしたときに表示されるコンテキストメニューが用意されています。コンテキストメニューを使用すると、ユーザーは切り取り、コピー、または貼り付けを実行できます (下図を参照)。

コンテキストメニューを含む TextBox

独自のカスタムコンテキストメニューを作成して、既定のメニューをオーバーライドできます。詳細については、「方法 : カスタムコンテキストメニューを RichTextBox に配置する」を参照してください。

編集コマンド

編集コマンドを使用することで、ユーザーは RichTextBox 内の編集可能コンテンツを書式設定できます。 RichTextBox には、基本的な編集コマンドのほかに、TextBox ではサポートされていない書式設定コマンドが含まれています。たとえば、RichTextBox 内で編集を行う場合、ユーザーは Ctrl + B キーを押すことで、テキストの太字設定を切り替えることができます。使用可能なコマンドの全リストについては、EditingCommands を参照してください。キーボードショートカットを使用するほかに、コマンドをボタンなどのその他のコントロールにフックすることができます。次の例では、ユーザーがテキストの書式設定を変更するために使用できるボタンを格納した簡単なツールバーを作成する方法を示します。

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

このサンプルの表示結果を次の図に示します。

ツールバーを含む RichTextBox

コンテンツの変更の検出

TextBox または RichTextBox のテキストの変更を検出するには、KeyDown イベントを使用するのではなく、通常は TextChanged イベントを使用する必要があります。例については、「方法 : TextBox のテキストがいつ変更されたかを検出する」を参照してください。

RichTextBox コンテンツの保存、読み込み、および印刷

RichTextBox のコンテンツをファイルに保存し、そのコンテンツを再び RichTextBox に読み込み、そのコンテンツを印刷する方法を次の例に示します。以下は、この例のマークアップです。

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

以下は、この例の分離コードです。


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

次の方法で共有

RichTextBox の概要

TextBox と RichTextBox

RichTextBox の作成

リアルタイムスペルチェック

コンテキストメニュー

編集コマンド

コンテンツの変更の検出

RichTextBox コンテンツの保存、読み込み、および印刷

参照

概念

その他の技術情報

その他のリソース

次の方法で共有

RichTextBox の概要

TextBox と RichTextBox

RichTextBox の作成

リアルタイム スペル チェック

コンテキスト メニュー

編集コマンド

コンテンツの変更の検出

RichTextBox コンテンツの保存、読み込み、および印刷

参照

概念

その他の技術情報

その他のリソース

リアルタイムスペルチェック

コンテキストメニュー