Bagikan melalui

Mengoptimalkan Performa: Teks

WPF mencakup dukungan untuk presentasi konten teks melalui penggunaan kontrol antarmuka pengguna (UI) kaya fitur. Secara umum Anda dapat membagi penyajian teks dalam tiga lapisan:

  1. Menggunakan objek Glyphs dan GlyphRun secara langsung.

  2. Menggunakan objek FormattedText.

  3. Menggunakan kontrol tingkat tinggi, seperti objek TextBlock dan FlowDocument.

Topik ini menyediakan rekomendasi performa penyajian teks.

Penyajian Teks pada Level Glyph

Windows Presentation Foundation (WPF) menyediakan dukungan teks tingkat lanjut termasuk penandaan tingkat glif dengan akses langsung ke Glyphs bagi pelanggan yang ingin menangkap dan menyimpan teks setelah pemformatan. Fitur-fitur ini memberikan dukungan penting untuk berbagai persyaratan penyajian teks dalam setiap skenario berikut.

  • Tampilan layar dokumen berformat tetap.

  • Skenario cetak.

    • Extensible Application Markup Language (XAML) sebagai bahasa printer perangkat.

    • Microsoft XPS Document Writer.

    • Driver printer sebelumnya menghasilkan output dari aplikasi Win32 ke format tetap.

    • Format cetak spool.

  • Representasi dokumen berformat tetap, termasuk klien untuk versi Windows sebelumnya dan perangkat komputasi lainnya.

Nota

Glyphs dan GlyphRun dirancang untuk presentasi dokumen format tetap dan skenario cetak. WPF menyediakan beberapa elemen untuk skenario tata letak umum dan antarmuka pengguna (UI) seperti Label dan TextBlock. Untuk informasi selengkapnya tentang tata letak dan skenario UI, lihat tipografi di WPF.

Contoh berikut menunjukkan cara menentukan properti untuk objek Glyphs di XAML. Contoh mengasumsikan bahwa font Arial, Courier New, dan Times New Roman diinstal di folder C:\WINDOWS\Fonts di komputer lokal.

<!-- The example shows how to use a Glyphs object. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >

   <StackPanel Background="PowderBlue">

      <Glyphs
         FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
         FontRenderingEmSize = "100"
         StyleSimulations    = "BoldSimulation"
         UnicodeString       = "Hello World!"
         Fill                = "Black"
         OriginX             = "100"
         OriginY             = "200"
      />

   </StackPanel>
</Page>

Menggunakan DrawglyphRun

Jika Anda memiliki kontrol kustom dan ingin merender glyph, gunakan metode DrawGlyphRun.

WPF juga menyediakan layanan tingkat bawah untuk pemformatan teks kustom melalui penggunaan objek FormattedText. Cara penyajian teks yang paling efisien di Windows Presentation Foundation (WPF) adalah dengan menghasilkan konten teks pada tingkat glyph menggunakan Glyphs dan GlyphRun. Namun, biaya efisiensi ini adalah hilangnya pemformatan teks kaya yang mudah digunakan, yang merupakan fitur bawaan kontrol Windows Presentation Foundation (WPF), seperti TextBlock dan FlowDocument.

Objek FormattedText

Objek FormattedText memungkinkan Anda menggambar teks multibaris, di mana setiap karakter dalam teks dapat diformat satu per satu. Untuk informasi selengkapnya, lihat Gambar Teks Berformat.

Untuk membuat teks berformat, panggil konstruktor FormattedText untuk membuat objek FormattedText. Setelah Anda membuat string teks berformat awal, Anda bisa menerapkan rentang gaya pemformatan. Jika aplikasi Anda ingin menerapkan tata letaknya sendiri, maka objek FormattedText lebih baik daripada menggunakan kontrol, seperti TextBlock. Untuk informasi selengkapnya tentang objek FormattedText, lihat Gambar Teks Berformat .

