フロー ドキュメントの概要Flow Document Overview

フロー ドキュメントは、表示と読みやすさを最適化するように設計されたドキュメントです。Flow documents are designed to optimize viewing and readability. フロー ドキュメントは、1 つの定義済みのレイアウトに設定するのではなく、ウィンドウのサイズ、デバイスの解像度、省略可能なユーザー設定など、ランタイム変数に基づいてコンテンツを動的に調整したりリフローしたりします。Rather than being set to one predefined layout, flow documents dynamically adjust and reflow their content based on run-time variables such as window size, device resolution, and optional user preferences. また、フロー ドキュメントは、改ページ位置の自動修正や列などの高度なドキュメント機能を提供します。In addition, flow documents offer advanced document features, such as pagination and columns. ここでは、フロー ドキュメントの概要およびフロー ドキュメントの作成方法について説明します。This topic provides an overview of flow documents and how to create them.

フロー ドキュメントとはWhat is a Flow Document

フロー ドキュメントは、ウィンドウ サイズ、デバイスの解像度、およびその他の環境変数に応じて "コンテンツをリフロー" するために設計されています。A flow document is designed to "reflow content" depending on window size, device resolution, and other environment variables. また、フロー ドキュメントには、検索、読みやすさを最適化するモードの表示、およびフォントのサイズと外観を変更する機能を含むさまざまな組み込み機能があります。In addition, flow documents have a number of built in features including search, viewing modes that optimize readability, and the ability to change the size and appearance of fonts. フロー ドキュメントは、主なドキュメントの使用シナリオが読みやすさである場合に最適です。Flow Documents are best utilized when ease of reading is the primary document consumption scenario. これに対し、固定ドキュメントは、静的なプレゼンテーションを行うように設計されています。In contrast, Fixed Documents are designed to have a static presentation. ソース コンテンツの再現性が重要である場合は、固定ドキュメントが便利です。Fixed Documents are useful when fidelity of the source content is essential. 各種ドキュメントの詳細については、「WPF のドキュメント」を参照してください。See Documents in WPF for more information on different types of documents.

さまざまなサイズの複数のウィンドウで表示されるサンプルのフロー ドキュメントを次の図に示します。The following illustration shows a sample flow document viewed in several windows of different sizes. 表示領域が変わると、コンテンツはスペースを最大限に利用できるようにリフローされます。As the display area changes, the content reflows to make the best use of the available space.

フロー ドキュメントのコンテンツのリフローFlow Document Content Reflow

上のイメージに示すように、フロー コンテンツには、段落、リスト、イメージなどの多くのコンポーネントを含めることができます。As seen in the image above, flow content can include many components including paragraphs, lists, images, and more. これらのコンポーネントは、マークアップでの要素と手続き型コードでのオブジェクトに対応します。These components correspond to elements in markup and objects in procedural code. これらのクラスについては、この概要の「フロー関連のクラス」セクションで後ほど詳しく説明します。We will go over these classes in detail later in the Flow Related Classes section of this overview. ここでは、太字テキストと一覧が含まれている段落で構成されているフロー ドキュメントを作成する、シンプルなコード例を示します。For now, here is a simple code example that creates a flow document consisting of a paragraph with some bold text and a list.

<!-- This simple flow document includes a paragraph with some
     bold text in it and a list. -->
<FlowDocumentReader xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <FlowDocument>
    <Paragraph>
      <Bold>Some bold text in the paragraph.</Bold>
      Some text that is not bold.
    </Paragraph>

    <List>
      <ListItem>
        <Paragraph>ListItem 1</Paragraph>
      </ListItem>
      <ListItem>
        <Paragraph>ListItem 2</Paragraph>
      </ListItem>
      <ListItem>
        <Paragraph>ListItem 3</Paragraph>
      </ListItem>
    </List>

  </FlowDocument>
