The TextBlock control

TextBlock sebenarnya bukanlah sebuah kontrol, karena ia bukan merupakan turunan dari class Control. Namun demikian ia digunakan seperti kontrol-kontrol WPF framework lainnya. Karenanya, TextBlock kita sebut juga sebuah kontrol untuk memudahkan.

TextBlock control adalah salah satu dari kontrol-kontrol fundamental WPF. Meskipun demikian ia sangatlah berguna. Ia memungkinkan anda untuk menampilkan teks di layar, seperti Label kontrol, namun membutuhkan resource yang lebih sederhana dan lebih sedikit. Pengertian umum adalah bahwa sebuah Label adalah untuk teks yang singkat, teks-teks sebaris (akan tetapi dapat menyertakan sebuah gambar), sementara TextBlock juga bekerja sangat baik untuk teks yang berbaris-baris, akan tetapi hanya untuk teks (string). Label dan TextBlock kedua-duanya menawarkan keuntungan-keuntungan yang unik, sehingga yang mana yang perlu anda gunakan sangat tergantung pada situasi.

Kita telah menggunakan TextBlock kontrol di artikel "Hello, WPF!", tapi untuk saat ini, marilah kita melihat TextBlock dalam bentuknya yang paling sederhana.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock>This is a TextBlock</TextBlock>
    </Grid>
</Window>

Contoh diatas sangatlah sederhana dan jika anda telah membaca bab-bab sebelumnya dalam tutorial ini, maka tak ada yang baru disini. Teks diantara tag "TextBlock" adalah cara cepat untuk memberi konten kepada property Text daripada TextBlock.

Untuk contoh berikutnya, marilah kita mencoba teks yang lebih panjang guna melihat bagaimana TextBlock menangani hal ini. Saya juga menambahkan sedikit ruang batas (margin), agar dapat kelihatan sedikit lebih bagus.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock Margin="10">This is a TextBlock control and it comes with a very long text</TextBlock>
    </Grid>
</Window>

Dealing with long strings

Segera anda akan menyadari dari screenshot, bahwa TextBlock sangat berdaya untuk menangani teks yang panjang dan berbaris-baris, akan tetapi ia tidak akan melakukan apa-apa jika tidak diperintah (default). Dalam keadaan teks terlalu panjang untuk ditampilkan di layar, maka WPF akan menampilkan nya(render) sebanyak mungkin, kemudian berhenti.

Beruntung ada beberapa cara untuk menghadapi hal ini. Dalam contoh berikut saya akan menunjukkan kesemuanya, dan kemudian menjelaskannya satu persatu.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="200" Width="250">
    <StackPanel>
		<TextBlock Margin="10" Foreground="Red">
			This is a TextBlock control<LineBreak />
			with multiple lines of text.
		</TextBlock>
		<TextBlock Margin="10" TextTrimming="CharacterEllipsis" Foreground="Green">
			This is a TextBlock control with text that may not be rendered completely, which will be indicated with an ellipsis.
		</TextBlock>
		<TextBlock Margin="10" TextWrapping="Wrap" Foreground="Blue">
			This is a TextBlock control with automatically wrapped text, using the TextWrapping property.
		</TextBlock>
	</StackPanel>
</Window>

Jadi, kita memiliki tiga TextBlock kontrol, masing-masing dengan warna yang berbeda (menggunakan property Foreground) untuk memudahkan penggambaran. Ketiga kontrol menunjukkan bawa konten teks mereka yang terlalu panjang ditangani dengan cara yang berbeda-beda.

TextBlock yang berwarna merah menggunakan tag LineBreak untuk secara manual memotong baris di lokasi yang diinginkan. Ini memberikan anda kontrol yang absolut untuk menentukan pada posisi mana teks harus dipotong dan dilanjutkan ke baris baru, namun ini tidak sangat fleksibel dalam banyak situasi. Jika pengguna memperbesar window, teks akan dipotong pada posisi yang sama, sekalipun ruang yang ada mungkin masih cukup untuk memuat seluruh teks dalam satu baris.

TextBlock yang berwarna hijau menggunakan property TextTrimming dengan harga CharacterEllipsis untuk membuat TextBlock memunculkan ellipsis (...) ketika ia tidak dapat lagi menampilkan teks didalam kontrol. Ini adalah cara umum untuk menunjukkan bahwa masih ada teks yang tidak dapat ditampilkan karena ruang tidak mencukupi. Ini bagus sekali jika anda memiliki teks yang misalnya terlalu panjang tapi anda tidak ingin menggunakan lebih dari 1 baris. Sebagai alternatif atas CharacterEllipsis anda dapat menggunakan WordEllipsis, yang akan memotong teks pada akhir kata yang memungkinkan daripada karakter terakhir yang memungkinkan, mencegah terjadinya penampilan kata hanya sebagian.

The TextBlock yang berwarna biru menggunakan property TextWrapping dengan harga Wrap, untuk membuat TextBlock memotong teks ke baris selanjutnya jika ia tidak dapat menampilkan seluruh teks di baris sebelumnya. Berbeda dengan TextBlock yang pertama, yang secara manual ditentukan dimana teks harus dipotong, kali ini pemotongan ini terjadi sepenuhnya secara otomatis dan bahkan lebih baik: Ia juga secara otomatis menyesuaikan apabila TextBlock mendapat lebih banyak atau lebih sedikit ruang. Cobalah perbesar atau perkecil window di contoh diatas dan anda akan dapat melihat bagaimana pemotongan teks terjadi secara otomatis sesuai dengan situasi.

Semua diatas adalah bagaimana cara menangani teks (string) yang sederhana didalam TextBlock. Di bab berikutnya, kita akan melihat ke beberapa fungsionalitas lanjut TextBlock, yang memungkinkan kita membuat teks dalam berbagai macam gaya (styles) didalam TextBlock, dan banyak lagi lainnya.