TextBlock merupakan salah satu control paling mendasar dalam WPF yang sangat bermanfaat. Seperti label dengan TextBlock kita bisa menuliskan teks di layar dengan cara yang lebih sederhana. Jika pada label kita hanya bisa menampilkan teks satu baris (tapi bisa memuat gambar), sementara TextBlock walau hanya memuat teks (string) saja tami mampu menampilkan dalam beberapa baris (multiline). Keduanya memiliki kelebihan masing-masing tinggal penggunaannya disesuaikan dengan kebutuhan.
Kita memang sudah pernah coba menggunakannya di aplikasi "Hello World!", tapi ayo kita coba lagi mulai dari yang paling sederhana.
<Window x:Class="HelloWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
<TextBlock>Teks ini menggunakan TextBlock</TextBlock>
</Grid>
</Window>
Hasilnya:
Menambahkan Margin
<Window x:Class="HelloWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
<TextBlock Margin="10">Teks ini menggunakan TextBlock</TextBlock>
</Grid>
</Window>
Hasilnya:
TextBlock dengan Teks yang Panjang
Kemudian kita akan melihat beberapa cara TextBlock menangani teks yang panjang.
<Window x:Class="HelloWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
<StackPanel Margin="20">
<TextBlock Margin="5" Foreground="Red">
Ini adalah contoh TextBlock untuk menangani<LineBreak />
teks panjang dengan "Line Break".
</TextBlock>
<TextBlock Margin="5" TextTrimming="CharacterEllipsis" Foreground="Green">
Menggunakan elipsis (titik tiga) untuk mempersingkat teks yang kepanjangan.
</TextBlock>
<TextBlock Margin="5" TextWrapping="Wrap" Foreground="Blue">
Teks akan otomatis pindah ke bawah (multiline) jika kepanjangan karena property
TextWrapping.
</TextBlock>
</StackPanel>
</Grid>
</Window>
Hasilnya:
Bold, Italic dan Underline
Formating cetak tebal, miring, dan garis bawah langsung di baris teks.
<Window x:Class="HelloWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
<TextBlock Margin="20" TextWrapping="Wrap">
TextBlock dengan format teks <Bold>Cetak Tebal</Bold>, <Italic>Cetak Miring</Italic>
dan <Underline>Garis Bawah</Underline> yang diformat langsung dalam
baris teks bersangkutan.
</TextBlock>
</Grid>
</Window>
Hasilnya:
Span
Seperti saya bilang sebelumnya, ini berasa seperti HTML. Dalam TextBlock kita dapat menyisipkan span untuk kerperluan tampilan seperti font-size, style, weight, warna background, warna foreground, dll. Selain itu di dalam span kita tetap bisa menyisipkan elemen inline. Untuk lebih jelasnya mari kita lihat contoh di bawah.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
<TextBlock Margin="15" TextWrapping="Wrap">
Ini <Span FontWeight="Bold">merupakan</Span> sebuah
<Span Background="Silver" Foreground="Maroon">TextBlock</Span>
dengan <Span TextDecorations="Underline">beberapa</Span>
<Span FontStyle="Italic">elemen</Span> span,
<Span Foreground="Blue">
menggunakan <Bold>beberapa</Bold> macam <Italic>style</Italic>
</Span>.
</TextBlock>
</Grid>
</Window>
Hasilnya:
Format TextBlock dengan C# dari Code-Behind (Kode belakang)
Untuk melihat cara kerjanya kita bersihkan dulu code XAML menjadi seperti berikut:
<Window x:Class="HelloWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"
mc:Ignorable="d"
Title="Window1" Height="150" Width="500">
<Grid>
</Grid>
</Window>
Kemudian kita ubah kode di belakang nya pada Window1.xaml.cs menjadi sebagai berikut:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace HelloWPF
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
TextBlock tb = new TextBlock();
tb.TextWrapping = TextWrapping.Wrap;
tb.Margin = new Thickness(15);
tb.Inlines.Add("Sebuah contoh ");
tb.Inlines.Add(new Run("kontrol TextBlock ") { FontWeight = FontWeights.Bold });
tb.Inlines.Add("menggunakan ");
tb.Inlines.Add(new Run("format teks ") { FontStyle = FontStyles.Italic });
tb.Inlines.Add(new Run("inline ") { Foreground = Brushes.Blue });
tb.Inlines.Add("dengan C# ");
tb.Inlines.Add(new Run("dari kode belakang")
{ TextDecorations = TextDecorations.Underline });
tb.Inlines.Add(".");
this.Content = tb;
}
}
}
0 Comments