</FlowDocumentReader>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class SimpleFlowExample : Page
    {
        public SimpleFlowExample()
        {

            Paragraph myParagraph = new Paragraph();

            // Add some Bold text to the paragraph
            myParagraph.Inlines.Add(new Bold(new Run("Some bold text in the paragraph.")));

            // Add some plain text to the paragraph
            myParagraph.Inlines.Add(new Run(" Some text that is not bold."));

            // Create a List and populate with three list items.
            List myList = new List();

            // First create paragraphs to go into the list item.
            Paragraph paragraphListItem1 = new Paragraph(new Run("ListItem 1"));
            Paragraph paragraphListItem2 = new Paragraph(new Run("ListItem 2"));
            Paragraph paragraphListItem3 = new Paragraph(new Run("ListItem 3"));

            // Add ListItems with paragraphs in them.
            myList.ListItems.Add(new ListItem(paragraphListItem1));
            myList.ListItems.Add(new ListItem(paragraphListItem2));
            myList.ListItems.Add(new ListItem(paragraphListItem3));

            // Create a FlowDocument with the paragraph and list.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(myParagraph);
            myFlowDocument.Blocks.Add(myList);

            // Add the FlowDocument to a FlowDocumentReader Control
            FlowDocumentReader myFlowDocumentReader = new FlowDocumentReader();
            myFlowDocumentReader.Document = myFlowDocument;

            this.Content = myFlowDocumentReader;
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents

Namespace SDKSample
    Partial Public Class SimpleFlowExample
        Inherits Page
        Public Sub New()

            Dim myParagraph As New Paragraph()

            ' Add some Bold text to the paragraph
            myParagraph.Inlines.Add(New Bold(New Run("Some bold text in the paragraph.")))

            ' Add some plain text to the paragraph
            myParagraph.Inlines.Add(New Run(" Some text that is not bold."))

            ' Create a List and populate with three list items.
            Dim myList As New List()

            ' First create paragraphs to go into the list item.
            Dim paragraphListItem1 As New Paragraph(New Run("ListItem 1"))
            Dim paragraphListItem2 As New Paragraph(New Run("ListItem 2"))
            Dim paragraphListItem3 As New Paragraph(New Run("ListItem 3"))

            ' Add ListItems with paragraphs in them.
            myList.ListItems.Add(New ListItem(paragraphListItem1))
            myList.ListItems.Add(New ListItem(paragraphListItem2))
            myList.ListItems.Add(New ListItem(paragraphListItem3))

            ' Create a FlowDocument with the paragraph and list.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(myParagraph)
            myFlowDocument.Blocks.Add(myList)

            ' Add the FlowDocument to a FlowDocumentReader Control
            Dim myFlowDocumentReader As New FlowDocumentReader()
            myFlowDocumentReader.Document = myFlowDocument

            Me.Content = myFlowDocumentReader
        End Sub
    End Class
End Namespace

次の図は、このコード スニペットの結果を示したものです。The illustration below shows what this code snippet looks like.

スクリーンショット: 表示される FlowDocument の例Screenshot: Rendered FlowDocument example

この例では、フロー コンテンツをホストするために FlowDocumentReader コントロールが使用されています。In this example, the FlowDocumentReader control is used to host the flow content. コントロールをホストするフロー コンテンツの詳細については、「フロー ドキュメントの種類」を参照してください。See Flow Document Types for more information on flow content hosting controls. ParagraphListListItemBold 要素は、マークアップの順序に基づいて、コンテンツの書式設定を制御するために使用されます。Paragraph, List, ListItem, and Bold elements are used to control content formatting, based on their order in markup. たとえば、Bold 要素は、段落内のテキストの部分のみにまたがっています。結果として、テキストのその部分のみが太字となります。For example, the Bold element spans across only part of the text in the paragraph; as a result, only that part of the text is bold. HTML を使用したことがある場合、これは慣れ親しまれているでしょう。If you have used HTML, this will be familiar to you.

フロー ドキュメントには、上の図で強調表示されているいくつかの機能が組み込まれています。As highlighted in the illustration above, there are several features built into Flow Documents:

  • 検索: ユーザーがドキュメント全体のフル テキスト検索を実行できるようにします。Search: Allows the user to perform a full text search of an entire document.

  • 表示モード: ユーザーは、単一ページ (一度に 1 ページ) 表示モード、一度に 2 ページ (読書形式) 表示モード、連続したスクロール (ボトムレス) 表示モードなど、各自に適切な表示モードを選択できます。Viewing Mode: The user can select their preferred viewing mode including a single-page (page-at-a-time) viewing mode, a two-page-at-a-time (book reading format) viewing mode, and a continuous scrolling (bottomless) viewing mode. これらの表示モードの詳細については、「FlowDocumentReaderViewingMode」を参照してください。For more information about these viewing modes, see FlowDocumentReaderViewingMode.

  • ページ ナビゲーション コントロール: ドキュメントの表示モードでページを使用する場合、ページ ナビゲーション コントロールには、次のページへのジャンプ用ボタン (下向き矢印)、前のページへのジャンプ用ボタン (上向き矢印)、現在のページ番号と総ページ数のインジケーターが含まれます。Page Navigation Controls: If the viewing mode of the document uses pages, the page navigation controls include a button to jump to the next page (the down arrow) or previous page (the up arrow), as well as indicators for the current page number and total number of pages. ページ間の移動は、キーボードの方向キーを使用して行うこともできます。Flipping through pages can also be accomplished using the keyboard arrow keys.

  • ズーム: ズーム コントロールでは、ユーザーはプラスまたはマイナス ボタンをそれぞれクリックして、ズーム レベルを上げたり下げたりすることができます。Zoom: The zoom controls enable the user to increase or decrease the zoom level by clicking the plus or minus buttons, respectively. ズーム コントロールには、ズーム レベルの調整用スライダーも含まれます。The zoom controls also include a slider for adjusting the zoom level. 詳細については、「Zoom」を参照してください。For more information, see Zoom.

これらの機能は、フロー コンテンツをホストするために使用されるコントロールに基づいて変更できます。These features can be modified based upon the control used to host the flow content. 次のセクションでは、さまざまなコントロールについて説明します。The next section describes the different controls.

フロー ドキュメントの種類Flow Document Types

フロー ドキュメント コンテンツの表示、およびそれがどのように表示されるかは、どのようなオブジェクトがフロー コンテンツをホストするために使用されるかに依存します。Display of flow document content and how it appears is dependent upon what object is used to host the flow content. フロー コンテンツの表示をサポートするコントロールには、FlowDocumentReaderFlowDocumentPageViewerRichTextBoxFlowDocumentScrollViewer の 4 つがあります。There are four controls that support viewing of flow content: FlowDocumentReader, FlowDocumentPageViewer, RichTextBox, and FlowDocumentScrollViewer. これらのコントロールについて、以下に簡単に説明します。These controls are briefly described below.

注意

FlowDocument はフロー コンテンツを直接ホストするために必要です。したがって、これらの表示コントロールではすべて、フロー コンテンツ ホスティングを有効にするために FlowDocument を使用します。FlowDocument is required to directly host flow content, so all of these viewing controls consume a FlowDocument to enable flow content hosting.

FlowDocumentReaderFlowDocumentReader

FlowDocumentReader には、単一ページ (一度に 1 ページ) 表示モード、一度に 2 ページ (読書形式) 表示モード、連続スクロール (ボトムレス) 表示モードなど、さまざまな表示モードをユーザーが動的に選択できるようにする機能が含まれます。FlowDocumentReader includes features that enable the user to dynamically choose between various viewing modes, including a single-page (page-at-a-time) viewing mode, a two-page-at-a-time (book reading format) viewing mode, and a continuous scrolling (bottomless) viewing mode. これらの表示モードの詳細については、「FlowDocumentReaderViewingMode」を参照してください。For more information about these viewing modes, see FlowDocumentReaderViewingMode. さまざまな表示モードを動的に切り替える必要がない場合、FlowDocumentPageViewer および FlowDocumentScrollViewer で、特定の表示モードに固定された軽量のフロー コンテンツ ビューアーが提供されます。If you do not need the ability to dynamically switch between different viewing modes, FlowDocumentPageViewer and FlowDocumentScrollViewer provide lighter-weight flow content viewers that are fixed in a particular viewing mode.

FlowDocumentPageViewer と FlowDocumentScrollViewerFlowDocumentPageViewer and FlowDocumentScrollViewer

FlowDocumentPageViewer では、コンテンツを一度に 1 ページの表示モードで表示しますが、FlowDocumentScrollViewer では、コンテンツを連続したスクロール モードで表示します。FlowDocumentPageViewer shows content in page-at-a-time viewing mode, while FlowDocumentScrollViewer shows content in continuous scrolling mode. FlowDocumentPageViewerFlowDocumentScrollViewer は両方とも、特定の表示モードに固定されています。Both FlowDocumentPageViewer and FlowDocumentScrollViewer are fixed to a particular viewing mode. FlowDocumentReader と比較してください。これには、ユーザーが (FlowDocumentReaderViewingMode 列挙体で提供される) 各種表示モードから動的に選ぶことができる機能が含まれていますが、FlowDocumentPageViewerFlowDocumentScrollViewer よりも多くのリソースを消費します。Compare to FlowDocumentReader, which includes features that enable the user to dynamically choose between various viewing modes (as provided by the FlowDocumentReaderViewingMode enumeration), at the cost of being more resource intensive than FlowDocumentPageViewer or FlowDocumentScrollViewer.

既定では、垂直スクロール バーは常に表示され、水平スクロール バーは必要に応じて表示されます。By default, a vertical scrollbar is always shown, and a horizontal scrollbar becomes visible if needed. IsToolBarVisible の既定の UI にはツール バーが含まれませんが、FlowDocumentScrollViewer プロパティを使用して組み込みツール バーを有効にできます。The default UI for FlowDocumentScrollViewer does not include a toolbar; however, the IsToolBarVisible property can be used to enable a built-in toolbar.

RichTextBoxRichTextBox

ユーザーがフロー コンテンツを編集できるようにする場合は、RichTextBox を使用します。You use a RichTextBox when you want to allow the user to edit flow content. たとえば、テーブル、斜体や太字の書式設定などをユーザーが操作できるようにするエディターを作成する必要がある場合は、RichTextBox を使用します。For example, if you wanted to create an editor that allowed a user to manipulate things like tables, italic and bold formatting, etc, you would use a RichTextBox. 詳細については、「RichTextBox の概要」を参照してください。See RichTextBox Overview for more information.

注意

RichTextBox 内のフロー コンテンツは、他のコントロールに含まれているフロー コンテンツと一部異なる動作をします。Flow content inside a RichTextBox does not behave exactly like flow content contained in other controls. たとえば、RichTextBox に列がないと、自動サイズ変更動作は行われません。For example, there are no columns in a RichTextBox and hence no automatic resizing behavior. また、検索、表示モード、ページ ナビゲーション、ズームなどのフロー コンテンツの通常の組み込み機能は、RichTextBox 内では利用できません。Also, the typically built in features of flow content like search, viewing mode, page navigation, and zoom are not available within a RichTextBox.

フロー コンテンツの作成Creating Flow Content

フロー コンテンツは、テキスト、イメージ、テーブル、コントロールのような UIElement 派生クラスを含むさまざまな要素で構成された複雑なものにすることができます。Flow content can be complex, consisting of various elements including text, images, tables, and even UIElement derived classes like controls. 複雑なフロー コンテンツを作成する方法を理解するには、次の点が重要です。To understand how to create complex flow content, the following points are critical:

  • フロー関連のクラス: フロー コンテンツで使用される各クラスには特定の目的があります。Flow-related Classes: Each class used in flow content has a specific purpose. また、フロー クラス間の階層型の関係により、それらがどのように使用されるかが理解しやすくなっています。In addition, the hierarchical relation between flow classes helps you understand how they are used. たとえば、Block から派生したクラスは他のオブジェクトを含めるために使用されますが、Inline クラスから派生したクラスには、表示されるオブジェクトが含まれます。For example, classes derived from the Block class are used to contain other objects while classes derived from Inline contain objects that are displayed.

  • コンテンツ スキーマ: フロー ドキュメントには、多くの入れ子になった要素が必要になる場合があります。Content Schema: A flow document can require a substantial number of nested elements. コンテンツ スキーマは、使用可能な要素間の親/子リレーションシップを指定します。The content schema specifies possible parent/child relationships between elements.

以下のセクションでは、これらの各領域について詳しく説明します。The following sections will go over each of these areas in more detail.

次の図は、フロー コンテンツで最も一般的に使用されるオブジェクトを示します。The diagram below shows the objects most typically used with flow content:

図:フロー コンテンツ要素クラス階層Diagram: Flow content element class hierarchy

フロー コンテンツのために、次の 2 つの重要なカテゴリがあります。For the purposes of flow content, there are two important categories:

  1. Block の派生クラス: "Block コンテンツ要素" または単に "Block 要素" とも呼ばれます。Block-derived classes: Also called "Block content elements" or just "Block Elements". Block から継承する要素は、要素を共通の親の下にグループ化したり、共通の属性をグループに適用したりするために使用できます。Elements that inherit from Block can be used to group elements under a common parent or to apply common attributes to a group.

  2. Inline の派生クラス: "Inline コンテンツ要素" または単に "Inline 要素" とも呼ばれます。Inline-derived classes: Also called "Inline content elements" or just "Inline Elements". Inline から継承する要素は、Block 要素または別の Inline 要素内に格納されます。Elements that inherit from Inline are either contained within a Block Element or another Inline Element. Inline 要素は、多くの場合、画面にレンダリングされるコンテンツの直接のコンテナーとして使用されます。Inline Elements are often used as the direct container of content that is rendered to the screen. たとえば、Paragraph (Block 要素) には Run (Inline 要素) を含めることができますが、Run には実際には、画面にレンダリングされるテキストが含まれます。For example, a Paragraph (Block Element) can contain a Run (Inline Element) but the Run actually contains the text that is rendered on the screen.

これらの 2 つのカテゴリの各クラスについて、以下に簡単に説明します。Each class in these two categories is briefly described below.

Block の派生クラスBlock-derived Classes

ParagraphParagraph

Paragraph は、通常、コンテンツを段落にグループ化するために使用されます。Paragraph is typically used to group content into a paragraph. Paragraph の最も単純かつ一般的な用途は、テキストの段落の作成です。The simplest and most common use of Paragraph is to create a paragraph of text.

<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Paragraph>
    Some paragraph text.
  </Paragraph>
</FlowDocument>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class ParagraphExample : Page
    {
        public ParagraphExample()
        {

            // Create paragraph with some text.
            Paragraph myParagraph = new Paragraph();
            myParagraph.Inlines.Add(new Run("Some paragraph text."));

            // Create a FlowDocument and add the paragraph to it.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(myParagraph);

            this.Content = myFlowDocument;
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents

Namespace SDKSample
    Partial Public Class ParagraphExample
        Inherits Page
        Public Sub New()

            ' Create paragraph with some text.
            Dim myParagraph As New Paragraph()
            myParagraph.Inlines.Add(New Run("Some paragraph text."))

            ' Create a FlowDocument and add the paragraph to it.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(myParagraph)

            Me.Content = myFlowDocument
        End Sub
    End Class
End Namespace

しかし、次に示すように、他の Inline の派生要素を含めることもできます。However, you can also contain other inline-derived elements as you will see below.

セクションSection

Section は、他の Block 派生要素を含めるためにのみ使用されます。Section is used only to contain other Block-derived elements. 格納している要素に対して、既定の書式設定を適用することはありません。It does not apply any default formatting to the elements it contains. しかし、Section に設定されたプロパティ値はすべて、その子要素に適用されます。However, any property values set on a Section applies to its child elements. セクションでは、プログラムで子コレクションを反復処理することもできます。A section also enables you to programmatically iterate through its child collection. Section は、HTML での <DIV> タグと同様の方法で使用されます。Section is used in a similar manner to the <DIV> tag in HTML.

以下の例では、3 つの段落が 1 つの Section で定義されます。In the example below, three paragraphs are defined under one Section. このセクションには、Background プロパティ値である Red があるため、段落の背景色も赤になります。The section has a Background property value of Red, therefore the background color of the paragraphs is also red.

<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <!-- By default, Section applies no formatting to elements contained
       within it. However, in this example, the section has a Background
       property value of "Red", therefore, the three paragraphs (the block)  
       inside the section also have a red background. -->
  <Section Background="Red">
    <Paragraph>
      Paragraph 1
    </Paragraph>
    <Paragraph>
      Paragraph 2
    </Paragraph>
    <Paragraph>
      Paragraph 3
    </Paragraph>
  </Section>
</FlowDocument>
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class SectionExample : Page
    {
        public SectionExample()
        {

            // Create three paragraphs
            Paragraph myParagraph1 = new Paragraph(new Run("Paragraph 1"));
            Paragraph myParagraph2 = new Paragraph(new Run("Paragraph 2"));
            Paragraph myParagraph3 = new Paragraph(new Run("Paragraph 3"));

            // Create a Section and add the three paragraphs to it.
            Section mySection = new Section();
            mySection.Background = Brushes.Red;

            mySection.Blocks.Add(myParagraph1);
            mySection.Blocks.Add(myParagraph2);
            mySection.Blocks.Add(myParagraph3);

            // Create a FlowDocument and add the section to it.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(mySection);

            this.Content = myFlowDocument;
        }
    }
}

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

Namespace SDKSample
    Partial Public Class SectionExample
        Inherits Page
        Public Sub New()

            ' Create three paragraphs
            Dim myParagraph1 As New Paragraph(New Run("Paragraph 1"))
            Dim myParagraph2 As New Paragraph(New Run("Paragraph 2"))
            Dim myParagraph3 As New Paragraph(New Run("Paragraph 3"))

            ' Create a Section and add the three paragraphs to it.
            Dim mySection As New Section()
            mySection.Background = Brushes.Red

            mySection.Blocks.Add(myParagraph1)
            mySection.Blocks.Add(myParagraph2)
            mySection.Blocks.Add(myParagraph3)

            ' Create a FlowDocument and add the section to it.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(mySection)

            Me.Content = myFlowDocument
        End Sub
    End Class
End Namespace

BlockUIContainerBlockUIContainer

BlockUIContainer では、Block の派生フロー コンテンツに UIElement 要素 (つまり、Button) を埋め込めるようにします。BlockUIContainer enables UIElement elements (i.e. a Button) to be embedded in block-derived flow content. InlineUIContainer (下記参照) は、Inline の派生フロー コンテンツに UIElement 要素を埋め込むために使用されます。InlineUIContainer (see below) is used to embed UIElement elements in inline-derived flow content. BlockUIContainerInlineUIContainer は重要です。これら 2 つの要素のいずれかに含まれない限り、フロー コンテンツで UIElement を使用する方法は他にないためです。BlockUIContainer and InlineUIContainer are important because there is no other way to use a UIElement in flow content unless it is contained within one of these two elements.

次の例では、BlockUIContainer 要素を使用して、フロー コンテンツ内の UIElement オブジェクトをホストする方法を示しています。The following example shows how to use the BlockUIContainer element to host UIElement objects within flow content.

<FlowDocument ColumnWidth="400">
  <Section Background="GhostWhite">
    <Paragraph>
      A UIElement element may be embedded directly in flow content
      by enclosing it in a BlockUIContainer element.
    </Paragraph>
    <BlockUIContainer>
      <Button>Click me!</Button>
    </BlockUIContainer>
    <Paragraph>
      The BlockUIContainer element may host no more than one top-level
      UIElement.  However, other UIElements may be nested within the
      UIElement contained by an BlockUIContainer element.  For example,
      a StackPanel can be used to host multiple UIElement elements within
      a BlockUIContainer element.
    </Paragraph>
    <BlockUIContainer>
      <StackPanel>
        <Label Foreground="Blue">Choose a value:</Label>
        <ComboBox>
          <ComboBoxItem IsSelected="True">a</ComboBoxItem>
          <ComboBoxItem>b</ComboBoxItem>
          <ComboBoxItem>c</ComboBoxItem>
        </ComboBox>
        <Label Foreground ="Red">Choose a value:</Label>
        <StackPanel>
          <RadioButton>x</RadioButton>
          <RadioButton>y</RadioButton>
          <RadioButton>z</RadioButton>
        </StackPanel>
        <Label>Enter a value:</Label>
        <TextBox>
          A text editor embedded in flow content.
        </TextBox>
      </StackPanel>
    </BlockUIContainer>
  </Section>
</FlowDocument>

次の図には、この例がどのようにレンダリングされるかが示されています。The following figure shows how this example renders:

フロー コンテンツに埋め込まれた UIElement を示すスクリーンショット。

ListList

List は、箇条書きまたは数値リストを作成するために使用されます。List is used to create a bulleted or numeric list. MarkerStyle プロパティを TextMarkerStyle 列挙値に設定して、リストのスタイルを決定します。Set the MarkerStyle property to a TextMarkerStyle enumeration value to determine the style of the list. 簡単なリストを作成する方法を次の例に示します。The example below shows how to create a simple list.

<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <List>
    <ListItem>
      <Paragraph>
        List Item 1
      </Paragraph>
    </ListItem>
    <ListItem>
      <Paragraph>
        List Item 2
      </Paragraph>
    </ListItem>
    <ListItem>
      <Paragraph>
        List Item 3
      </Paragraph>
    </ListItem>
  </List>
</FlowDocument>
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class ListExample : Page
    {
        public ListExample()
        {

            // Create three paragraphs
            Paragraph myParagraph1 = new Paragraph(new Run("List Item 1"));
            Paragraph myParagraph2 = new Paragraph(new Run("List Item 2"));
            Paragraph myParagraph3 = new Paragraph(new Run("List Item 3"));

            // Create the ListItem elements for the List and add the
            // paragraphs to them.
            ListItem myListItem1 = new ListItem();
            myListItem1.Blocks.Add(myParagraph1);
            ListItem myListItem2 = new ListItem();
            myListItem2.Blocks.Add(myParagraph2);
            ListItem myListItem3 = new ListItem();
            myListItem3.Blocks.Add(myParagraph3);

            // Create a List and add the three ListItems to it.
            List myList = new List();

            myList.ListItems.Add(myListItem1);
            myList.ListItems.Add(myListItem2);
            myList.ListItems.Add(myListItem3);

            // Create a FlowDocument and add the section to it.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(myList);

            this.Content = myFlowDocument;
        }
    }
}

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

Namespace SDKSample
    Partial Public Class ListExample
        Inherits Page
        Public Sub New()

            ' Create three paragraphs
            Dim myParagraph1 As New Paragraph(New Run("List Item 1"))
            Dim myParagraph2 As New Paragraph(New Run("List Item 2"))
            Dim myParagraph3 As New Paragraph(New Run("List Item 3"))

            ' Create the ListItem elements for the List and add the 
            ' paragraphs to them.
            Dim myListItem1 As New ListItem()
            myListItem1.Blocks.Add(myParagraph1)
            Dim myListItem2 As New ListItem()
            myListItem2.Blocks.Add(myParagraph2)
            Dim myListItem3 As New ListItem()
            myListItem3.Blocks.Add(myParagraph3)

            ' Create a List and add the three ListItems to it.
            Dim myList As New List()

            myList.ListItems.Add(myListItem1)
            myList.ListItems.Add(myListItem2)
            myList.ListItems.Add(myListItem3)

            ' Create a FlowDocument and add the section to it.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(myList)

            Me.Content = myFlowDocument
        End Sub
    End Class
End Namespace

注意

List は、ListItemCollection を使用して子要素を管理する唯一のフロー要素です。List is the only flow element that uses the ListItemCollection to manage child elements.

テーブルTable

Table は、テーブルを作成するために使用されます。Table is used to create a table. TableGrid 要素に似ていますが、より多くの機能を備えているため、さらに多くのリソース オーバーヘッドが必要になります。Table is similar to the Grid element but it has more capabilities and, therefore, requires greater resource overhead. GridUIElement であるため、BlockUIContainer または InlineUIContainer に含まれている場合を除き、フロー コンテンツで使用することはできません。Because Grid is a UIElement, it cannot be used in flow content unless it is contained in a BlockUIContainer or InlineUIContainer. Table の詳細については、「テーブルの概要」を参照してください。For more information on Table, see Table Overview.

Inline の派生クラスInline-derived Classes

実行Run

Run は、書式設定されていないテキストを含めるために使用されます。Run is used to contain unformatted text. フロー コンテンツでは、Run オブジェクトを広範に使用することを想定している場合があります。You might expect Run objects to be used extensively in flow content. しかし、マークアップでは、Run 要素を明示的に使用する必要はありません。However, in markup, Run elements are not required to be used explicitly. Run は、コードを使用してフロー ドキュメントを作成または操作するときに使用する必要があります。Run is required to be used when creating or manipulating flow documents by using code. たとえば、以下のマークアップでは、最初の ParagraphRun 要素が明示的に指定されますが、2 番目では指定されません。For example, in the markup below, the first Paragraph specifies the Run element explicitly while the second does not. 両方の段落は、同じ出力を生成します。Both paragraphs generate identical output.

<Paragraph>
  <Run>Paragraph that explicitly uses the Run element.</Run>
</Paragraph>

<Paragraph>
  This Paragraph omits the Run element in markup. It renders
  the same as a Paragraph with Run used explicitly. 
</Paragraph>

注意

.NET Framework 4 以降では、Run オブジェクトの Text プロパティは依存関係プロパティです。Starting in the .NET Framework 4, the Text property of the Run object is a dependency property. TextBlock などのデータ ソースに、Text プロパティをバインドすることができます。You can bind the Text property to a data source, such as a TextBlock. Text プロパティでは、一方向のバインドが完全にサポートされます。The Text property fully supports one-way binding. Text プロパティでは、RichTextBox を除き、双方向のバインドもサポートされます。The Text property also supports two-way binding, except for RichTextBox. 例については、「Run.Text」を参照してください。For an example, see Run.Text.

SpanSpan

Span では、他のインライン コンテンツ要素をまとめてグループ化します。Span groups other inline content elements together. Span 要素内のコンテンツには、固有のレンダリングは適用されません。No inherent rendering is applied to content within a Span element. しかし、HyperlinkBoldItalicUnderline を含め、Span から継承する要素では、書式設定がテキストに適用されます。However, elements that inherit from Span including Hyperlink, Bold, Italic and Underline do apply formatting to text.

テキスト、Bold 要素、Button を含む、インライン コンテンツを含めるために使用されている Span の例を以下に示します。Below is an example of a Span being used to contain inline content including text, a Bold element, and a Button.

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

  <Paragraph>
    Text before the Span. <Span Background="Red">Text within the Span is
    red and <Bold>this text is inside the Span-derived element Bold.</Bold>
    A Span can contain more then text, it can contain any inline content. For
    example, it can contain a 
    <InlineUIContainer>
      <Button>Button</Button>
    </InlineUIContainer>
    or other UIElement, a Floater, a Figure, etc.</Span>
  </Paragraph>

</FlowDocument>

次のスクリーンショットは、この例がどのように表示されるかを示しています。The following screenshot shows how this example renders.

スクリーンショット: 表示される Span の例Screenshot: Rendered Span example

InlineUIContainerInlineUIContainer

InlineUIContainer では、UIElement 要素 (つまり、Button などのコントロール) を Inline コンテンツ要素に埋め込めるようにします。InlineUIContainer enables UIElement elements (i.e. a control like Button) to be embedded in an Inline content element. この要素は、前述の BlockUIContainer に相当するインラインです。This element is the inline equivalent to BlockUIContainer described above. InlineUIContainer を使用して、ParagraphButton インラインを挿入する例を以下に示します。Below is an example that uses InlineUIContainer to insert a Button inline in a Paragraph.

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

  <Paragraph>
    Text to precede the button...

    <!-- Set the BaselineAlignment property to "Bottom" 
         so that the Button aligns properly with the text. -->
    <InlineUIContainer BaselineAlignment="Bottom">
      <Button>Button</Button>
    </InlineUIContainer>
    Text to follow the button...
  </Paragraph>

</FlowDocument>
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class InlineUIContainerExample : Page
    {
        public InlineUIContainerExample()
        {
            Run run1 = new Run(" Text to precede the button... ");
            Run run2 = new Run(" Text to follow the button... ");

            // Create a new button to be hosted in the paragraph.
            Button myButton = new Button();
            myButton.Content = "Click me!";

            // Create a new InlineUIContainer to contain the Button.
            InlineUIContainer myInlineUIContainer = new InlineUIContainer();

            // Set the BaselineAlignment property to "Bottom" so that the
            // Button aligns properly with the text.
            myInlineUIContainer.BaselineAlignment = BaselineAlignment.Bottom;

            // Asign the button as the UI container's child.
            myInlineUIContainer.Child = myButton;

            // Create the paragraph and add content to it.
            Paragraph myParagraph = new Paragraph();
            myParagraph.Inlines.Add(run1);
            myParagraph.Inlines.Add(myInlineUIContainer);
            myParagraph.Inlines.Add(run2);

            // Create a FlowDocument and add the paragraph to it.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(myParagraph);

            this.Content = myFlowDocument;
        }
    }
}

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

Namespace SDKSample
    Partial Public Class InlineUIContainerExample
        Inherits Page
        Public Sub New()
            Dim run1 As New Run(" Text to precede the button... ")
            Dim run2 As New Run(" Text to follow the button... ")

            ' Create a new button to be hosted in the paragraph.
            Dim myButton As New Button()
            myButton.Content = "Click me!"

            ' Create a new InlineUIContainer to contain the Button.
            Dim myInlineUIContainer As New InlineUIContainer()

            ' Set the BaselineAlignment property to "Bottom" so that the 
            ' Button aligns properly with the text.
            myInlineUIContainer.BaselineAlignment = BaselineAlignment.Bottom

            ' Asign the button as the UI container's child.
            myInlineUIContainer.Child = myButton

            ' Create the paragraph and add content to it.
            Dim myParagraph As New Paragraph()
            myParagraph.Inlines.Add(run1)
            myParagraph.Inlines.Add(myInlineUIContainer)
            myParagraph.Inlines.Add(run2)

            ' Create a FlowDocument and add the paragraph to it.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(myParagraph)

            Me.Content = myFlowDocument
        End Sub
    End Class
End Namespace

注意

InlineUIContainer は、マークアップでは明示的に使用する必要はありません。InlineUIContainer does not need to be used explicitly in markup. これを省略しても、コードがコンパイルされると InlineUIContainer が作成されます。If you omit it, an InlineUIContainer will be created anyway when the code is compiled.

Figure および FloaterFigure and Floater

FigureFloater は、主要コンテンツ フローとは別にカスタマイズできる配置プロパティを持つフロー ドキュメント内にコンテンツを埋め込むために使用されます。Figure and Floater are used to embed content in Flow Documents with placement properties that can be customized independent of the primary content flow. 多くの場合、Figure または Floater 要素は、コンテンツの一部を強調表示したり、目立たせたりするため、メイン コンテンツ フロー内のサポート イメージや他のコンテンツをホストするため、または広告などの関連の薄いコンテンツを挿入するために使用されます。Figure or Floater elements are often used to highlight or accentuate portions of content, to host supporting images or other content within the main content flow, or to inject loosely related content such as advertisements.

次の例では、テキストの段落に Figure を埋め込む方法を示します。The following example shows how to embed a Figure into a paragraph of text.

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

  <Paragraph>
    <Figure 
      Width="300" Height="100" 
      Background="GhostWhite" HorizontalAnchor="PageLeft" >
      <Paragraph FontStyle="Italic" Background="Beige" Foreground="DarkGreen" >
        A Figure embeds content into flow content with placement properties 
        that can be customized independently from the primary content flow
      </Paragraph>
    </Figure>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
  </Paragraph>

</FlowDocument>
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Documents;

namespace SDKSample
{
    public partial class FigureExample : Page
    {
        public FigureExample()
        {

            // Create strings to use as content.
            string strFigure = "A Figure embeds content into flow content with" +
                               " placement properties that can be customized" +
                               " independently from the primary content flow";
            string strOther = "Lorem ipsum dolor sit amet, consectetuer adipiscing" +
                              " elit, sed diam nonummy nibh euismod tincidunt ut laoreet" +
                              " dolore magna aliquam erat volutpat. Ut wisi enim ad" +
                              " minim veniam, quis nostrud exerci tation ullamcorper" +
                              " suscipit lobortis nisl ut aliquip ex ea commodo consequat." +
                              " Duis autem vel eum iriure.";

            // Create a Figure and assign content and layout properties to it.
            Figure myFigure = new Figure();
            myFigure.Width = new FigureLength(300);
            myFigure.Height = new FigureLength(100);
            myFigure.Background = Brushes.GhostWhite;
            myFigure.HorizontalAnchor = FigureHorizontalAnchor.PageLeft;
            Paragraph myFigureParagraph = new Paragraph(new Run(strFigure));
            myFigureParagraph.FontStyle = FontStyles.Italic;
            myFigureParagraph.Background = Brushes.Beige;
            myFigureParagraph.Foreground = Brushes.DarkGreen;
            myFigure.Blocks.Add(myFigureParagraph);

            // Create the paragraph and add content to it.
            Paragraph myParagraph = new Paragraph();
            myParagraph.Inlines.Add(myFigure);
            myParagraph.Inlines.Add(new Run(strOther));

            // Create a FlowDocument and add the paragraph to it.
            FlowDocument myFlowDocument = new FlowDocument();
            myFlowDocument.Blocks.Add(myParagraph);

            this.Content = myFlowDocument;
        }
    }
}

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

Namespace SDKSample
    Partial Public Class FigureExample
        Inherits Page
        Public Sub New()

            ' Create strings to use as content.
            Dim strFigure As String = "A Figure embeds content into flow content with" & " placement properties that can be customized" & " independently from the primary content flow"
            Dim strOther As String = "Lorem ipsum dolor sit amet, consectetuer adipiscing" & " elit, sed diam nonummy nibh euismod tincidunt ut laoreet" & " dolore magna aliquam erat volutpat. Ut wisi enim ad" & " minim veniam, quis nostrud exerci tation ullamcorper" & " suscipit lobortis nisl ut aliquip ex ea commodo consequat." & " Duis autem vel eum iriure."

            ' Create a Figure and assign content and layout properties to it.
            Dim myFigure As New Figure()
            myFigure.Width = New FigureLength(300)
            myFigure.Height = New FigureLength(100)
            myFigure.Background = Brushes.GhostWhite
            myFigure.HorizontalAnchor = FigureHorizontalAnchor.PageLeft
            Dim myFigureParagraph As New Paragraph(New Run(strFigure))
            myFigureParagraph.FontStyle = FontStyles.Italic
            myFigureParagraph.Background = Brushes.Beige
            myFigureParagraph.Foreground = Brushes.DarkGreen
            myFigure.Blocks.Add(myFigureParagraph)

            ' Create the paragraph and add content to it.
            Dim myParagraph As New Paragraph()
            myParagraph.Inlines.Add(myFigure)
            myParagraph.Inlines.Add(New Run(strOther))

            ' Create a FlowDocument and add the paragraph to it.
            Dim myFlowDocument As New FlowDocument()
            myFlowDocument.Blocks.Add(myParagraph)

            Me.Content = myFlowDocument
        End Sub
    End Class
End Namespace

この例がどのように表示されるかを次の図に示します。The following illustration shows how this example renders.

スクリーンショット: Figure の例Screenshot: Figure example

FigureFloater はいくつかの点で異なり、異なるシナリオで使用されます。Figure and Floater differ in several ways and are used for different scenarios.

Figure:Figure:

  • 配置可能です。水平方向および垂直方向のアンカーを設定することによって、ページ、コンテンツ、列または段落に対して相対的にドッキングできます。Can be positioned: You can set its horizontal and vertical anchors to dock it relative to the page, content, column or paragraph. また、HorizontalOffset および VerticalOffset プロパティを使用して、任意のオフセットを指定することもできます。You can also use its HorizontalOffset and VerticalOffset properties to specify arbitrary offsets.

  • 複数の列にサイズを設定できます。Figure の高さと幅は、ページ、コンテンツ、または列の高さや幅の倍数に設定できます。Is sizable to more than one column: You can set Figure height and width to multiples of page, content or column height or width. ページおよびコンテンツの場合は、1 より大きい倍数は指定できない点に注意してください。Note that in the case of page and content, multiples greater than 1 are not allowed. たとえば、Figure の幅を "0.5 ページ"、"0.25 コンテンツ" または "2 列" に設定できます。For example, you can set the width of a Figure to be "0.5 page" or "0.25 content" or "2 Column". 高さと幅は、絶対ピクセル値で指定することもできます。You can also set height and width to absolute pixel values.

  • ページ割り付けは行いません。Figure 内のコンテンツが Figure 内に収まらない場合は、収まるコンテンツがすべてレンダリングされ、残りのコンテンツは失われますDoes not paginate: If the content inside a Figure does not fit inside the Figure, it will render whatever content does fit and the remaining content is lost

Floater:Floater:

  • 配置できません。必要なスペースを確保できる場所に描画されます。Cannot be positioned and will render wherever space can be made available for it. Floater のオフセットやアンカーを設定することはできません。You cannot set the offset or anchor a Floater.

  • 複数の列にサイズを設定することはできません。既定では、Floater のサイズは 1 列になります。Cannot be sized to more than one column: By default, Floater sizes at one column. 絶対ピクセル値に設定できる Width プロパティがありますが、この値が 1 列の幅より大きい場合は無視され、浮遊要素のサイズは 1 列になります。It has a Width property that can be set to an absolute pixel value, but if this value is greater than one column width it is ignored and the floater is sized at one column. 正しいピクセル幅を設定することによってサイズを 1 列未満にすることはできますが、列を基準とした相対的なサイズ指定はできないため、Floater の幅に関しては "0.5 列" という表現は有効ではありません。You can size it to less than one column by setting the correct pixel width, but sizing is not column-relative, so "0.5Column" is not a valid expression for Floater width. Floater には高さのプロパティはなく、高さを設定することはできません。高さはコンテンツに依存しますFloater has no height property and it's height cannot be set, it’s height depends on the content

  • Floater ではページ割り付けを行います。指定された幅のコンテンツが複数列の高さまで拡張されると、浮遊要素は分割されて、次の列、次のページなどにページ割り付けが行われますFloater paginates: If its content at its specified width extends to more than 1 column height, floater breaks and paginates to the next column, the next page, etc.

Figure は、サイズや配置の制御を必要とし、指定サイズにコンテンツが収まることが確実なスタンドアロン コンテンツを配置する場合に適しています。Figure is a good place to put standalone content where you want to control the size and positioning, and are confident that the content will fit in the specified size. Floater は、メイン ページのコンテンツと同様にフローするものの、それとは分離される、流動性の高いコンテンツを配置する場合に適しています。Floater is a good place to put more free-flowing content that flows similar to the main page content, but is separated from it.

LineBreakLineBreak

LineBreak を使用すると、フロー コンテンツで改行が行われます。LineBreak causes a line break to occur in flow content. 次の例は、LineBreak の使い方を示しています。The following example demonstrates the use of LineBreak.

<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Paragraph>
    Before the LineBreak in Paragraph.
    <LineBreak />
    After the LineBreak in Paragraph.
    <LineBreak/><LineBreak/>
    After two LineBreaks in Paragraph.
  </Paragraph>

  <Paragraph>
    <LineBreak/>
  </Paragraph>

  <Paragraph>
    After a Paragraph with only a LineBreak in it.
  </Paragraph>
</FlowDocument>

次のスクリーンショットは、この例がどのように表示されるかを示しています。The following screenshot shows how this example renders.

スクリーンショット: LineBreak の例Screenshot: LineBreak example

フロー コレクションの要素Flow Collection Elements

上記の例の多くでは、プログラムでフロー コンテンツを構築するために、BlockCollectionInlineCollection が使用されています。In many of the examples above, the BlockCollection and InlineCollection are used to construct flow content programmatically. たとえば、Paragraph に要素を追加する場合は、次の構文を使用できます。For example, to add elements to a Paragraph, you can use the syntax:

myParagraph.Inlines.Add(new Run("Some text"));

これにより、RunParagraphInlineCollection に追加されます。This adds a Run to the InlineCollection of the Paragraph. これは、マークアップの Paragraph の内部にある暗黙の Run と同じです。This is the same as the implicit Run found inside a Paragraph in markup:

<Paragraph>
Some Text
</Paragraph>

BlockCollection の使用例として、次の例では新しい Section を作成してから、Add メソッドを使用して、新しい ParagraphSection コンテンツに追加します。As an example of using the BlockCollection, the following example creates a new Section and then uses the Add method to add a new Paragraph to the Section contents.

Section secx = new Section();
secx.Blocks.Add(new Paragraph(new Run("A bit of text content...")));
Dim secx As New Section()
secx.Blocks.Add(New Paragraph(New Run("A bit of text content...")))

フロー コレクションに項目を追加できるだけでなく、項目を削除することもできます。In addition to adding items to a flow collection, you can remove items as well. 次の例では、Span 内の最後の Inline 要素を削除します。The following example deletes the last Inline element in the Span.

spanx.Inlines.Remove(spanx.Inlines.LastInline);
spanx.Inlines.Remove(spanx.Inlines.LastInline)

次の例では、Span からすべてのコンテンツ (Inline) をクリアします。The following example clears all of the contents (Inline elements) from the Span.

spanx.Inlines.Clear();
spanx.Inlines.Clear()

フロー コンテンツをプログラムで操作する場合、これらのコレクションを広く活用する可能性があります。When working with flow content programmatically, you will likely make extensive use of these collections.

フロー要素で、その子要素を含めるために InlineCollection (インライン) と BlockCollection (ブロック) のどちらを使用するかは、親で含めることができる子要素の種類 (Block または Inline) によって異なります。Whether a flow element uses an InlineCollection (Inlines) or BlockCollection (Blocks) to contain its child elements depends on what type of child elements (Block or Inline) can be contained by the parent. フロー コンテンツ要素のコンテインメイト規則については、次のセクションのコンテンツ スキーマにまとめます。Containment rules for flow content elements are summarized in the content schema in the next section.

注意

フロー コンテンツで使用されるコレクションの 3 つ目の種類として ListItemCollection がありますが、このコレクションは List でのみ使用されます。There is a third type of collection used with flow content, the ListItemCollection, but this collection is only used with a List. さらに、Table で使用されるコレクションがいくつかあります。In addition, there are several collections used with Table. 詳細については、「テーブルの概要」を参照してください。See Table Overview for more information.

コンテンツ スキーマContent Schema

多数のさまざまなフロー コンテンツ要素が指定されると、要素が格納できる子要素の種類を追跡できなくなる可能性があります。Given the number of different flow content elements, it can be overwhelming to keep track of what type of child elements an element can contain. フロー要素のコンテインメイト規則をまとめたものを次の図に示します。The diagram below summarizes the containment rules for flow elements. 矢印は、使用可能な親/子リレーションシップを表します。The arrows represent the possible parent/child relationships.

図:フロー コンテンツ コンテインメント スキーマDiagram: Flow content containment schema

上の図からわかるように、要素で許容される子は、必ずしもそれが Block 要素と Inline 要素のどちらであるかによって決まるわけではありません。As can be seen from the diagram above, the children allowed for an element are not necessarily determined by whether it is a Block element or an Inline element. たとえば、Span (Inline 要素) では Inline 子要素のみを持つことができるのに対して、Figure (同じく Inline 要素) では Block 子要素のみを持つことができます。For example, a Span (an Inline element) can only have Inline child elements while a Figure (also an Inline element) can only have Block child elements. そのため、どの要素を別の要素に含めることができるかをすばやく判断するには、図が役立ちます。Therefore, a diagram is useful for quickly determining what element can be contained in another. 例として、図を使用して、RichTextBox のフロー コンテンツを構築する方法を判断してみましょう。As an example, let's use the diagram to determine how to construct the flow content of a RichTextBox.

1. RichTextBox には FlowDocument が含まれている必要があり、さらにこれには Block の派生オブジェクトが含まれている必要があります。1. A RichTextBox must contain a FlowDocument which in turn must contain a Block-derived object. 上の図でこれに対応する部分を次に示します。Below is the corresponding segment from the diagram above.

図:RichTextBox コンテインメント規則Diagram: RichTextBox containment rules

この段階では、マークアップは次のようになります。Thus far, this is what the markup might look like.

<RichTextBox>
  <FlowDocument>
    <!-- One or more Block-derived object… -->
  </FlowDocument>
</RichTextBox>

2. 図によると、ParagraphSectionTableListBlockUIContainer など、選択できる Block 要素がいくつかあります (上記の Block の派生クラスを参照)。2. According to the diagram, there are several Block elements to choose from including Paragraph, Section, Table, List, and BlockUIContainer (see Block-derived classes above). たとえば、Table が必要だとします。Let's say we want a Table. 上の図によると、Table には TableRowGroup が含まれており、それには TableRow 要素が含まれています。さらにこれには TableCell 要素が含まれており、それには Block の派生オブジェクトが含まれています。According to the diagram above, a Table contains a TableRowGroup containing TableRow elements, which contain TableCell elements which contain a Block-derived object. 上の図で Table に対応するセグメントを、以下に示します。Below is the corresponding segment for Table taken from the diagram above.

図:テーブルの親/子スキーマDiagram: Parent/child schema for Table

以下は、これに対応するマークアップです。Below is the corresponding markup.

<RichTextBox>
  <FlowDocument>
    <Table>
      <TableRowGroup>
        <TableRow>
          <TableCell>
            <!-- One or more Block-derived object… -->
          </TableCell>
        </TableRow>
      </TableRowGroup>
    </Table>
  </FlowDocument>
</RichTextBox>

3. ここでも、TableCell の下に 1 つまたは複数の Block 要素が必要です。3. Again, one or more Block elements are required underneath a TableCell. 簡単にするために、セル内にいくつかのテキストを配置することにします。To make it simple, let's place some text inside the cell. これは、ParagraphRun 要素と共に使用することで行うことができます。We can do this using a Paragraph with a Run element. ParagraphInline 要素を受け取ることができ、Run (Inline 要素) でプレーンテキストのみを受け取れることを示す図の対応するセグメントを以下に示します。Below is the corresponding segments from the diagram showing that a Paragraph can take an Inline element and that a Run (an Inline element) can only take plain text.

図:段落の親/子スキーマDiagram: Parent/child schema for Paragraph

図:実行の親/子スキーマDiagram: Parent/Child schema for Run

以下は、マークアップでの例の全体です。Below is the entire example in markup.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <RichTextBox>
    <FlowDocument>
      
      <!-- Normally a table would have multiple rows and multiple
           cells but this code is for demonstration purposes.-->
      <Table>
        <TableRowGroup>
          <TableRow>
            <TableCell>
              <Paragraph>

                <!-- The schema does not actually require
                     explicit use of the Run tag in markup. It 
                     is only included here for clarity. -->
                <Run>Paragraph in a Table Cell.</Run>
              </Paragraph>
            </TableCell>
          </TableRow>
        </TableRowGroup>
      </Table>

    </FlowDocument>
  </RichTextBox>
</Page>

テキストのカスタマイズCustomizing Text

通常、テキストは、フロー ドキュメントで最も一般的なコンテンツの種類です。Usually text is the most prevalent type of content in a flow document. 上で導入されたオブジェクトは、テキストをレンダリングする方法のほとんどの側面を制御するために使用できますが、このセクションで説明されるテキストのカスタマイズ用にその他のメソッドがいくつか存在します。Although the objects introduced above can be used to control most aspects of how text is rendered, there are some other methods for customizing text that is covered in this section.

文字装飾Text Decorations

文字装飾によって、下線、上線、ベースライン、および取り消し線の効果をテキストに適用できます (下図参照)。Text decorations allow you to apply the underline, overline, baseline, and strikethrough effects to text (see pictures below). これらの装飾は、InlineParagraphTextBlockTextBox を含む多数のオブジェクトによって公開される、TextDecorations プロパティを使用して追加されます。These decorations are added using the TextDecorations property that is exposed by a number of objects including Inline, Paragraph, TextBlock, and TextBox.

TextDecorationsParagraph プロパティを設定する方法を次の例に示します。The following example shows how to set the TextDecorations property of a Paragraph.

<FlowDocument ColumnWidth="200">
  <Paragraph TextDecorations="Strikethrough">
    This text will render with the strikethrough effect.
  </Paragraph>
</FlowDocument>
Paragraph parx = new Paragraph(new Run("This text will render with the strikethrough effect."));
parx.TextDecorations = TextDecorations.Strikethrough;
Dim parx As New Paragraph(New Run("This text will render with the strikethrough effect."))
parx.TextDecorations = TextDecorations.Strikethrough

この例の表示結果を次の図に示します。The following figure shows how this example renders.

スクリーンショット: 既定の取り消し線の効果が適用されたテキストScreenshot: Text with default strikethrough effect

次の図には、それぞれ 上線ベースライン下線 の各装飾がどのようにレンダリングされるかが示されています。The following figures show how the Overline, Baseline, and Underline decorations render, respectively.

スクリーンショット: TextDecorator の上に線を引くScreenshot: Overline TextDecorator

スクリーンショット: テキストに対する既定のベースライン効果Screenshot: Default baseline effect on text

スクリーンショット: 既定の下線の効果が適用されたテキストScreenshot: Text with default underline effect

タイポグラフィTypography

Typography プロパティは、TextElementFlowDocumentTextBlockTextBox を含むほとんどのフロー関連のコンテンツによって公開されます。The Typography property is exposed by most flow-related content including TextElement, FlowDocument, TextBlock, and TextBox. このプロパティは、テキストの文字体裁の特性またはバリエーション (つまり、小さい大文字か大きい大文字か、上付き文字と下付き文字の作成など) を制御するために使用されます。This property is used to control typographical characteristics/variations of text (i.e. small or large caps, making superscripts and subscripts, etc).

次の例では、Paragraph を例の要素として使用して、Typography 属性を設定する方法が示されています。The following example shows how to set the Typography attribute, using Paragraph as the example element.

<Paragraph
  TextAlignment="Left"
  FontSize="18" 
  FontFamily="Palatino Linotype"
  Typography.NumeralStyle="OldStyle"
  Typography.Fraction="Stacked"
  Typography.Variants="Inferior"
>
  <Run>
    This text has some altered typography characteristics.  Note
    that use of an open type font is necessary for most typographic
    properties to be effective.
  </Run>
  <LineBreak/><LineBreak/>
  <Run>
    0123456789 10 11 12 13
  </Run>
  <LineBreak/><LineBreak/>
  <Run>
    1/2 2/3 3/4
  </Run>
</Paragraph>

この例の表示結果を次の図に示します。The following figure shows how this example renders.

スクリーンショット: 変更されたタイポグラフィを含むテキストScreenshot: Text with altered typography

これに対し、既定の文字体裁プロパティを設定した同様の例がどのように表示されるかを次の図に示します。In contrast, the following figure shows how a similar example with default typographic properties renders.

スクリーンショット: 変更されたタイポグラフィを含むテキストScreenshot: Text with altered typography

次の例では、Typography プロパティをプログラムで設定する方法が示されています。The following example shows how to set the Typography property programmatically.

Paragraph par = new Paragraph();

Run runText = new Run(
    "This text has some altered typography characteristics.  Note" +
    "that use of an open type font is necessary for most typographic" +
    "properties to be effective.");
Run runNumerals = new Run("0123456789 10 11 12 13");
Run runFractions = new Run("1/2 2/3 3/4");

par.Inlines.Add(runText);
par.Inlines.Add(new LineBreak());
par.Inlines.Add(new LineBreak());
par.Inlines.Add(runNumerals);
par.Inlines.Add(new LineBreak());
par.Inlines.Add(new LineBreak());
par.Inlines.Add(runFractions);

par.TextAlignment = TextAlignment.Left;
par.FontSize = 18;
par.FontFamily = new FontFamily("Palatino Linotype");

par.Typography.NumeralStyle = FontNumeralStyle.OldStyle;
par.Typography.Fraction = FontFraction.Stacked;
par.Typography.Variants = FontVariants.Inferior;
Dim par As New Paragraph()

Dim runText As New Run("This text has some altered typography characteristics.  Note" & "that use of an open type font is necessary for most typographic" & "properties to be effective.")
Dim runNumerals As New Run("0123456789 10 11 12 13")
Dim runFractions As New Run("1/2 2/3 3/4")

par.Inlines.Add(runText)
par.Inlines.Add(New LineBreak())
par.Inlines.Add(New LineBreak())
par.Inlines.Add(runNumerals)
par.Inlines.Add(New LineBreak())
par.Inlines.Add(New LineBreak())
par.Inlines.Add(runFractions)

par.TextAlignment = TextAlignment.Left
par.FontSize = 18
par.FontFamily = New FontFamily("Palatino Linotype")

par.Typography.NumeralStyle = FontNumeralStyle.OldStyle
par.Typography.Fraction = FontFraction.Stacked
par.Typography.Variants = FontVariants.Inferior

文字体裁の詳細については、「WPF のタイポグラフィ」を参照してください。See Typography in WPF for more information on typography.

関連項目See also