Blok teks

  • Artikel

Blok teks adalah kontrol utama untuk menampilkan teks baca-saja di aplikasi. Anda bisa menggunakannya untuk menampilkan teks baris tunggal atau multibaris, hyperlink sebaris, dan teks dengan pemformatan seperti tebal, miring, atau digaris bawahi.

Apakah ini kontrol yang tepat?

Blok teks biasanya lebih mudah digunakan dan memberikan performa penyajian teks yang lebih baik daripada blok teks kaya, jadi lebih disukai untuk sebagian besar teks UI aplikasi. Anda dapat dengan mudah mengakses dan menggunakan teks dari blok teks di aplikasi Anda dengan mendapatkan nilai properti Teks . Ini juga menyediakan banyak opsi pemformatan yang sama untuk menyesuaikan cara teks Anda dirender.

Meskipun Anda dapat meletakkan hentian baris dalam teks, blok teks dirancang untuk menampilkan satu paragraf dan tidak mendukung indentasi teks. Gunakan RichTextBlock saat Anda memerlukan dukungan untuk beberapa paragraf, teks multikolom, atau tata letak teks kompleks lainnya, atau elemen UI sebaris seperti gambar.

Untuk informasi selengkapnya tentang memilih kontrol teks yang tepat, lihat artikel Kontrol teks .

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol.

Membuat blok teks

Buka aplikasi Galeri WinUI 3 dan lihat TextBlock beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Berikut cara menentukan kontrol TextBlock sederhana dan mengatur properti Teksnya ke string.

<TextBlock Text="Hello, world!" />

TextBlock textBlock1 = new TextBlock();
textBlock1.Text = "Hello, world!";

Model konten

Ada dua properti yang bisa Anda gunakan untuk menambahkan konten ke TextBlock: Teks dan Sebaris.

Cara paling umum untuk menampilkan teks adalah dengan mengatur properti Teks ke nilai string, seperti yang ditunjukkan pada contoh sebelumnya.

Anda juga dapat menambahkan konten dengan menempatkan elemen konten alur sebaris di properti TextBox.Inlines, seperti ini.

<TextBlock>Text can be <Bold>bold</Bold>, <Underline>underlined</Underline>, 
    <Italic>italic</Italic>, or a <Bold><Italic>combination</Italic></Bold>.</TextBlock>

Elemen yang berasal dari kelas Sebaris, seperti Tebal, Miring, Jalankan, Rentang, dan LineBreak, mengaktifkan pemformatan yang berbeda untuk berbagai bagian teks. Untuk informasi selengkapnya, lihat bagian Memformat teks . Elemen Hyperlink sebaris memungkinkan Anda menambahkan hyperlink ke teks Anda. Namun, menggunakan Sebaris juga menonaktifkan penyajian teks jalur cepat, yang dibahas di bagian berikutnya.

Pertimbangan performa

Jika memungkinkan, XAML menggunakan jalur kode yang lebih efisien ke teks tata letak. Jalur cepat ini mengurangi penggunaan memori secara keseluruhan dan sangat mengurangi waktu CPU untuk melakukan pengukur dan pengaturan teks. Jalur cepat ini hanya berlaku untuk TextBlock, jadi harus lebih disukai jika memungkinkan daripada RichTextBlock.

Kondisi tertentu mengharuskan TextBlock untuk kembali ke jalur kode yang lebih kaya fitur dan intensif CPU untuk penyajian teks. Untuk mempertahankan penyajian teks di jalur cepat, pastikan untuk mengikuti panduan ini saat mengatur properti yang tercantum di sini.

  • Teks: Kondisi terpenting adalah jalur cepat hanya digunakan saat Anda mengatur teks dengan secara eksplisit mengatur properti Teks, baik di XAML atau dalam kode (seperti yang ditunjukkan pada contoh sebelumnya). Mengatur teks melalui koleksi Sebaris TextBlock (seperti <TextBlock>Inline text</TextBlock>) akan menonaktifkan jalur cepat, karena potensi kompleksitas beberapa format.
  • CharacterSpacing: Hanya nilai default 0 yang merupakan jalur cepat.
  • TextTrimming: Hanya nilai None, CharacterEllipsis, dan WordEllipsis yang merupakan jalur cepat. Nilai Klip menonaktifkan jalur cepat.

Catatan Sebelum Windows 10, versi 1607, properti tambahan juga memengaruhi jalur cepat. Jika aplikasi Anda dijalankan pada versi Windows yang lebih lama, kondisi ini juga akan menyebabkan teks Anda dirender di jalur lambat. Untuk informasi selengkapnya tentang versi, lihat Kode adaptif versi.

  • Tipografi: Hanya nilai default untuk berbagai properti Tipografi yang jalurnya cepat.
  • LineStackingStrategy: Jika LineHeight bukan 0, nilai BaselineToBaseline dan MaxHeight menonaktifkan jalur cepat.
  • IsTextSelectionEnabled: Hanya false yang merupakan jalur cepat. Mengatur properti ini ke true akan menonaktifkan jalur cepat.

