Bagikan melalui

Blok teks berformat

  • 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 bergaris bawah. TextBlock menyediakan model konten yang lebih sederhana, sehingga biasanya lebih mudah digunakan, dan dapat memberikan performa rendering teks yang lebih baik daripada RichTextBlock. Ini lebih disukai untuk sebagian besar teks antarmuka pengguna 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.

Membuat blok teks kaya

Buka aplikasi Galeri WinUI 3 dan lihat RichTextBlock beraksi

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

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

RichTextBlock mendukung:

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 mengambil alih pengaturan ini untuk paragraf tertentu dalam 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 umumnya 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 dalam posisi sebaris yang sama, pertimbangkan untuk menggunakan panel sebagai satu-satunya anak dari InlineUIContainer, lalu letakkan beberapa elemen 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 cadangan

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 bagaimana 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 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, Run, Span, 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 ini adalah paragraf dengan frasa pertama yang ditampilkan dalam teks tebal, biru, 16 poin.

<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>

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.

Kontrol teks

Untuk desainer

Untuk pengembang (XAML)

Untuk pengembang (lainnya)