Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Dokumen alur dirancang untuk mengoptimalkan tampilan dan keterbacaan. Daripada diatur ke satu tata letak yang telah ditentukan sebelumnya, dokumen alur secara dinamis menyesuaikan dan mengalirkan ulang kontennya berdasarkan variabel run-time seperti ukuran jendela, resolusi perangkat, dan preferensi pengguna opsional. Selain itu, dokumen alur menawarkan fitur dokumen tingkat lanjut, seperti penomoran halaman dan kolom. Topik ini menyediakan gambaran umum dokumen alur dan cara membuatnya.
Apa itu Dokumen Alur
Dokumen alur dirancang untuk "me-reflow konten" tergantung pada ukuran jendela, resolusi perangkat, dan variabel lingkungan lainnya. Selain itu, dokumen alur memiliki sejumlah fitur bawaan termasuk pencarian, mode tampilan yang mengoptimalkan keterbacaan, dan kemampuan untuk mengubah ukuran dan tampilan font. Dokumen Alur paling baik digunakan ketika kemudahan membaca adalah skenario utama konsumsi dokumen. Sebaliknya, Dokumen Tetap dirancang untuk memiliki presentasi statis. Dokumen Tetap berguna ketika keakuratan konten sumber sangat penting. Lihat dokumen di WPF untuk informasi selengkapnya tentang berbagai jenis dokumen.
Ilustrasi berikut menunjukkan dokumen alur sampel yang ditampilkan dalam beberapa jendela dengan ukuran yang berbeda. Saat area tampilan berubah, konten akan di-reflow untuk memanfaatkan ruang yang tersedia dengan sebaik-baiknya.
Seperti yang terlihat pada gambar di atas, konten alur dapat mencakup banyak komponen termasuk paragraf, daftar, gambar, dan banyak lagi. Komponen-komponen ini sesuai dengan elemen dalam markup dan objek dalam kode prosedural. Kami akan membahas kelas-kelas ini secara rinci nanti di bagian Kelas Terkait Alur
<!-- 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
Ilustrasi di bawah ini menunjukkan seperti apa cuplikan kode ini.
Screenshot 
Dalam contoh ini, kontrol FlowDocumentReader digunakan untuk menghosting konten alur. Lihat Tipe Dokumen Alur untuk informasi selengkapnya tentang kontrol hosting konten alur. Paragraphelemen , List, ListItem, dan Bold digunakan untuk mengontrol pemformatan konten, berdasarkan urutannya dalam markup. Misalnya, elemen Bold hanya mencakup bagian teks dalam paragraf; akibatnya, hanya bagian teks yang tebal. Jika Anda telah menggunakan HTML, ini akan akrab bagi Anda.
Seperti yang disorot dalam ilustrasi di atas, ada beberapa fitur yang disertakan dalam Dokumen Alur:
Pencarian: Memungkinkan pengguna untuk melakukan pencarian teks lengkap dari seluruh dokumen.
Mode Melihat: Pengguna dapat memilih mode tampilan yang diinginkan, termasuk mode tampilan satu halaman pada satu waktu, mode tampilan dua halaman pada satu waktu (format bacaan buku), dan mode tampilan pengguliran berkelanjutan (tanpa batas). Untuk informasi selengkapnya tentang mode tampilan ini, lihat FlowDocumentReaderViewingMode.
Kontrol Navigasi Halaman: Jika mode tampilan dokumen menggunakan halaman, kontrol navigasi halaman menyertakan tombol untuk melompat ke halaman berikutnya (panah bawah) atau halaman sebelumnya (panah atas), serta indikator untuk nomor halaman saat ini dan jumlah total halaman. Membalik halaman juga dapat dicapai menggunakan tombol panah keyboard.
Zoom: Kontrol zoom memungkinkan pengguna untuk menambah atau mengurangi tingkat perbesar tampilan dengan mengklik tombol plus atau minus. Kontrol zoom juga menyertakan penggeser untuk menyesuaikan tingkat pembesaran tampilan. Untuk informasi selengkapnya, lihat Zoom .
Fitur-fitur ini dapat dimodifikasi berdasarkan kontrol yang digunakan untuk menghosting konten alur. Bagian berikutnya menjelaskan kontrol yang berbeda.
Jenis Dokumen Aliran
Tampilan konten dokumen alur dan bagaimana tampilannya bergantung pada objek apa yang digunakan untuk menghosting konten alur. Ada empat kontrol yang mendukung tampilan konten alur: FlowDocumentReader, FlowDocumentPageViewer, RichTextBox, dan FlowDocumentScrollViewer. Kontrol ini dijelaskan secara singkat di bawah ini.
Nota
FlowDocument diperlukan untuk menghosting konten alur secara langsung, sehingga semua kontrol tampilan ini menggunakan FlowDocument untuk mengaktifkan hosting konten alur.
FlowDocumentReader
FlowDocumentReader mencakup fitur yang memungkinkan pengguna untuk memilih secara dinamis antara berbagai mode tampilan, termasuk mode tampilan satu halaman (halaman-pada-a-waktu), mode tampilan dua halaman-pada-a-waktu (format baca buku), dan mode tampilan gulir berkelanjutan (tanpa dasar). Untuk informasi selengkapnya tentang mode tampilan ini, lihat FlowDocumentReaderViewingMode. Jika Anda tidak memerlukan kemampuan untuk beralih secara dinamis antara mode tampilan yang berbeda, FlowDocumentPageViewer dan FlowDocumentScrollViewer menyediakan penampil konten aliran yang lebih ringan bobotnya yang tetap dalam mode tampilan tertentu.
FlowDocumentPageViewer dan FlowDocumentScrollViewer
FlowDocumentPageViewer menampilkan konten dalam mode tampilan satu halaman, sementara FlowDocumentScrollViewer menunjukkan konten dalam mode gulir terus menerus. Baik FlowDocumentPageViewer maupun FlowDocumentScrollViewer ditetapkan ke mode tampilan tertentu. Bandingkan dengan FlowDocumentReader, yang mencakup fitur yang memungkinkan pengguna untuk secara dinamis memilih antara berbagai mode tampilan (sebagaimana disediakan oleh enumerasi FlowDocumentReaderViewingMode), dengan mengorbankan sumber daya yang lebih besar daripada FlowDocumentPageViewer atau FlowDocumentScrollViewer.
Secara default, bilah gulir vertikal selalu ditampilkan, dan bilah gulir horizontal menjadi terlihat jika diperlukan. UI default untuk FlowDocumentScrollViewer tidak menyertakan toolbar; namun, properti IsToolBarVisible dapat digunakan untuk mengaktifkan toolbar bawaan.
RichTextBox
Anda menggunakan RichTextBox saat ingin mengizinkan pengguna mengedit konten alur. Misalnya, jika Anda ingin membuat editor yang memungkinkan pengguna untuk memanipulasi hal-hal seperti tabel, pemformatan miring dan tebal, dll, Anda akan menggunakan RichTextBox. Lihat Gambaran Umum RichTextBox untuk informasi selengkapnya.
Nota
Konten alur di dalam RichTextBox tidak berperilaku persis seperti konten alur yang terdapat dalam kontrol lain. Misalnya, tidak ada kolom dalam RichTextBox dan karenanya tidak ada perilaku mengubah ukuran otomatis. Selain itu, fitur konten alur yang biasanya dibangun seperti pencarian, mode tampilan, navigasi halaman, dan zoom tidak tersedia dalam RichTextBox.
Membuat Konten yang Mengalir
Konten alur bisa kompleks, terdiri dari berbagai elemen termasuk teks, gambar, tabel, dan bahkan UIElement kelas turunan seperti kontrol. Untuk memahami cara membuat konten alur yang kompleks, poin-poin berikut sangat penting:
Kelas terkait Alur: Setiap kelas yang digunakan dalam konten alur memiliki tujuan tertentu. Selain itu, hubungan hierarkis antara kelas alur membantu Anda memahami bagaimana mereka digunakan. Misalnya, kelas yang berasal dari kelas Block digunakan untuk berisi objek lain sementara kelas yang berasal dari Inline berisi objek yang ditampilkan.
Skema Konten: Dokumen alur dapat memerlukan sejumlah besar elemen berlapis. Skema konten menentukan kemungkinan hubungan induk/anak antar elemen.
Bagian berikut akan membahas masing-masing area ini secara lebih rinci.
Kelas Terkait Alur
Diagram di bawah ini menunjukkan objek yang paling sering digunakan dengan konten alur:
Diagram 
Untuk tujuan konten alur, ada dua kategori penting:
Kelas turunan blok: Juga disebut "Elemen konten blok" atau hanya "Elemen Blok". Elemen yang mewarisi dari Block dapat digunakan untuk mengelompokkan elemen di bawah induk umum atau untuk menerapkan atribut umum ke grup.
Kelas turunan sebaris: Juga disebut "Elemen konten sebaris" atau hanya "Elemen Sebaris". Elemen yang mewarisi dari Inline terkandung dalam Elemen Blok atau Elemen Sebaris lainnya. Elemen Sebaris sering digunakan sebagai kontainer langsung konten yang dirender ke layar. Misalnya, Paragraph (Block Element) dapat berisi Run (Elemen Sebaris) tetapi Run benar-benar berisi teks yang dirender di layar.
Setiap kelas dalam dua kategori ini dijelaskan secara singkat di bawah ini.
Kelas turunan dari blok
Paragraf
Paragraph biasanya digunakan untuk mengelompokkan konten ke dalam paragraf. Penggunaan Paragraf yang paling sederhana dan paling umum adalah membuat paragraf teks.
<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
Namun, Anda juga dapat mencakup elemen turunan sebaris lainnya seperti yang terlihat di bawah.
Bagian
Section hanya digunakan untuk berisi elemen turunan Blocklainnya. Ini tidak menerapkan pemformatan default apa pun ke elemen yang dikandungnya. Namun, nilai properti apa pun yang ditetapkan pada Section berlaku untuk elemen turunannya. Bagian juga memungkinkan Anda untuk melakukan iterasi secara otomatis melalui koleksi elemen turunannya. Section digunakan dengan cara yang sama dengan tag< DIV >dalam HTML.
Dalam contoh di bawah ini, tiga paragraf didefinisikan di bawah satu Section. Bagian ini memiliki nilai properti Background Merah, oleh karena itu warna latar belakang paragraf juga berwarna merah.
<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
BlockUIContainer
BlockUIContainer memungkinkan elemen UIElement (yaitu Button) untuk disematkan dalam konten alur turunan blok. InlineUIContainer (lihat di bawah) digunakan untuk menyematkan elemen UIElement dalam konten alur turunan sebaris. BlockUIContainer dan InlineUIContainer penting karena tidak ada cara lain untuk menggunakan UIElement dalam konten alur kecuali terkandung dalam salah satu dari dua elemen ini.
Contoh berikut menunjukkan cara menggunakan elemen BlockUIContainer untuk menghosting objek UIElement dalam konten alur.
<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>
Gambar berikut menunjukkan cara contoh ini ditampilkan.
Daftar
List digunakan untuk membuat daftar berbutir atau numerik. Atur properti MarkerStyle ke nilai enumerasi TextMarkerStyle untuk menentukan gaya daftar. Contoh di bawah ini menunjukkan cara membuat daftar sederhana.
<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
Nota
List adalah satu-satunya elemen aliran yang menggunakan ListItemCollection untuk mengelola elemen anak.
Tabel
Table digunakan untuk membuat tabel. Table mirip dengan elemen Grid tetapi memiliki lebih banyak kemampuan dan, oleh karena itu, membutuhkan overhead sumber daya yang lebih besar. Karena Grid adalah UIElement, Grid tidak dapat digunakan dalam konten alur kecuali terkandung dalam InlineUIContainer atau . Untuk informasi selengkapnya tentang Table, lihat Gambaran Umum Tabel .
Kelas turunan sebaris
jalankan
Run digunakan untuk memuat teks yang tidak diformat. Anda mungkin mengharapkan objek Run digunakan secara ekstensif dalam konten alur. Namun, dalam markup, elemen Run tidak diperlukan untuk digunakan secara eksplisit. Run diperlukan untuk digunakan saat membuat atau memanipulasi dokumen alur dengan menggunakan kode. Misalnya, dalam markup di bawah ini, Paragraph pertama menentukan elemen Run secara eksplisit sementara yang kedua tidak. Kedua paragraf menghasilkan output yang identik.
<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>
Nota
Mulai dari .NET Framework 4, properti Text objek Run adalah properti dependensi. Anda dapat mengikat properti Text ke sumber data, seperti TextBlock. Properti Text sepenuhnya mendukung pengikatan satu arah. Properti Text juga mendukung pengikatan dua arah, kecuali untuk RichTextBox. Misalnya, lihat Run.Text.
rentang
Span mengelompokkan elemen konten sebaris lainnya bersama-sama. Tidak ada penyajian yang melekat yang diterapkan pada konten dalam elemen Span. Namun, elemen yang mewarisi dari Span termasuk Hyperlink, Bold, Italic dan Underline menerapkan pemformatan ke teks.
Di bawah ini adalah contoh Span yang digunakan untuk berisi konten sebaris termasuk teks, elemen Bold, dan 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>
Tangkapan layar berikut menunjukkan bagaimana contoh ini ditampilkan.
Cuplikan Layar 
InlineUIContainer
InlineUIContainer memungkinkan elemen UIElement (yaitu kontrol seperti Button) untuk disematkan dalam elemen konten Inline. Elemen ini adalah padanan sebaris untuk BlockUIContainer yang dijelaskan di atas. Di bawah ini adalah contoh yang menggunakan InlineUIContainer untuk menyisipkan Button sebaris dalam 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
Nota
InlineUIContainer tidak perlu digunakan secara eksplisit dalam markup. Jika Anda menghilangkannya, InlineUIContainer tetap akan dibuat saat kode dikompilasi.
Gambar dan Floater
Figure dan Floater digunakan untuk menyematkan konten di Dokumen Alur dengan properti penempatan yang dapat disesuaikan terlepas dari alur konten utama. Figure atau elemen Floater sering digunakan untuk menyoroti atau menonjolkan bagian konten, untuk menghosting gambar pendukung atau konten lain dalam alur konten utama, atau untuk menyuntikkan konten terkait secara longgar seperti iklan.
Contoh berikut menunjukkan cara menyematkan Figure ke dalam paragraf teks.
<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
Ilustrasi berikut menunjukkan bagaimana contoh ini ditampilkan.
Cuplikan Layar 
Figure dan Floater berbeda dalam beberapa cara dan digunakan untuk skenario yang berbeda.
Gambar :
Dapat diposisikan: Anda dapat mengatur jangkar horizontal dan vertikalnya untuk menambatkannya relatif terhadap halaman, konten, kolom, atau paragraf. Anda juga dapat menggunakan properti HorizontalOffset dan VerticalOffset untuk menentukan offset arbitrer.
Dapat diukur ke lebih dari satu kolom: Anda dapat mengatur tinggi dan lebar Figure ke kelipatan halaman, konten, atau tinggi atau lebar kolom. Perhatikan bahwa dalam kasus halaman dan konten, kelipatan yang lebih besar dari 1 tidak diizinkan. Misalnya, Anda dapat mengatur lebar Figure menjadi "halaman 0,5" atau "konten 0,25" atau "2 Kolom". Anda juga dapat mengatur tinggi dan lebar ke nilai piksel absolut.
Tidak melakukan paginasi: Jika konten di dalam Figure tidak muat di dalam Figure, hanya konten yang tertampung yang akan dirender dan konten sisanya akan hilang.
Floater:
Tidak dapat diposisikan dan akan ditampilkan di mana pun ruang dapat disediakan untuknya. Anda tidak dapat mengatur offset atau mengaitkan Floater.
Tidak dapat diubah ukurannya menjadi lebih dari satu kolom: Secara bawaan, Floater berukuran satu kolom. Ini memiliki properti Width yang dapat diatur ke nilai piksel absolut, tetapi jika nilai ini lebih besar dari lebar satu kolom, maka nilai tersebut akan diabaikan dan ukuran pengapung akan disesuaikan dengan lebar satu kolom. Anda dapat mengukurnya menjadi kurang dari satu kolom dengan mengatur lebar piksel yang benar, tetapi ukurannya tidak relatif kolom, sehingga "0,5Kolom" bukan ekspresi yang valid untuk lebar Floater. Floater tidak memiliki properti tinggi dan tingginya tidak dapat diatur, tingginya tergantung pada konten
Floater mempaginasi: Jika kontennya pada lebar yang ditentukan meluas lebih dari 1 tinggi kolom, maka elemen apung tersebut akan terputus dan berpindah halaman ke kolom berikutnya, halaman berikutnya, dll.
Figure adalah tempat yang baik untuk menempatkan konten mandiri di mana Anda ingin mengontrol ukuran dan posisi, dan yakin bahwa konten akan sesuai dengan ukuran yang ditentukan. Floater adalah tempat yang baik untuk menempatkan lebih banyak konten yang bebas mengalir, mirip dengan konten di halaman utama, tetapi dipisahkan darinya.
Pemisah Baris
LineBreak memicu pemutusan baris terjadi dalam konten alir. Contoh berikut menunjukkan penggunaan 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>
Tangkapan layar berikut menunjukkan bagaimana contoh ini ditampilkan.
Cuplikan layar 
Elemen Pengumpulan Alur
Dalam banyak contoh di atas, BlockCollection dan InlineCollection digunakan untuk membuat konten alur secara terprogram. Misalnya, untuk menambahkan elemen ke Paragraph, Anda dapat menggunakan sintaks:
myParagraph.Inlines.Add(new Run("Some text"));
Ini menambahkan Run ke InlineCollectionParagraph. Ini serupa dengan Run implisit yang ditemukan di dalam Paragraph dalam markup.
<Paragraph>
Some Text
</Paragraph>
Sebagai contoh penggunaan BlockCollection, contoh berikut membuat Section baru lalu menggunakan metode Tambahkan untuk menambahkan Paragraph baru ke konten Section.
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...")))
Selain menambahkan item ke koleksi alur, Anda juga dapat menghapus item. Contoh berikut menghapus elemen Inline terakhir di Span.
spanx.Inlines.Remove(spanx.Inlines.LastInline);
spanx.Inlines.Remove(spanx.Inlines.LastInline)
Contoh berikut menghapus semua konten ( elemenInline) dari Span.
spanx.Inlines.Clear();
spanx.Inlines.Clear()
Saat bekerja dengan konten alur secara terprogram, Anda mungkin akan menggunakan koleksi ini secara ekstensif.
Apakah elemen aliran menggunakan InlineCollection (Sebaris) atau BlockCollection (Blok) untuk memuat elemen anaknya tergantung pada jenis elemen anak (Block atau Inline) yang dapat dikandung oleh induk. Aturan penahanan untuk elemen konten alur dirangkum dalam skema konten di bagian berikutnya.
Nota
Ada jenis koleksi ketiga yang digunakan dengan konten alur, ListItemCollection, tetapi koleksi ini hanya digunakan dengan List. Selain itu, ada beberapa koleksi yang digunakan dengan Table. Lihat Gambaran Umum Tabel
Skema Konten
Mengingat jumlah elemen konten alur yang berbeda, ini bisa membingungkan untuk melacak jenis elemen anak apa yang dapat dikandung elemen. Diagram di bawah ini meringkas aturan penahanan untuk elemen alur. Panah mewakili kemungkinan hubungan induk/anak.
Diagram 
Seperti yang dapat dilihat dari diagram di atas, anak-anak yang diizinkan untuk elemen belum tentu ditentukan oleh apakah itu adalah elemen Block atau elemen Inline. Misalnya, Span (elemen Inline) hanya dapat memiliki elemen turunan Inline sementara Figure (juga elemen Inline) hanya dapat memiliki elemen turunan Block. Oleh karena itu, diagram berguna untuk menentukan dengan cepat elemen apa yang dapat dikandung di elemen lain. Sebagai contoh, mari kita gunakan diagram untuk menentukan cara membuat alur konten dari RichTextBox.
1. A RichTextBox harus berisi FlowDocument yang pada gilirannya harus berisi objek turunan Block. Di bawah ini adalah segmen yang sesuai dari diagram di atas.
Diagram 
Sejauh ini, inilah tampilan markup yang mungkin.
<RichTextBox>
<FlowDocument>
<!-- One or more Block-derived object… -->
</FlowDocument>
</RichTextBox>
2. Menurut diagram, ada beberapa elemen Block untuk dipilih termasuk Paragraph, Section, Table, List, dan BlockUIContainer (lihat Kelas turunan blok di atas). Katakanlah kita ingin sebuah Table. Menurut diagram di atas, Table berisi TableRowGroup yang berisi elemen TableRow, yang berisi elemen TableCell yang berisi objek turunan Block. Di bawah ini adalah segmen yang sesuai untuk Table diambil dari diagram di atas.
Diagram: 
Di bawah ini adalah markup yang sesuai.
<RichTextBox>
<FlowDocument>
<Table>
<TableRowGroup>
<TableRow>
<TableCell>
<!-- One or more Block-derived object… -->
</TableCell>
</TableRow>
</TableRowGroup>
</Table>
</FlowDocument>
</RichTextBox>
3. Lagi, satu atau beberapa elemen Block diperlukan di bawah TableCell. Untuk membuatnya sederhana, mari kita tempatkan beberapa teks di dalam sel. Kita dapat melakukan ini menggunakan Paragraph dengan elemen Run. Di bawah ini adalah segmen yang sesuai dari diagram yang menunjukkan bahwa Paragraph dapat mengambil elemen Inline dan bahwa Run (elemen Inline) hanya dapat mengambil teks biasa.
Diagram: 
Diagram 
Di bawah ini adalah seluruh contoh dalam 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>
Menyesuaikan Teks
Biasanya teks adalah jenis konten yang paling umum dalam dokumen alur. Meskipun objek yang diperkenalkan di atas dapat digunakan untuk mengontrol sebagian besar aspek bagaimana teks dirender, ada beberapa metode lain untuk menyesuaikan teks yang tercakup di bagian ini.
Dekorasi Teks
Dekorasi teks memungkinkan Anda menerapkan efek garis bawah, garis atas, garis dasar, dan coretan pada teks (lihat gambar di bawah). Dekorasi ini ditambahkan dengan menggunakan properti TextDecorations yang diekspos oleh beragam objek, termasuk Inline, Paragraph, TextBlock, dan TextBox.
Contoh berikut menunjukkan cara mengatur properti TextDecorations dari 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
Gambar berikut menunjukkan bagaimana contoh ini ditampilkan.
Cuplikan Layar 
Gambar berikut menunjukkan bagaimana dekorasi Garis Atas, Garis Dasar, dan Garis Bawah masing-masing dirender.
cuplikan layar 
cuplikan layar 
Tipografi
Properti Typography terdapat pada sebagian besar konten terkait dengan aliran, termasuk TextElement, FlowDocument, TextBlock, dan TextBox. Properti ini digunakan untuk mengontrol karakteristik/variasi teks tipografi (yaitu huruf kecil atau besar, membuat superskrip dan subskrip, dll).
Contoh berikut menunjukkan cara mengatur atribut Typography, menggunakan Paragraph sebagai elemen contoh.
<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>
Gambar berikut menunjukkan bagaimana contoh ini ditampilkan.
Sebaliknya, gambar berikut menunjukkan bagaimana contoh serupa dengan properti tipografi default ditampilkan.
Contoh berikut menunjukkan cara mengatur properti Typography secara terprogram.
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
Lihat tipografi di WPF untuk informasi selengkapnya tentang tipografi.
Lihat juga
Berkolaborasi dengan kami di GitHub
Sumber untuk konten ini dapat ditemukan di GitHub, yang juga dapat Anda gunakan untuk membuat dan meninjau masalah dan menarik permintaan. Untuk informasi selengkapnya, lihat panduan kontributor kami.
.NET Desktop feedback