Anda dapat mengatur properti DebugSettings.IsTextPerformanceVisualizationEnabled ke true selama penelusuran kesalahan untuk menentukan apakah teks menggunakan penyajian jalur cepat. Ketika properti ini diatur ke true, teks yang ada di jalur cepat ditampilkan dalam warna hijau cerah.

Tips Fitur ini dijelaskan secara mendalam dalam sesi ini dari Build 2015- Performa XAML: Teknik untuk Memaksimalkan Pengalaman Aplikasi Windows Universal yang Dibangun dengan XAML.

Anda biasanya mengatur pengaturan debug dalam metode OnLaunched mengambil alih di halaman code-behind untuk App.xaml, seperti ini.

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
    if (System.Diagnostics.Debugger.IsAttached)
    {
        this.DebugSettings.IsTextPerformanceVisualizationEnabled = true;
    }
#endif

// ...

}

Dalam contoh ini, TextBlock pertama dirender menggunakan jalur cepat, sedangkan yang kedua tidak.

<StackPanel>
    <TextBlock Text="This text is on the fast path."/>
    <TextBlock>This text is NOT on the fast path.</TextBlock>
<StackPanel/>

Saat Anda menjalankan XAML ini dalam mode debug dengan IsTextPerformanceVisualizationEnabled diatur ke true, hasilnya terlihat seperti ini.

Teks dirender dalam mode debug

Perhatian

Warna teks yang tidak berada di jalur cepat tidak diubah. Jika Anda memiliki teks di aplikasi dengan warnanya yang ditentukan sebagai hijau cerah, teks masih ditampilkan dalam warna hijau cerah saat berada di jalur penyajian yang lebih lambat. Berhati-hatilah untuk tidak membingungkan teks yang diatur ke hijau di aplikasi dengan teks yang berada di jalur cepat dan hijau karena pengaturan debug.

Memformat teks

Meskipun properti Teks menyimpan teks biasa, Anda dapat menerapkan berbagai opsi pemformatan ke kontrol TextBlock untuk menyesuaikan cara teks dirender di aplikasi Anda. Anda dapat mengatur properti kontrol standar seperti FontFamily, FontSize, FontStyle, Foreground, dan CharacterSpacing untuk mengubah tampilan teks. Anda juga dapat menggunakan elemen teks sebaris dan properti terlampir Tipografi untuk memformat teks Anda. Opsi ini hanya memengaruhi cara TextBlock menampilkan teks secara lokal, jadi jika Anda menyalin dan menempelkan teks ke dalam kontrol teks kaya, misalnya, tidak ada pemformatan yang diterapkan.

Catatan

Ingat, seperti yang disebutkan di bagian sebelumnya, elemen teks sebaris dan nilai tipografi non-default tidak dirender di jalur cepat.

Elemen sebaris

Namespace Layanan Microsoft.UI.Xaml.Documents menyediakan berbagai elemen teks sebaris yang dapat Anda gunakan untuk memformat teks Anda, seperti Tebal, Miring, Jalankan, Rentang, dan GarisBreak.

Anda dapat menampilkan serangkaian string dalam TextBlock, di mana setiap string memiliki pemformatan yang berbeda. Anda dapat melakukan ini dengan menggunakan elemen Run untuk menampilkan setiap string dengan pemformatannya dan dengan memisahkan setiap elemen Run dengan elemen LineBreak.

Berikut cara menentukan beberapa string teks yang diformat secara berbeda dalam TextBlock dengan menggunakan objek Jalankan yang dipisahkan dengan LineBreak.

<TextBlock FontFamily="Segoe UI" Width="400" Text="Sample text formatting runs">
    <LineBreak/>
    <Run Foreground="Gray" FontFamily="Segoe UI Light" FontSize="24">
        Segoe UI Light 24
    </Run>
    <LineBreak/>
    <Run Foreground="Teal" FontFamily="Georgia" FontSize="18" FontStyle="Italic">
        Georgia Italic 18
    </Run>
    <LineBreak/>
    <Run Foreground="Black" FontFamily="Arial" FontSize="14" FontWeight="Bold">
        Arial Bold 14
    </Run>
</TextBlock>

Berikut hasilnya.

Teks diformat dengan elemen eksekusi

Tipografi

Properti terlampir dari kelas Tipografi menyediakan akses ke sekumpulan properti tipografi Microsoft OpenType. Anda dapat mengatur properti terlampir ini baik pada TextBlock, atau pada elemen teks sebaris individual. Contoh-contoh ini menunjukkan keduanya.

<TextBlock Text="Hello, world!"
           Typography.Capitals="SmallCaps"
           Typography.StylisticSet4="True"/>

TextBlock textBlock1 = new TextBlock();
textBlock1.Text = "Hello, world!";
Typography.SetCapitals(textBlock1, FontCapitals.SmallCaps);
Typography.SetStylisticSet4(textBlock1, true);

<TextBlock>12 x <Run Typography.Fraction="Slashed">1/3</Run> = 4.</TextBlock>

Dapatkan kode sampel