XAML Dasar

Dalam Bab sebelumnya, kita membicarakan apa itu XAML dan untuk apa digunakan, tetapi juga bagaimana membuat kontrol dalam XAML? Seperti yang anda akan lihat dalam contoh berikutnya, membuat sebuah kontrol dalam XAML semudah menulis namanya, dikelilingi oleh kurung sudut. Misalnya, sebuah tombol akan terlihat seperti ini:

<Button>

Setiap Tag XAML harus diakhiri, baik dengan menulis tag akhir atau dengan menuliskan garis miring pada akhir dari tag XAML

<Button></Button>

atau

<Button />

Banyak Kontrol yang mengizinkan untuk memasukkan konten di antara tag awal dan akhir, dimana adalah konten dari kontrol tersebut. misalnya, Kontrol tombol mengizinkan anda menentukan teks yang ditampilkan diantara tag awal dan akhir

<Button>A button</Button>

HTML tidaklah case-sensitive, tetapi tidaklah sama dengan XAML, karena nama kontrol harus berkoresponden terhadap sebuah tipe dalam .NET framework. Begitu juga untuk nama atribut yang berkoresponden dengan properti sebuah kontrol. Inilah sebuah tombol dimana kita mendefinisikan kumpulan properti dengan menambahkan atribut ke dalam tag:

<Button FontWeight="Bold" Content="A button" />

Kita menentukan properti FontWeight, memberikan kita teks tebal, dan setelah kita menentukan properti konten, dimana sama seperti tulisan di antara tag awal dan akhir. Akan tetapi semua atribut dari sebuah kontrol juga dapat didefinisikan seperti ini, dimana mereka muncul sebagai tag anak dari kontrol utama, dengan menggunakan notasi Control-Dot-Property :

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Hasilnya sama seperti dengan di atas, sehingga dalam kasus ini, semua tentang sintaks dan tidak ada yang lain. Akan tetapi banyak kontrol memperbolehkan konten selain dari teks, misalnya kontrol lain. Inilah contoh dimana kita memiliki teks dalam warna berbeda di dalam satu tombol dengan menggunakan beberapa kontrol TextBlock di dalam tombol tersebut:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

Properti konten hanya memperbolehkan satu elemen anak, sehingga kita menggunakan sebuah WrapPanel untuk menampung beberapa TextBlock yang warnanya berbeda beda. Panel seperti WrapPanel, memainkan peran penting dalam WPF dan kita akan mendiskusikan hal tersebut secara lebih detail di bab lain. untuk sekarang, pikirkan saja panel sebagai penampung untuk kontrol lain.

Hasil yang sama dapat diselesaikan dengan mengikuti markup berikut, dimana merupakan cara lain untuk menuliskan hal yang sama:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Code vs XAML

Semoga contoh-contoh di atas menunjukan kepada anda bahwa XAML sangatlah mudah untuk ditulis, tetapi juga dengan berbagai cara yang berbeda untuk menulisnya, dan jika anda berpikir bahwa contoh di atas banyak sekali fungsi markup untuk membuat sebuah tombol dengan teks dalam warna berbeda, maka coba bandingkan ini dengan melakukan hal yang sama dalam C#:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Tentu saja contoh di atas bisa ditulis secara kurang eksplisit dan menggunakan lebih banyak sintaks, akan tetapi saya berpikir bahwa intinya tetap sama. XAML sangat pendek dan ringkas untuk menjelaskan antarmuka