![\"Ausgabe](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_001.png\")
<\/p>\nEin Element des Typs FlowDocument dient zusammen mit den drei Steuerelementen Flow-DocumentScrollViewer, FlowDocumentTextViewer und FlowDocumentReader der Textdarstellung in WPF. Während auch andere Steuer-elemente wie TextBox oder Text-Block Texte darstellen können und auch ihre Bearbeitung ermöglichen, bietet das Flow-Document viel mehr Möglichkeiten, was die Gestaltung des Texts angeht. Neben verschiedenen Absatzformatierungen und Zeichenformatierungen sind hier auch die An-zeige von Listen, Tabellen oder eingebauten Elementen wie Bildern möglich. Dieser Artikel stellt das FlowDocument-Element mit seinen Eigenschaften vor und zeigt auch, wie Sie solche Dokumente mit VB zur Laufzeit erstellen können. Letzteres ist interessant, wenn Sie Inhalte aus verschiedenen Feldern einer Datenbank strukturiert und formatiert darstellen wollen.<\/b><\/p>\n
FlowDocuments benötigen entweder eines der drei Darstellungs-Steuerelemente FlowDocumentScrollViewer<\/b>, FlowDocumentTextViewer <\/b>oder FlowDocumentReader <\/b>oder, wenn Sie den Inhalt bearbeiten wollen, das RichTextBox<\/b>-Steuerelement.<\/p>\n
Im vorliegenden Artikel verwenden wir einfach das FlowDocumentReader<\/b>-Steuerelement, damit wir die per WPF zusammengestellten formatierten Texte darstellen können. Auf das RichTextBox<\/b>-Steuerelement gehen wir im Artikel Das RichTextBox-Steuerelement <\/b>ein.<\/p>\n
FlowDocument anlegen<\/b><\/p>\n
Ein FlowDocument<\/b>-Element können wir beispielsweise wie in Bild 1 in einem Flow-Document-Reader<\/b>-Steuerelement ausgeben. Und die WPF-Definition beginnt auch genau so: Wir legen in einem neuen, leeren Fenster ein FlowDocumentReader<\/b>-Element an, dem wir ein FlowDocument<\/b>-Element hinzufügen:<\/p>\n
<\/p>\n
Bild 1: Ausgabe des Inhalts eines FlowDocuments im FlowDocumentReader-Steuerelement<\/span><\/b><\/p>\n Damit erhalten wir dann ein noch leeres FlowDocument-Reader<\/b>-Element im Entwurf der .xaml<\/b>-Datei (siehe Bild 2).<\/p>\n Bild 2: Das leere FlowDocument im FlowDocumentReader<\/span><\/b><\/p>\n Text zum FlowDocument hinzufügen<\/b><\/p>\n Das FlowDocument füllen wir sehr schnell, indem wir einfach ein Paragraph<\/b>-Objekt mit einem beliebigen Text zum FlowDocument<\/b>-Element hinzufügen:<\/p>\n Praktischerweise zeigt der Entwurf die so hinzugefügten Inhalte direkt an (siehe Bild 3). So müssen wir nicht immer das Projekt starten, um den Fortschritt zu betrachten.<\/p>\n Bild 3: Ein Beispielabsatz<\/span><\/b><\/p>\n Absatzformatierungen<\/b><\/p>\n Das Paragraph<\/b>-Element erlaubt einige Formatierungen, die für den kompletten Absatz gelten.<\/p>\n Diese geben Sie als Attribute für das Paragraph<\/b>-Element an. Die wichtigsten dienen der Formatierung des Texts:<\/p>\n Mit diesen Formatierungen erhalten wir bereits ein anderes Ergebnis als zuvor (siehe Bild 4):<\/p>\n Bild 4: Formatierter Absatz<\/span><\/b><\/p>\n Damit können wir verschiedene Absatzformatierungen durchführen und erhalten eine optisch brauchbare Formatierung – wie zum Beispiel mit den wie folgt definierten Absätzen:<\/p>\n Diese Absätze sehen nach dem Starten des Projekts wie in Bild 5 aus. Wir haben das Fenster mit dem FlowDocumentReader <\/b>ein wenig verkleinert, um zu zeigen, dass das Dokument dann auf zwei Seiten aufgeteilt wird, von der die erste angezeigt wird. Mit den Steuerelementen unten können Sie dann zur zweiten Seite blättern. Außerdem haben wir die Breite soweit verringert, dass das Fenster den Text in nur einer Spalte anzeigt. Wenn Sie das Fenster wieder breiter ziehen, erscheinen zunächst zwei Spalten, dann auch noch mehr als zwei Spalten.<\/p>\n Bild 5: Ausgabe einiger Absätze im FlowDocumentReader-Element<\/span><\/b><\/p>\n Die Formatierung der Schrift müssen Sie nicht für jeden Absatz einzeln durchführen. Sie können die Attribute auch für die übergeordneten Elemente definieren. Die untergeordneten Elemente übernehmen beziehungsweise “erben” die Werte der übergeordneten Elemente.<\/p>\n Inline-Elemente<\/b><\/p>\n Sie können auch einzelne Elemente innerhalb eines Absatzes formatieren. Dazu nutzen Sie wie unter HTML sogenannte Inline-Formatierungen. Zum Formatieren des Textes mit fetten, kursiven oder unterstrichenen Zeichen verwenden Sie die folgenden Elemente:<\/p>\n Ein Beispiel mit allen drei Formatierungen:<\/p>\n In den .xaml<\/b>-Code eingebaute Zeilenumbrüche wirken sich übrigens nicht auf die Darstellung aus. Die folgenden, vom .xaml<\/b>-Editor automatisch hinzugefügten Zeilenumbrüche werden also nicht auf den Text übertragen:<\/p>\n Zeilenumbrüche<\/b><\/p>\n Wenn Sie Zeilenumbrüche wünschen, müssen Sie diese explizit angeben. Unter HTML fügen Sie Zeilenumbrüche mit dem Zeichen <\/b> ein, unter WPF in FlowDocument<\/b>-Elementen mit dem Element Abbildungen mit dem Figure-Element<\/b><\/p>\n Mit dem Figure<\/b>-Element können Sie Abbildungen und andere Elemente in den Fließtext integrieren. Dazu fügen Sie in das Paragraph<\/b>-Element ein Figure<\/b>-Element ein. Dieses bietet Eigenschaften wie die folgenden:<\/p>\n Mit diesen Eigenschaften lässt sich eine Abbildung wie in Bild 6 einbetten.<\/p>\n Bild 6: Einbetten einer Abbildung per Figure-Element<\/span><\/b><\/p>\n Dazu benötigen wir noch einige weitere Elemente, die wir in das Figure<\/b>-Element einbauen – zunächst ein BlockUIContainer<\/b>-Element ohne Attribute und darin den eigentlichen Inhalt, in diesem Fall ein Image<\/b>-Element mit dem anzuzeigenden Bild:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span><FlowDocumentReader>\r\n <FlowDocument>\r\n ...\r\n <\/FlowDocument>\r\n<\/FlowDocumentReader><\/pre>\n
![\"Das](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_002.png\")
<\/p>\n<Paragraph>Ein neuer Text.<\/Paragraph><\/pre>\n
![\"Ein](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_003.png\")
<\/p>\n\n
![\"Formatierter](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_004.png\")
<\/p>\n<Paragraph FontWeight=\"Bold\" FontFamily=\"Arial\" FontSize=\"16\" FontStyle=\"Italic\">Fetter Arial-Text mit Größe 16.<\/Paragraph><\/pre>\n
<Paragraph FontSize=\"16\" FontFamily=\"Arial\" FontWeight=\"Bold\">Zwischenüberschrift<\/Paragraph>\r\n<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Dies ist der erste Absatz unseres Beispieldokuments. ...<\/Paragraph>\r\n<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Der zweite Absatz des Beispieldokuments. ...<\/Paragraph>\r\n<Paragraph FontSize=\"16\" FontFamily=\"Arial\" FontWeight=\"Bold\">Und noch eine Zwischenüberschrift.<\/Paragraph>\r\n<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Dies ist der erste Absatz unseres Beispieldokuments. ...<\/Paragraph>\r\n<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Der zweite Absatz des Beispieldokuments. ...<\/Paragraph><\/pre>\n
![\"Ausgabe](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_005.png\")
<\/p>\n\n
<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Text mit <Bold>fettem<\/Bold>, <Italic>kursivem<\/Italic> und <Underline>unterstrichenem<\/Underline> Inhalt.<\/Paragraph><\/pre>\n
<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Text mit\r\n <Bold>fettem<\/Bold> ,\r\n <Italic>kursivem<\/Italic> und\r\n <Underline>unterstrichenem<\/Underline> Inhalt.\r\n<\/Paragraph><\/pre>\n
<Paragraph FontSize=\"12\" FontFamily=\"Arial\">Text mit einem Zeilenumbruch\r\n <LineBreak \/> vor diesem Teil.<\/Paragraph><\/pre>\n
\n
![\"Einbetten](\"..\/fileadmin\/_temp_\/2020_01\/pic_203_006.png\")
<\/p>\n<Paragraph FontSize=\"12\" FontFamily=\"Arial\">\r\n <Figure Width=\"200\" HorizontalAnchor=\"ColumnRight\" VerticalAnchor=\"ParagraphTop\">\r\n <BlockUIContainer>\r\n <Image Source=\"images\/pic005.png\"\/>\r\n <\/BlockUIContainer>\r\n <\/Figure>\r\nDies ist der erste Absatz unseres Beispieldokuments. ...<\/Paragraph><\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t