Share via

Blok teks kaya

  • Artikel

Blok teks kaya menyediakan beberapa fitur untuk tata letak teks tingkat lanjut yang dapat Anda gunakan saat Anda memerlukan dukungan untuk paragraf, elemen UI sebaris, atau tata letak teks kompleks.

Apakah ini kontrol yang tepat?

Gunakan RichTextBlock saat Anda memerlukan dukungan untuk beberapa paragraf, multi-kolom, atau tata letak teks kompleks lainnya, atau elemen UI sebaris seperti gambar.

Gunakan TextBlock untuk menampilkan sebagian besar teks baca-saja di aplikasi Anda. Anda bisa menggunakannya untuk menampilkan teks baris tunggal atau multibaris, hyperlink sebaris, dan teks dengan pemformatan seperti tebal, miring, atau digaris bawahi. TextBlock menyediakan model konten yang lebih sederhana, sehingga biasanya lebih mudah digunakan, dan dapat memberikan performa penyajian teks yang lebih baik daripada RichTextBlock. Ini lebih disukai untuk sebagian besar teks UI aplikasi. Meskipun Anda dapat meletakkan hentian baris dalam teks, TextBlock dirancang untuk menampilkan satu paragraf dan tidak mendukung indentasi teks.

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

Rekomendasi

Lihat Tipografi dan Panduan untuk font.

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 dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

Membuat blok teks kaya

Buka aplikasi Galeri WinUI 3 dan lihat RichTextBlock sedang 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

Properti konten RichTextBlock adalah properti Blokir , yang mendukung teks berbasis paragraf melalui elemen Paragraf . Ini tidak memiliki properti Teks yang dapat Anda gunakan untuk mengakses konten teks kontrol dengan mudah di aplikasi Anda. Namun, RichTextBlock menyediakan beberapa fitur unik yang tidak disediakan TextBlock.

RichTextBlock mendukung:

  • Beberapa paragraf. Atur indentasi untuk paragraf dengan mengatur properti TextIndent .
  • Elemen UI sebaris. Gunakan InlineUIContainer untuk menampilkan elemen UI, seperti gambar, sebaris dengan teks Anda.
  • Kontainer luapan. Gunakan elemen RichTextBlockOverflow untuk membuat tata letak teks multi-kolom.

Paragraf

Anda menggunakan elemen Paragraf untuk menentukan blok teks yang akan ditampilkan dalam kontrol RichTextBlock. Setiap RichTextBlock harus menyertakan setidaknya satu Paragraf.

Anda dapat mengatur jumlah inden untuk semua paragraf dalam RichTextBlock dengan mengatur properti RichTextBlock.TextIndent . Anda dapat mengganti pengaturan ini untuk paragraf tertentu di RichTextBlock dengan mengatur properti Paragraph.TextIndent ke nilai yang berbeda.

<RichTextBlock TextIndent="12">
  <Paragraph TextIndent="24">First paragraph.</Paragraph>
  <Paragraph>Second paragraph.</Paragraph>
  <Paragraph>Third paragraph. <Bold>With an inline.</Bold></Paragraph>
</RichTextBlock>

Elemen UI sebaris

Kelas InlineUIContainer memungkinkan Anda menyematkan UIElement sebaris dengan teks Anda. Skenario umum adalah menempatkan Gambar sebaris dengan teks Anda, tetapi Anda juga dapat menggunakan elemen interaktif, seperti Tombol atau Kotak Centang.

Jika Anda ingin menyematkan lebih dari satu elemen sebaris dalam posisi yang sama, pertimbangkan untuk menggunakan panel sebagai anak InlineUIContainer tunggal, lalu letakkan beberapa elemen di dalam panel tersebut.

Contoh ini menunjukkan cara menggunakan InlineUIContainer untuk menyisipkan gambar ke dalam RichTextBlock.

<RichTextBlock>
    <Paragraph>
        <Italic>This is an inline image.</Italic>
        <InlineUIContainer>
            <Image Source="Assets/Square44x44Logo.png" Height="30" Width="30"/>
        </InlineUIContainer>
        Mauris auctor tincidunt auctor.
    </Paragraph>
</RichTextBlock>

Kontainer luapan

Anda dapat menggunakan RichTextBlock dengan elemen RichTextBlockOverflow untuk membuat multi-kolom atau tata letak halaman tingkat lanjut lainnya. Konten untuk elemen RichTextBlockOverflow selalu berasal dari elemen RichTextBlock. Anda menautkan elemen RichTextBlockOverflow dengan mengaturnya sebagai OverflowContentTarget dari RichTextBlock atau RichTextBlockOverflow lainnya.

Berikut adalah contoh sederhana yang membuat tata letak dua kolom. Lihat bagian Contoh untuk contoh yang lebih kompleks.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RichTextBlock Grid.Column="0" 
                   OverflowContentTarget="{Binding ElementName=overflowContainer}" >
        <Paragraph>
            Proin ac metus at quam luctus ultricies.
        </Paragraph>
    </RichTextBlock>
    <RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>

Memformat teks

Meskipun RichTextBlock menyimpan teks biasa, Anda dapat menerapkan berbagai opsi pemformatan 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 bagaimana RichTextBlock menampilkan teks secara lokal, jadi jika Anda menyalin dan menempelkan teks ke dalam kontrol teks kaya, misalnya, tidak ada pemformatan yang diterapkan.

Elemen sebaris

Namespace Microsoft.UI.Xaml.Documents menyediakan berbagai elemen teks sebaris yang dapat Anda gunakan untuk memformat teks Anda, seperti Tebal, Miring, Jalankan, Rentang, dan LineBreak. Cara umum untuk menerapkan pemformatan ke bagian teks adalah dengan menempatkan teks dalam elemen Jalankan atau Rentang, lalu mengatur properti pada elemen tersebut.

Berikut adalah Paragraf dengan frasa pertama yang diperlihatkan dalam teks tebal, biru, 16pt.

<Paragraph>
    <Bold><Span Foreground="DarkSlateBlue" FontSize="16">Lorem ipsum dolor sit amet</Span></Bold>
    , consectetur adipiscing elit.
</Paragraph>

Tipografi

Properti terlampir dari kelas Tipografi menyediakan akses ke sekumpulan properti tipografi Microsoft OpenType. Anda dapat mengatur properti terlampir ini baik di RichTextBlock, atau pada elemen teks sebaris individual, seperti yang ditunjukkan di sini.

<RichTextBlock Typography.StylisticSet4="True">
    <Paragraph>
        <Span Typography.Capitals="SmallCaps">Lorem ipsum dolor sit amet</Span>
        , consectetur adipiscing elit.
    </Paragraph>
</RichTextBlock>

Dapatkan kode sampel

Kontrol teks

Untuk desainer

Untuk pengembang (XAML)

Untuk pengembang (lainnya)