Objek FormattedText menyediakan kemampuan pemformatan teks tingkat rendah. Anda bisa menerapkan beberapa gaya pemformatan ke satu atau beberapa karakter. Misalnya, Anda dapat memanggil metode SetFontSize dan SetForegroundBrush untuk mengubah pemformatan lima karakter pertama dalam teks.

Contoh kode berikut membuat objek FormattedText dan merendernya.

protected override void OnRender(DrawingContext drawingContext)
{
    string testString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor";

    // Create the initial formatted text string.
    FormattedText formattedText = new FormattedText(
        testString,
        CultureInfo.GetCultureInfo("en-us"),
        FlowDirection.LeftToRight,
        new Typeface("Verdana"),
        32,
        Brushes.Black);

    // Set a maximum width and height. If the text overflows these values, an ellipsis "..." appears.
    formattedText.MaxTextWidth = 300;
    formattedText.MaxTextHeight = 240;

    // Use a larger font size beginning at the first (zero-based) character and continuing for 5 characters.
    // The font size is calculated in terms of points -- not as device-independent pixels.
    formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5);

    // Use a Bold font weight beginning at the 6th character and continuing for 11 characters.
    formattedText.SetFontWeight(FontWeights.Bold, 6, 11);

    // Use a linear gradient brush beginning at the 6th character and continuing for 11 characters.
    formattedText.SetForegroundBrush(
                            new LinearGradientBrush(
                            Colors.Orange,
                            Colors.Teal,
                            90.0),
                            6, 11);

    // Use an Italic font style beginning at the 28th character and continuing for 28 characters.
    formattedText.SetFontStyle(FontStyles.Italic, 28, 28);

    // Draw the formatted text string to the DrawingContext of the control.
    drawingContext.DrawText(formattedText, new Point(10, 0));
}

Protected Overrides Sub OnRender(ByVal drawingContext As DrawingContext)
    Dim testString As String = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor"

    ' Create the initial formatted text string.
    Dim formattedText As New FormattedText(testString, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, New Typeface("Verdana"), 32, Brushes.Black)

    ' Set a maximum width and height. If the text overflows these values, an ellipsis "..." appears.
    formattedText.MaxTextWidth = 300
    formattedText.MaxTextHeight = 240

    ' Use a larger font size beginning at the first (zero-based) character and continuing for 5 characters.
    ' The font size is calculated in terms of points -- not as device-independent pixels.
    formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5)

    ' Use a Bold font weight beginning at the 6th character and continuing for 11 characters.
    formattedText.SetFontWeight(FontWeights.Bold, 6, 11)

    ' Use a linear gradient brush beginning at the 6th character and continuing for 11 characters.
    formattedText.SetForegroundBrush(New LinearGradientBrush(Colors.Orange, Colors.Teal, 90.0), 6, 11)

    ' Use an Italic font style beginning at the 28th character and continuing for 28 characters.
    formattedText.SetFontStyle(FontStyles.Italic, 28, 28)

    ' Draw the formatted text string to the DrawingContext of the control.
    drawingContext.DrawText(formattedText, New Point(10, 0))
End Sub

Kontrol FlowDocument, TextBlock, dan Label

WPF menyertakan beberapa kontrol untuk menggambar teks ke layar. Setiap kontrol ditargetkan ke skenario yang berbeda dan memiliki daftar fitur dan batasannya sendiri.

FlowDocument Berdampak pada Performa Lebih dari TextBlock atau Label

Secara umum, elemen TextBlock harus digunakan ketika dukungan teks terbatas diperlukan, seperti kalimat singkat dalam antarmuka pengguna (UI). Label dapat digunakan ketika dukungan teks minimal diperlukan. Elemen FlowDocument adalah kontainer untuk dokumen yang dapat dialirkan kembali yang mendukung presentasi konten yang kaya, dan oleh karena itu, memiliki dampak performa yang lebih besar daripada menggunakan kontrol TextBlock atau Label.

Untuk informasi selengkapnya tentang FlowDocument, lihat Gambaran Umum Dokumen Alur .

Hindari Menggunakan TextBlock di FlowDocument

