Gambaran Umum Dokumen Alur
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 konsumsi dokumen utama. 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. Kita akan membahas kelas-kelas ini secara rinci nanti di bagian Kelas Terkait Alur dari gambaran umum ini. Untuk saat ini, berikut adalah contoh kode sederhana yang membuat dokumen alur yang terdiri dari paragraf dengan beberapa teks tebal dan daftar.
<!-- 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.
Dalam contoh ini, FlowDocumentReader kontrol digunakan untuk menghosting konten alur. Lihat Jenis Dokumen Alur untuk informasi selengkapnya tentang kontrol hosting konten alur. Paragraph, List, ListItem, dan Bold elemen digunakan untuk mengontrol pemformatan konten, berdasarkan urutannya dalam markup. Misalnya, Bold elemen hanya mencakup bagian teks dalam paragraf; sebagai hasilnya, 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 pilihan mereka termasuk mode tampilan satu halaman (halaman-at-a-time), mode tampilan dua halaman pada satu waktu (format baca buku), dan mode tampilan pengguliran berkelanjutan (tanpa dasar). 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.
Tipe Dokumen Alur
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, , FlowDocumentPageViewerRichTextBox, dan FlowDocumentScrollViewer. Kontrol ini dijelaskan secara singkat di bawah ini.
Catatan
FlowDocument diperlukan untuk menghosting konten alur secara langsung, sehingga semua kontrol tampilan ini menggunakan FlowDocument untuk mengaktifkan hosting konten alur.
FlowDocumentReader
FlowDocumentReader termasuk 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 satu waktu (format baca buku), dan mode tampilan pengguliran berkelanjutan (tanpa dasar). Untuk informasi selengkapnya tentang mode tampilan ini, lihat FlowDocumentReaderViewingMode. Jika Anda tidak memerlukan kemampuan untuk beralih secara dinamis di antara mode tampilan yang berbeda, FlowDocumentPageViewer dan FlowDocumentScrollViewer menyediakan penampil konten aliran yang lebih ringan yang diperbaiki dalam mode tampilan tertentu.
FlowDocumentPageViewer dan FlowDocumentScrollViewer
FlowDocumentPageViewer memperlihatkan konten dalam mode tampilan halaman-pada-a-time, sambil FlowDocumentScrollViewer menampilkan konten dalam mode gulir berkelanjutan. Keduanya FlowDocumentPageViewer dan FlowDocumentScrollViewer diperbaiki ke mode tampilan tertentu. FlowDocumentReaderBandingkan dengan , yang mencakup fitur yang memungkinkan pengguna untuk secara dinamis memilih antara berbagai mode tampilan (sebagaimana disediakan oleh FlowDocumentReaderViewingMode enumerasi), dengan biaya menjadi lebih intensif sumber daya 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, IsToolBarVisible properti dapat digunakan untuk mengaktifkan toolbar bawaan.
RichTextBox
Anda menggunakan RichTextBox saat Anda 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.
Catatan
Konten alur RichTextBox di dalam tidak ber perilaku persis seperti konten alur yang terkandung dalam kontrol lain. Misalnya, tidak ada kolom dalam dan RichTextBox 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 Alur
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 Block kelas 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:
Untuk tujuan konten alur, ada dua kategori penting:
Kelas turunan blok: Juga disebut "Blokir elemen konten" atau hanya "Blokir Elemen". Elemen yang mewarisi dapat Block 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 terkandung Inline dalam Elemen Blok atau Elemen Sebaris lainnya. Elemen Sebaris sering digunakan sebagai kontainer langsung konten yang dirender ke layar. Misalnya, Paragraph (Elemen Blok) dapat berisi Run (Elemen Sebaris) tetapi Run sebenarnya berisi teks yang dirender di layar.
Setiap kelas dalam dua kategori ini dijelaskan secara singkat di bawah ini.
Kelas turunan blok
Ayat
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 berisi elemen turunan sebaris lainnya seperti yang akan Anda lihat di bawah ini.
Bagian
Section hanya digunakan untuk berisi elemen -turunan lainnya Block. Ini tidak menerapkan pemformatan default apa pun ke elemen yang dikandungnya. Namun, nilai properti apa pun yang Section ditetapkan pada berlaku untuk elemen turunannya. Bagian juga memungkinkan Anda untuk melakukan iterasi secara terprogram melalui koleksi anaknya. 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 Background nilai properti 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
BlockUIContainerUIElement memungkinkan elemen (yaitu Button) untuk disematkan dalam konten alur turunan blok. InlineUIContainer (lihat di bawah) digunakan untuk menyematkan UIElement elemen dalam konten alur turunan sebaris. BlockUIContainer dan InlineUIContainer penting karena tidak ada cara lain untuk menggunakan UIElement konten alur kecuali terkandung dalam salah satu dari dua elemen ini.
Contoh berikut menunjukkan cara menggunakan BlockUIContainer elemen untuk menghosting UIElement objek 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 bagaimana contoh ini merender:
Daftar
List digunakan untuk membuat daftar berpoin atau numerik. Atur MarkerStyle properti ke TextMarkerStyle nilai enumerasi 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
Catatan
List adalah satu-satunya elemen alur yang menggunakan ListItemCollection untuk mengelola elemen anak.
Table
Table digunakan untuk membuat tabel. Table mirip Grid dengan elemen tetapi memiliki lebih banyak kemampuan dan, oleh karena itu, membutuhkan overhead sumber daya yang lebih besar. Karena Grid adalah UIElement, itu tidak dapat digunakan dalam konten alur kecuali terkandung dalam BlockUIContainer atau InlineUIContainer. Untuk informasi selengkapnya tentang Table, lihat Gambaran Umum Tabel.
Kelas turunan sebaris
jalankan
Run digunakan untuk memuat teks yang tidak diformat. Anda mungkin mengharapkan Run objek digunakan secara ekstensif dalam konten alur. Namun, dalam markup, Run elemen 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, yang pertama Paragraph menentukan Run elemen 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>
Catatan
Mulai dari .NET Framework 4, Text properti Run objek adalah properti dependensi. Anda dapat mengikat properti ke Text sumber data, seperti TextBlock. Properti Text sepenuhnya mendukung pengikatan satu arah. Properti Text ini juga mendukung pengikatan dua arah, kecuali untuk RichTextBox. Misalnya, lihat Run.Text.
Span
Span mengelompokkan elemen konten sebaris lainnya bersama-sama. Tidak ada penyajian yang melekat yang diterapkan pada konten dalam Span elemen. Namun, elemen yang mewarisi dari Span termasuk Hyperlink, Bold, Italic dan Underline menerapkan pemformatan ke teks.
Di bawah ini adalah contoh yang Span digunakan untuk berisi konten sebaris termasuk teks, Bold elemen, 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>
Cuplikan layar berikut menunjukkan bagaimana contoh ini dirender.
InlineUIContainer
InlineUIContainerUIElement memungkinkan elemen (yaitu kontrol seperti Button) untuk disematkan dalam Inline elemen konten. Elemen ini setara dengan BlockUIContainer yang dijelaskan di atas. Di bawah ini adalah contoh yang menggunakan InlineUIContainer untuk menyisipkan sebaris Button 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
Catatan
InlineUIContainer tidak perlu digunakan secara eksplisit dalam markup. Jika Anda menghilangkannya, akan InlineUIContainer dibuat saat kode dikompilasi.
Gambar dan Floater
Figure dan Floater digunakan untuk menyematkan konten dalam Dokumen Alur dengan properti penempatan yang dapat dikustomisasi terlepas dari alur konten utama. Figure atau Floater elemen 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 dirender.
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 dan VerticalOffset untuk HorizontalOffset menentukan offset arbitrer.
Dapat diukur ke lebih dari satu kolom: Anda dapat mengatur Figure tinggi dan lebar 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 menjadi Figure "halaman 0,5" atau "konten 0,25" atau "2 Kolom". Anda juga dapat mengatur tinggi dan lebar ke nilai piksel absolut.
Tidak mem-paginate: Jika konten di dalam Figure tidak pas di dalam Figure, konten apa pun akan dirender sesuai dan konten yang tersisa hilang
Floater:
Tidak dapat diposisikan dan akan merender di mana pun ruang dapat disediakan untuknya. Anda tidak dapat mengatur offset atau jangkar Floater.
Tidak dapat diukur ke lebih dari satu kolom: Secara default, Floater ukuran pada satu kolom. Ini memiliki Width properti yang dapat diatur ke nilai piksel absolut, tetapi jika nilai ini lebih besar dari satu lebar kolom diabaikan dan floater berukuran pada satu kolom. Anda dapat mengukurnya menjadi kurang dari satu kolom dengan mengatur lebar piksel yang benar, tetapi ukurannya tidak relatif kolom, sehingga "0,5Column" bukan ekspresi yang valid untuk Floater lebar. Floater tidak memiliki properti tinggi dan tingginya tidak dapat diatur, tingginya tergantung pada konten
Floater paginate: Jika kontennya pada lebar yang ditentukan meluas ke lebih dari 1 tinggi kolom, pemutus floater dan paginate 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 pas dalam ukuran yang ditentukan. Floater adalah tempat yang baik untuk menempatkan lebih banyak konten yang mengalir bebas yang mengalir mirip dengan konten halaman utama, tetapi dipisahkan darinya.
GarisBreak
LineBreak menyebabkan hentian baris terjadi dalam konten alur. 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>
Cuplikan layar berikut menunjukkan bagaimana contoh ini dirender.
Elemen Pengumpulan Alur
Dalam banyak contoh di atas, BlockCollection dan InlineCollection digunakan untuk membangun 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 InlineCollection dari Paragraph. Ini sama dengan implisit Run yang Paragraph ditemukan di dalam markup:
<Paragraph>
Some Text
</Paragraph>
Sebagai contoh penggunaan BlockCollection, contoh berikut membuat baru Section lalu menggunakan metode Tambahkan untuk menambahkan yang baru Paragraph ke Section konten.
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 terakhir Inline di Span.
spanx.Inlines.Remove(spanx.Inlines.LastInline);
spanx.Inlines.Remove(spanx.Inlines.LastInline)
Contoh berikut menghapus semua konten (Inline elemen) 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 alur menggunakan InlineCollection (Sebaris) atau BlockCollection (Blok) untuk memuat elemen turunannya tergantung pada jenis elemen turunan (Block atau Inline) apa yang dapat dikandung oleh induk. Aturan penahanan untuk elemen konten alur dirangkum dalam skema konten di bagian berikutnya.
Catatan
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 untuk informasi selengkapnya.
Skema Konten
Mengingat jumlah elemen konten alur yang berbeda, itu bisa luar biasa untuk melacak jenis elemen turunan apa yang dapat dikandung elemen. Diagram di bawah ini meringkas aturan penahanan untuk elemen alur. Panah mewakili kemungkinan hubungan induk/anak.
Seperti yang dapat dilihat dari diagram di atas, anak-anak yang diizinkan untuk elemen belum tentu ditentukan oleh apakah itu Block adalah elemen atau Inline elemen. Misalnya, Span ( Inline elemen) hanya dapat memiliki Inline elemen turunan sementara Figure (juga Inline elemen) hanya dapat memiliki Block elemen turunan. 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 konten alur dari RichTextBox.
1. Harus RichTextBox berisi FlowDocument yang pada gilirannya harus berisi Blockobjek -turunan. Di bawah ini adalah segmen yang sesuai dari diagram di atas.
Sejauh ini, inilah yang mungkin terlihat seperti markup.
<RichTextBox>
<FlowDocument>
<!-- One or more Block-derived object… -->
</FlowDocument>
</RichTextBox>
2. Menurut diagram, ada beberapa Block elemen yang dapat dipilih termasuk Paragraph, , Section, TableList, dan BlockUIContainer (lihat Kelas turunan blok di atas). Katakanlah kita ingin .Table Menurut diagram di atas, berisi Table TableRowGroup elemen yang mengandung TableRow , yang berisi TableCell elemen yang berisi Blockobjek -turunan. Di bawah ini adalah segmen yang sesuai untuk Table diambil dari diagram di atas.
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. Sekali lagi, satu atau beberapa Block elemen diperlukan di bawah .TableCell Untuk membuatnya sederhana, mari kita tempatkan beberapa teks di dalam sel. Kita dapat melakukan ini menggunakan Paragraph dengan Run elemen . Di bawah ini adalah segmen yang sesuai dari diagram yang menunjukkan bahwa Paragraph dapat mengambil Inline elemen dan bahwa Run ( Inline elemen) hanya dapat mengambil teks biasa.
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 besar, garis besar, dan coretan ke teks (lihat gambar di bawah). Dekorasi ini ditambahkan menggunakan TextDecorations properti yang diekspos oleh sejumlah objek termasuk Inline, , ParagraphTextBlock, dan TextBox.
Contoh berikut menunjukkan cara mengatur TextDecorations properti 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 dirender.
Gambar berikut menunjukkan bagaimana dekorasi Garis Besar, Garis Besar, dan Garis Bawah dirender.
Tipografi
Properti Typography diekspos oleh sebagian besar konten terkait alur termasuk TextElement, , FlowDocumentTextBlock, 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 Typography atribut, 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 dirender.
Sebaliknya, gambar berikut menunjukkan bagaimana contoh serupa dengan properti tipografi default dirender.
Contoh berikut menunjukkan cara mengatur Typography properti 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.
Baca juga
.NET Desktop feedback