フロー ドキュメントの概要
更新 : 2007 年 11 月
フロー ドキュメントは、表示と読みやすさを最適化するように設計されたドキュメントです。フロー ドキュメントは、1 つの定義済みのレイアウトに設定するのではなく、ウィンドウのサイズ、デバイスの解像度、省略可能なユーザー設定など、ランタイム変数に基づいてコンテンツを動的に調整したり再配置したりします。また、フロー ドキュメントは、改ページ位置の自動修正や列などの高度なドキュメント機能を提供します。ここでは、フロー ドキュメントの概要およびフロー ドキュメントの作成方法について説明します。
このトピックには次のセクションが含まれています。
- フロー ドキュメントとは
- フロー ドキュメントの種類
- フロー コンテンツの作成
- フロー関連のクラス
- コンテンツ スキーマ
- テキストのカスタマイズ
- 関連トピック
フロー ドキュメントとは
フロー ドキュメントは、ウィンドウ サイズ、デバイスの解像度、およびその他の環境変数に応じて "コンテンツを再配置" するために設計されています。また、フロー ドキュメントには、検索、読みやすさを最適化するモードの表示、およびフォントのサイズと外観を変更する機能を含むさまざまな組み込み済みの機能があります。フロー ドキュメントは、主なドキュメントの使用シナリオが読みやすさである場合に最適です。これに対し、固定ドキュメントは、静的なプレゼンテーションを行うように設計されています。ソース コンテンツの忠実性が重要である場合は、固定ドキュメントが適しています。各種ドキュメントの詳細については、「Windows Presentation Foundation のドキュメント」を参照してください。
さまざまなサイズの複数のウィンドウで表示されるサンプルのフロー ドキュメントを次の図に示します。表示領域が変わると、コンテンツはスペースを最大限に利用できるように再配置されます。
.png "フロー ドキュメントの内容のフロー変更")
上のイメージに示すように、フロー コンテンツには、段落、リスト、図などの複数のコンポーネントを含めることができます。これらのコンポーネントは、マークアップでの要素と手順コードでのオブジェクトに対応します。これらのクラスの詳細については、この概要の「フロー関連のクラス」でもう一度説明します。ここでは、太字テキストとリストが含まれている段落で構成されているフロー ドキュメントを作成する単純なコード例を示します。
<!-- This simple flow document includes a paragraph with some
bold text in it and a list. -->
<FlowDocumentReader xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
次の図は、このコード スニペットの結果を示したものです。
.png "スクリーンショット : 表示される FlowDocument の例")
この例では、FlowDocumentReader コントロールはフロー コンテンツをホストするために使用されています。コントロールをホストしているフロー コンテンツの詳細については、「フロー ドキュメントの種類」を参照してください。Paragraph、List、ListItem、および Bold 要素は、マークアップでの順序に基づいて、コンテンツの書式設定を制御するために使用されます。たとえば、Bold 要素は、段落内のテキストの部分のみにまたがっています。結果として、その部分のみが太字のテキストになります。HTML を使用したことがある場合、これは慣れ親しまれているでしょう。
上の図が示すように、フロー ドキュメントには、いくつかの機能が組み込まれています。
検索 : ユーザーがドキュメント全体のフルテキスト検索を実行できるようにします。
表示モード : ユーザーは、単一ページ (一度に 1 ページ) 表示モード、2 ページ (読書形式) 表示モード、および連続したスクロール (ボトムレス) 表示モードなど、各自に適切な表示モードを選択できます。これらの表示モードの詳細については、FlowDocumentReaderViewingMode を参照してください。
ページ ナビゲーション コントロール : ドキュメントの表示モードでページを使用する場合、ページ ナビゲーション コントロールには、次のページへのジャンプ用ボタン (下向き矢印)、前のページへのジャンプ用ボタン (上向き矢印)、および現在のページ番号と総ページ数のインジケータが含まれます。ページ間の移動は、キーボードの方向キーを使用して行うこともできます。
ズーム : ユーザーはプラス (+) ボタンまたはマイナス (-) ボタンをクリックして、ズーム レベルを上げたり下げたりできます。ズーム コントロールには、ズーム レベルの調整用スライダも含まれます。詳細については、「ズーム」を参照してください。
これらの機能は、フロー コンテンツをホストするために使用されるコントロールに基づいて変更できます。次のセクションでは、さまざまなコントロールについて説明します。
フロー ドキュメントの種類
フロー ドキュメント コンテンツの表示、およびそれがどのように表示されるかは、どのようなオブジェクトがフロー コンテンツをホストするために使用されるかに依存します。FlowDocumentReader, FlowDocumentPageViewer、RichTextBox、および FlowDocumentScrollViewer の 4 つのコントロールがフロー コンテンツの表示をサポートします。これらのコントロールについて、以下に簡単に説明します。
メモ : FlowDocument はフロー コントロールを直接ホストするために必要であるため、これらのすべての表示コントロールでは FlowDocument を使用してフロー コンテンツのホストを可能にします。
FlowDocumentReader
FlowDocumentReader には、単一ページ (一度に 1 ページ) 表示モード、2 ページ (読書形式) 表示モード、連続スクロール (ボトムレス) 表示モードなど、さまざまな表示モードをユーザーが動的に選択できるようにするための機能が用意されています。これらの表示モードの詳細については、FlowDocumentReaderViewingMode を参照してください。表示モードを動的に切り替える必要がない場合は、FlowDocumentPageViewer および FlowDocumentScrollViewer を使用すると便利です。これらは、特定の表示モードに固定された軽量のコンテンツ ビューアです。
FlowDocumentPageViewer と FlowDocumentScrollViewer
FlowDocumentPageViewer は、コンテンツを一度に 1 ページずつ表示し、FlowDocumentScrollViewer はコンテンツを連続したスクロール モードで表示します。FlowDocumentPageViewer および FlowDocumentScrollViewer は、いずれも特定の表示モードに固定されています。FlowDocumentReader と比較してください。このリーダーでは、FlowDocumentReaderViewingMode 列挙体により各種表示モードを動的に切り替えることができますが、FlowDocumentPageViewer や FlowDocumentScrollViewer よりも多くのリソースを消費します。
既定では、垂直スクロール バーは常に表示され、水平スクロール バーは必要に応じて表示されます。FlowDocumentScrollViewer の既定の UI にはツール バーが含まれませんが、IsToolBarVisible プロパティを使用して組み込みツール バーを有効にできます。
RichTextBox
ユーザーがフロー コンテンツを編集できるようにする場合は、RichTextBox を使用します。たとえば、表、斜体や太字の書式設定などをユーザーが操作できるようにするエディタを作成する必要がある場合は、RichTextBox を使用します。詳細については、「RichTextBox の概要」を参照してください。
メモ :RichTextBox 内のフロー コンテンツの動作は、他のコントロールに格納されたフロー コンテンツの動作とは異なる場合があります。たとえば、RichTextBox 内には列が存在しないため、自動サイズ変更動作もありません。また、検索、表示モード、ページ ナビゲーション、およびズームなどのフロー コンテンツの通常の組み込み機能も、RichTextBox 内では使用できません。
フロー コンテンツの作成
フロー コンテンツは、テキスト、イメージ、テーブル、およびコントロールのような UIElement 派生クラスを含むさまざまな要素で構成された複雑になものにすることができます。複雑なフロー コンテンツを作成する方法を理解するには、次の点が重要です。
フロー関連のクラス : フロー コンテンツ内で使用される各クラスには特定の目的があります。また、フロー クラス間の階層型の関係により、それらがどのように使用されるかが理解しやすくなっています。たとえば、Inline から派生したクラスは表示されるオブジェクトを格納しますが、Block クラスから派生したクラスは他のオブジェクトを格納するために使用されます。
コンテンツ スキーマ : フロー ドキュメントには、多くの入れ子になった要素が必要になる場合があります。コンテンツ スキーマは、使用可能な要素間の親子のリレーションシップを指定します。
以下のセクションでは、これらの点のそれぞれについて詳しく説明します。
フロー関連のクラス
次の図は、フロー コンテンツで最も一般的に使用されるオブジェクトを示します。
.png "ダイアグラム : フロー コンテンツ要素クラス階層")
フロー コンテンツのために、2 つの重要なカテゴリがあります。
Block の派生クラス : "Block コンテンツ要素" または単に "Block 要素" とも呼ばれます。Block を継承する要素は、要素を共通の親の下にグループ化したり、共通の属性をグループに適用したりするために使用できます。
Inline の派生クラス : "Inline コンテンツ要素" または単に "Inline 要素" とも呼ばれます。Inline から継承する要素は、Block 要素または別の Inline 要素内に格納されます。Inline 要素は、多くの場合、画面にレンダリングされるコンテンツの直接のコンテナとして使用されます。たとえば、Paragraph (Block 要素) には Run (Inline 要素) を格納することができますが、Run には実際には画面にレンダリングされるテキストが格納されます。
これらの 2 つのカテゴリの各クラスについて、以下に簡単に説明します。
Block の派生クラス
Paragraph
Paragraph は、通常、コンテンツを 1 つの段落にグループ化するために使用されます。Paragraph の最も単純かつ一般的な用途は、テキストの段落の作成です。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
ただし、次に示すように、他の Inline の派生要素を格納することもできます。
セクション
Section は、他の Block の派生要素を格納するためにのみ使用されます。格納している要素に対して、既定の書式設定を適用することはありません。ただし、Section で設定されたプロパティ値は、その子要素に適用されます。セクションでは、プログラムで子コレクションを反復処理することもできます。Section は、HTML の <DIV> タグと同じように使用されます。
次の例では、3 つの段落は、1 つの Section で定義されます。このセクションには、Background プロパティ値である Red があるため、段落の背景色も赤になります。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
BlockUIContainer
BlockUIContainer は、UIElement 要素 (Button など) を Block の派生フロー コンテンツに埋め込むことができるようにします。InlineUIContainer (以下を参照) は Inline の派生フロー コンテンツに UIElement 要素を埋め込むために使用されます。BlockUIContainer および InlineUIContainer は、これらの 2 つの要素のいずれかの中に格納されない限り、フロー コンテンツで UIElement を使用する方法は他にないため重要です。
BlockUIContainer 要素を使用してフロー コンテンツ内に UIElement オブジェクトをホストする方法を次の例に示します。
<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>
この例の表示結果を次の図に示します。
.png "スクリーンショット : フロー コンテンツに埋め込まれた UIElement")
List
List は、箇条書きリストまたは番号リストを作成するために使用されます。MarkerStyle プロパティを TextMarkerStyle 列挙値に設定して、リストのスタイルを決定します。簡単なリストを作成する方法を次の例に示します。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
メモ : List だけが ListItemCollection を使用して子要素を管理するフロー要素です。
Table
Table は、テーブルを作成するために使用されます。Table は、Grid 要素と似ていますが、より多くの機能を備えています。そのため、さらに多くのリソースのオーバーヘッドを必要とします。Grid は UIElement であるため、BlockUIContainer または InlineUIContainer に格納されない限り、フロー コンテンツで使用できません。Table の詳細については、「テーブルの概要」を参照してください。
Inline の派生クラス
Run
Run は、書式なしテキストを格納するために使用されます。フロー コンテンツでは Run オブジェクトを広範に使用することを想定している場合がありますが、マークアップでは Run 要素を明示的に使用する必要はありません。たとえば、次のマークアップでは、最初の Paragraph は Run 要素を明示的に指定しますが、2 番目の Paragraph は Run 要素を明示的に指定しません。両方の段落は、同じ出力を生成します。
<Paragraph>
<Run>Paragraph that explicitly uses the Run element.</Run>
</Paragraph>
<Paragraph>
This Paragraph omits the the Run element in markup. It renders
the same as a Paragraph with Run used explicitly.
</Paragraph>
メモ : Run は、コードを使用してフロー ドキュメントを作成または操作するときに使用する必要があります。
Span
Span は他のインライン コンテンツ要素をグループ化します。継承されたレンダリングは、Span 要素内のコンテンツには適用されません。ただし、Hyperlink、Bold、Italic、および Underline を含む Span から継承する要素は、テキストに書式設定を適用します。
テキスト、Bold 要素、および Button を含むインライン コンテンツを格納するために使用されている Span の例を次に示します。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
次のスクリーンショットは、この例がどのようにレンダリングされるかを示しています。
.gif "スクリーンショット : 表示される Span の例")
InlineUIContainer
InlineUIContainer は UIElement 要素 (Button のようなコントロール) を Inline コンテンツ要素に埋め込むことができるようにします。この要素は、前に説明した BlockUIContainer と等価のインラインです。Paragraph に Button インラインを挿入するために InlineUIContainer を使用する例を次に示します。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
メモ :InlineUIContainer は、マークアップでは明示的に使用する必要はありません。これを省略した場合、コードがコンパイルされると InlineUIContainer が作成されます。
Figure および Floater
Figure および Floater は、主要コンテンツ フローとは別にカスタマイズできる配置プロパティを持つフロー ドキュメント内にコンテンツを埋め込むために使用されます。Figure または Floater 要素は、多くの場合、コンテンツの一部を強調表示したり目立たせたりするため、コンテンツのメイン フロー内のサポート イメージや他のコンテンツをホストするため、または広告などの関連の薄いコンテンツを挿入するために使用されます。
テキストの段落に Figure を埋め込む方法を次の例に示します。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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;
}
}
}
この例の表示結果を次の図に示します。
.png "スクリーンショット : 図形の例")
Figure と Floater にはいくつか違いがあり、それぞれ異なる場面で使用されます。
Figure:
配置可能です。水平方向および垂直方向のアンカーを設定することによって、ページ、コンテンツ、列、または段落に対して相対的にドッキングできます。HorizontalOffset プロパティおよび VerticalOffset プロパティを使用して、任意のオフセットを指定することもできます。
複数の列にまたがるサイズ指定が可能です。Figure の高さと幅は、ページ、コンテンツ、または列の高さや幅の倍数に設定できます。ページおよびコンテンツの場合は、1 より大きい倍数は指定できない点に注意してください。たとえば、Figure の幅を「0.5 ページ」、「0.25 コンテンツ」、「2 列」のように設定できます。高さと幅は、絶対ピクセル値で指定することもできます。
改ページ位置の自動修正は行いません。Figure の内側のコンテンツが Figure 内に収まらない場合は、収まる部分のみが表示され、残りの部分は失われます。
Floater:
位置の指定はできず、必要なスペースを確保できる場所に描画されます。Floater のオフセットやアンカーを設定することはできません。
複数の列にまたがるサイズ指定はできません。Floater の既定サイズは 1 列です。絶対ピクセル値で指定できる Width プロパティがありますが、設定値が 1 列の幅より大きいと無視されるため、その場合の浮遊要素のサイズは 1 列になります。正しいピクセル幅を設定することによってサイズを 1 列未満にすることはできますが、列を基準とした相対的なサイズ指定はできないため、Floater の幅に関しては「0.5 列」という表現は有効ではありません。Floater には高さのプロパティはなく、高さを設定することはできません。高さはコンテンツに依存します。
Floater は改ページ位置の自動修正を行います。指定した幅のコンテンツが複数列の高さまで拡張されると、浮遊要素は分割されて、次の列、次のページなどに改ページ位置が自動修正されます。
Figure は、サイズや位置の制御が求められ、指定サイズに収まることが確実な単体のコンテンツを配置する場合に適しています。一方の Floater は、メイン ページのコンテンツと同様にフローする流動性の高いコンテンツを、メイン ページのコンテンツとは別に配置する場合に適しています。
LineBreak
LineBreak はフロー コンテンツの改行の原因となります。次の例は LineBreak の使い方を示しています。
<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
次のスクリーンショットは、この例がどのようにレンダリングされるかを示しています。
.png "スクリーンショット : LineBreak の例")
フロー コレクションの要素
上記の例の多くでは、プログラムでフロー コンテンツを構築するために BlockCollection および InlineCollection が使用されています。たとえば、要素を Paragraph に追加するには、次の構文を使用できます。
…
myParagraph.Inlines.Add(new Run("Some text"));
…
これは、Run を Paragraph の InlineCollection に追加します。これは、マークアップの Paragraph の内部にある暗黙の Run と同じです。
…
<Paragraph>
Some Text
</Paragraph>
…
BlockCollection の使用例として、次の例では、新しい Section を作成してから、Add メソッドを使用して新しい Paragraph を Section コンテンツに追加します。
Section secx = new Section();
secx.Blocks.Add(new Paragraph(new Run("A bit of text content...")));
フロー コレクションへの項目の追加に加えて、項目を削除できます。次の例では、Span 内の最後の Inline 要素を削除します。
spanx.Inlines.Remove(spanx.Inlines.LastInline);
次の例では、Span からすべての内容 (Inline 要素) を消去します。
spanx.Inlines.Clear();
フロー コンテンツをプログラムによって操作する場合、これらのコレクションを広く活用する可能性があります。
フロー要素が子要素を格納するために InlineCollection (インライン) または BlockCollection (ブロック) を使用するかどうかは、親が格納できる子要素の種類 (Block または Inline) によって異なります。フロー コンテンツ要素の格納規則については、次のセクションのコンテンツ スキーマで説明します。
メモ : フロー コンテンツと共に使用されるコレクションの 3 つ目の種類は ListItemCollection ですが、このコレクションは List と共にしか使用されません。また、Table と共に使用されるいくつかのコレクションがあります。詳細については、「テーブルの概要」を参照してください。
コンテンツ スキーマ
多数のさまざまなフロー コンテンツ要素が指定されると、要素が格納できる子要素の種類を追跡できなくなる可能性があります。フロー要素の格納規則をまとめたものを次の図に示します。矢印は、使用可能な親子のリレーションシップを表します。
.png "ダイアグラム : フロー コンテンツ コンテインメント スキーマ")
上の図からわかるように、要素で許容される子は、必ずしもそれが Block 要素と Inline 要素のどちらであるかによって決まるわけではありません。たとえば、Span (Inline 要素) は Inline 子要素だけを持つことができるのに対し、Figure (同じく Inline 要素) は Block 子要素だけを持つことができます。そのため、どの要素を別の要素に含めることができるかをすばやく判断するには、図が役立ちます。例として、RichTextBox のフロー コンテンツを構築する方法を、上の図を使用して判断してみましょう。
RichTextBox は FlowDocument を含んでいる必要があり、これは Block の派生オブジェクトを含んでいる必要があります。上の図でこれに対応する部分を次に示します。
.png "ダイアグラム : RichTextBox コンテインメント規則")
この段階では、マークアップは次のようになります。
<RichTextBox>
<FlowDocument>
<!-- One or more Block-derived object… -->
</FlowDocument>
</RichTextBox>
上の図によると、Block 要素には、Paragraph、Section、Table、List、および BlockUIContainer を含む、いくつかの選択肢があります (図の Block の派生クラスを参照)。ここで、Table が必要だとします。上の図によると、Table は TableRowGroup を含んでおり、これは TableRow 要素を含んでいます。さらにこれは TableCell 要素を含んでおり、これは Block の派生オブジェクトを含んでいます。上の図で、Table に対応する部分を次に示します。
.png "ダイアグラム : テーブルの親/子スキーマ")
以下は、これに対応するマークアップです。
<RichTextBox>
<FlowDocument>
<Table>
<TableRowGroup>
<TableRow>
<TableCell>
<!-- One or more Block-derived object… -->
</TableCell>
</TableRow>
</TableRowGroup>
</Table>
</FlowDocument>
</RichTextBox>
さらに、TableCell の下にも、1 つ以上の Block 要素が必要です。簡単にするために、セル内にいくつかのテキストを配置することにします。これを行うには、Paragraph を Run 要素と組み合わせて使用します。上の図でこれに対応する部分を次に示します。ここには、Paragraph が Inline 要素を取ることができ、Run (Inline 要素の 1 つ) がプレーン テキストのみを取ることができることが示されています。
.png "ダイアグラム : 段落の親/子スキーマ")
.png "ダイアグラム : 実行の親/子スキーマ")
以下は、マークアップによる例の全体です。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
テキストのカスタマイズ
通常、テキストは、フロー ドキュメントで最も一般的なコンテンツの種類です。上で導入されたオブジェクトは、テキストをレンダリングする方法のほとんどの側面を制御するために使用できますが、このセクションで説明されるテキストのカスタマイズ用にその他のメソッドがいくつか存在します。
文字装飾
文字装飾によって、下線、上線、ベースライン、および取り消し線の効果をテキストに適用できます (下図を参照)。これらの装飾は、Inline、Paragraph、TextBlock、および TextBox を含む複数のオブジェクトによって公開される TextDecorations プロパティを使用して追加されます。
Paragraph の TextDecorations プロパティを設定する方法を次の例に示します。
<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;
この例の表示結果を次の図に示します。
.png "スクリーンショット : 既定の取り消し線が適用されたテキスト")
次の図は、それぞれ上線、標準、下線の各装飾の表示結果を示しています。
.png "スクリーンショット : TextDecorator の上に線を引く")
.png "スクリーンショット : テキストに対する既定のベースライン効果")
.png "スクリーンショット : 既定の下線が適用されたテキスト")
タイポグラフィ
Typography プロパティは、TextElement、FlowDocument、TextBlock、および TextBox を含むほとんどのフロー関連のコンテンツによって公開されます。このプロパティは、テキストの文字体裁の特性またはバリエーション (小さい大文字か大きい大文字か、上付き文字と下付き文字の作成など) を制御するために使用されます。
要素として Paragraph を使用して、Typography 属性を設定する方法を次の例に示します。
<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>
この例の表示結果を次の図に示します。
.png "スクリーンショット : 変更されたタイポグラフィを含むテキスト")
既定の文字体裁プロパティを設定した同様の例の表示結果を次の図に示します。
.png "スクリーンショット : 変更されたタイポグラフィを含むテキスト")
Typography プロパティをプログラムによって設定する方法を次の例に示します。
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;
文字体裁の詳細については、「Windows Presentation Foundation の文字体裁」を参照してください。
参照
処理手順
概念
Windows Presentation Foundation の文字体裁
Windows Presentation Foundation のドキュメント