Elemen TextBlock berasal dari UIElement. Elemen Run berasal dari TextElement, yang lebih murah untuk digunakan daripada objek turunan UIElement. Jika memungkinkan, gunakan Run daripada TextBlock untuk menampilkan konten teks dalam FlowDocument.

Sampel markup berikut mengilustrasikan dua cara mengatur konten teks dalam FlowDocument:

<FlowDocument>

  <!-- Text content within a Run (more efficient). -->
  <Paragraph>
    <Run>Line one</Run>
  </Paragraph>

  <!-- Text content within a TextBlock (less efficient). -->
  <Paragraph>
    <TextBlock>Line two</TextBlock>
  </Paragraph>

</FlowDocument>

Hindari Menggunakan Jalankan untuk Mengatur Properti Teks

Secara umum, menggunakan Run dalam TextBlock lebih intensif performa daripada tidak menggunakan objek Run eksplisit sama sekali. Jika Anda menggunakan Run untuk mengatur properti teks, atur properti tersebut langsung pada TextBlock sebagai gantinya.

Sampel markup berikut mengilustrasikan dua cara ini untuk mengatur properti teks, dalam hal ini, properti FontWeight:

<!-- Run is used to set text properties. -->
<TextBlock>
  <Run FontWeight="Bold">Hello, world</Run>
</TextBlock>

<!-- TextBlock is used to set text properties, which is more efficient. -->
<TextBlock FontWeight="Bold">
  Hello, world
</TextBlock>

Tabel berikut menunjukkan biaya menampilkan 1000 objek TextBlock dengan dan tanpa Runeksplisit .

jenis TextBlock Waktu Pembuatan (ms) Waktu render (ms)
Menjalankan pengaturan properti teks 146 540
Pengaturan properti teks TextBlock 43 453

Hindari Pengikatan Data ke Properti Label.Content

Bayangkan skenario di mana Anda memiliki objek Label yang sering diperbarui dari sumber String. Saat melakukan pengikatan data pada properti Label dari elemen Content ke objek sumber String, Anda mungkin akan mengalami performa yang buruk. Setiap kali sumber String diperbarui, objek String lama dihapus dan String baru dibuat ulang—karena objek String bersifat tetap, objek tersebut tidak dapat diubah. Ini, pada gilirannya, menyebabkan objek ContentPresenter dari Label menghapus konten lama dan meregenerasi konten baru untuk menampilkan Stringyang baru.

Solusi untuk masalah ini sederhana. Jika Label tidak diatur ke nilai ContentTemplate khusus, ganti Label dengan TextBlock dan ikat data properti Text ke string sumber.

properti terikat data Waktu pembaruan (ms)
Label.Konten 835
TextBlock.Text 242

Objek Hyperlink adalah elemen konten aliran tingkat sebaris yang memungkinkan Anda menyematkan hyperlink dalam konten aliran.

Anda dapat mengoptimalkan penggunaan beberapa elemen Hyperlink dengan mengelompokkannya bersama-sama dalam TextBlockyang sama. Ini membantu meminimalkan jumlah objek yang Anda buat di aplikasi Anda. Misalnya, Anda mungkin ingin menampilkan beberapa hyperlink, seperti berikut ini:

Beranda MSN | MSN saya

Contoh markup berikut ini memperlihatkan beberapa elemen TextBlock yang digunakan untuk menampilkan hyperlink:

<!-- Hyperlinks in separate TextBlocks. -->
<TextBlock>
  <Hyperlink TextDecorations="None" NavigateUri="http://www.msn.com">MSN Home</Hyperlink>
</TextBlock>

<TextBlock Text=" | "/>

<TextBlock>
  <Hyperlink TextDecorations="None" NavigateUri="http://my.msn.com">My MSN</Hyperlink>
</TextBlock>

Contoh markup berikut menunjukkan cara yang lebih efisien untuk menampilkan hyperlink, kali ini, menggunakan satu TextBlock:

<!-- Hyperlinks combined in the same TextBlock. -->
<TextBlock>
  <Hyperlink TextDecorations="None" NavigateUri="http://www.msn.com">MSN Home</Hyperlink>
  
  <Run Text=" | " />
  
  <Hyperlink TextDecorations="None" NavigateUri="http://my.msn.com">My MSN</Hyperlink>
</TextBlock>

Objek TextDecoration adalah ornamen visual yang dapat Anda tambahkan ke teks; namun, itu dapat membutuhkan sumber daya kinerja yang tinggi untuk diinisialisasi. Jika Anda menggunakan elemen Hyperlink secara ekstensif, pertimbangkan untuk menampilkan garis bawah hanya saat memicu peristiwa, seperti peristiwa MouseEnter. Untuk informasi selengkapnya, lihat Menentukan Apakah Hyperlink digaris bawahi.

Gambar berikut menunjukkan bagaimana peristiwa MouseEnter memicu hyperlink bergaris bawah:

tautan menampilkan Hiasan Teks

Sampel markup berikut menunjukkan Hyperlink yang ditentukan dengan dan tanpa garis bawah:

<!-- Hyperlink with default underline. -->
<Hyperlink NavigateUri="http://www.msn.com">
  MSN Home
</Hyperlink>

<Run Text=" | " />

<!-- Hyperlink with no underline. -->
<Hyperlink Name="myHyperlink" TextDecorations="None"
           MouseEnter="OnMouseEnter"
           MouseLeave="OnMouseLeave"
           NavigateUri="http://www.msn.com">
  My MSN
</Hyperlink>

Tabel berikut menunjukkan biaya performa menampilkan 1000 elemen Hyperlink dengan dan tanpa garis bawah.

Hyperlink Waktu Pembuatan (ms) Waktu render (ms)
Dengan garis bawah 289 1130
Tanpa garis bawah 299 776

Fitur Pemformatan Teks

WPF menyediakan layanan pemformatan teks yang kaya, seperti tanda hubung otomatis. Layanan ini dapat memengaruhi performa aplikasi dan hanya boleh digunakan saat diperlukan.

Hindari Penggunaan Tanda Hubung yang Tidak Perlu

Pemenggalan tanda hubung otomatis menentukan pemutusan tanda hubung untuk baris teks, dan memberikan posisi putus tambahan untuk baris dalam objek TextBlock dan FlowDocument. Secara default, fitur tanda hubung otomatis dinonaktifkan dalam objek ini. Anda dapat mengaktifkan fitur ini dengan mengatur properti IsHyphenationEnabled objek ke true. Namun, mengaktifkan fitur ini menyebabkan WPF memulai interoperabilitas Model Objek Komponen (COM), yang dapat memengaruhi performa aplikasi. Disarankan agar Anda tidak menggunakan tanda hubung otomatis kecuali Anda membutuhkannya.

Gunakan Gambar Dengan Hati-hati

Unsur Figure mewakili bagian dari konten alur yang dapat diposisikan secara absolut dalam halaman tersebut. Dalam beberapa kasus, Figure dapat menyebabkan seluruh halaman secara otomatis memformat ulang jika posisinya bertabrakan dengan konten yang telah ditata. Anda dapat meminimalkan kemungkinan pemformatan ulang yang tidak perlu dengan mengelompokkan elemen Figure di samping satu sama lain, atau mendeklarasikannya di dekat bagian atas konten dalam skenario ukuran halaman tetap.

Paragraf Terbaik

Fitur paragraf optimal dari objek FlowDocument menjabarkan paragraf sehingga spasi putih didistribusikan secara merata. Secara default, fitur paragraf optimal dinonaktifkan. Anda dapat mengaktifkan fitur ini dengan mengatur properti IsOptimalParagraphEnabled objek ke true. Namun, mengaktifkan fitur ini berdampak pada performa aplikasi. Disarankan agar Anda tidak menggunakan fitur paragraf optimal kecuali Anda membutuhkannya.

Lihat juga

  • Last updated on