Silverlight - Ikhtisar XAML

Salah satu hal pertama yang akan Anda temui saat bekerja dengan Silverlight adalah XAML. XAML Singkatan dari Extensible Application Markup Language. Ini adalah bahasa sederhana dan deklaratif berdasarkan XML.

Di XAML, sangat mudah untuk membuat, menginisialisasi, dan mengatur properti suatu objek dengan relasi hierarki.
Ini terutama digunakan untuk mendesain GUI.
Ini bisa digunakan untuk tujuan lain juga, misalnya, untuk mendeklarasikan alur kerja di dasar alur kerja.

Sintaks Dasar

Saat Anda membuat proyek Silverlight baru, Anda akan melihat beberapa kode XAML secara default di MainPage.xaml seperti gambar dibawah.

<UserControl x:Class = "FirstExample.MainPage" 
   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" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
         
   </Grid> 
	
</UserControl>

Anda dapat melihat bahwa file XAML yang diberikan di atas menyebutkan jenis informasi yang berbeda; semuanya dijelaskan secara singkat dalam tabel di bawah ini.

Informasi	Deskripsi
<UserControl	Menyediakan kelas dasar untuk menentukan kontrol baru yang merangkum kontrol yang ada dan menyediakan logikanya sendiri.
x: Class = "FirstExample.MainPage"	Ini adalah deklarasi kelas parsial, yang menghubungkan markup ke kode kelas parsial di belakangnya, yang didefinisikan di dalamnya.
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / presentasi"	Memetakan namespace XAML default untuk klien / kerangka kerja Silverlight.
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml"	Namespace XAML untuk bahasa XAML, yang memetakannya ke awalan x:.
xmlns: d = "http://schemas.microsoft.com / expression / blend / 2008"	Namespace XAML ditujukan untuk dukungan desainer, khususnya dukungan desainer di permukaan desain XAML Microsoft Visual Studio dan Microsoft Expression Blend.
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatibility/2006"	Menunjukkan dan mendukung mode kompatibilitas markup untuk membaca XAML.
>	Akhir elemen objek dari root.
<Grid> </Grid>	Ini adalah tag awal dan penutup dari objek grid kosong.
</UserControl>	Menutup elemen objek.

Aturan sintaks untuk XAML hampir mirip dengan XML. Jika Anda melihat dokumen XAML, Anda akan melihat bahwa sebenarnya itu adalah file XML yang valid. Sebaliknya tidak benar, karena dalam XML nilai atribut harus berupa string sedangkan di XAML dapat berupa objek berbeda yang dikenal sebagai sintaks elemen Properti.

Sintaks elemen Objek dimulai dengan tanda kurung siku kiri (<) diikuti dengan nama objek, misalnya Tombol.
Properti dan atribut elemen objek itu ditentukan.
Elemen Objek harus ditutup dengan garis miring (/) diikuti segera dengan tanda kurung siku (>).

Contoh objek sederhana tanpa elemen anak ditunjukkan di bawah ini.

<Button/>

Contoh elemen objek dengan beberapa atribut -

<Button Content = "Click Me" Height = "30" Width = "60"/>

Contoh sintaks alternatif untuk mendefinisikan properti (sintaks elemen properti) -

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

Contoh Objek dengan Elemen Anak: StackPanel berisi Textblock sebagai elemen anak.

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel/>

Mengapa XAML di Silverlight

XAML awalnya tidak diciptakan untuk Silverlight. Itu berasal dari WPF, Yayasan Presentasi Windows. Silverlight sering digambarkan sebagai bagian dari WPF. Ini tidak sepenuhnya benar, karena Silverlight dapat melakukan beberapa hal yang tidak dapat dilakukan WPF. Meskipun fungsinya tumpang tindih, keduanya sedikit berbeda dalam detailnya.

Lebih akurat untuk mengatakan bahwa WPF dan Silverlight sangat mirip dalam banyak hal. Terlepas dari perbedaannya, masih informatif untuk melihat fitur XAML yang dipinjam Silverlight dari WPF. Misalnya, Silverlight menawarkan grafik primitif untuk bitmap dan bentuk yang dapat diskalakan.
Ini juga menyediakan elemen untuk rendering video dan audio.
Ini memiliki dukungan teks berformat sederhana, dan Anda dapat menganimasikan elemen apa pun. Jika Anda mengenal WPF, rangkaian fitur ini akan familiar bagi Anda.
Satu hal penting, Anda tidak dapat menggunakan WPF XAML dan menggunakannya di Silverlight.
Meski ada kesamaan, Anda juga akan menemukan banyak perbedaan kecil.

XAML & Kode Belakang

XAML mendefinisikan tampilan dan struktur antarmuka pengguna. Namun, jika Anda ingin aplikasi Anda melakukan sesuatu yang berguna saat pengguna berinteraksi dengannya, Anda memerlukan beberapa kode.

Setiap file XAML biasanya dikaitkan dengan file kode sumber, yang kami sebut sebagai kode di belakangnya. Berbagai Microsoft Frameworks menggunakan istilah ini.
Kode di belakang biasanya perlu menggunakan elemen yang ditentukan dalam XAML, baik untuk mengambil informasi tentang input pengguna, atau untuk menampilkan informasi kepada pengguna.
Dalam kode XAML yang diberikan di bawah ini, TextBlock dan Buttonditentukan. Secara default, saat aplikasi dijalankan, akan muncul teks "Hello World!"Di halaman web dan sebuah tombol.

<UserControl x:Class = "FirstExample.MainPage" 
   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" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5"> 
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
</UserControl>

Kode di belakang dapat mengakses elemen apa pun yang diberi nama dengan x:Name pengarahan.
Elemen bernama menjadi tersedia melalui bidang di kode di belakang, memungkinkan kode untuk mengakses objek ini dan anggotanya dengan cara biasa.
Itu x:Prefix menandakan bahwa nama tersebut bukan properti normal.
x:Name adalah sinyal khusus untuk kompilator XAML bahwa kita ingin memiliki akses ke objek ini dalam kode di belakangnya.

Diberikan di bawah ini adalah implementasi acara klik-tombol di mana TextBlock teks diperbarui.

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }
		
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

XAML bukan satu-satunya cara untuk mendesain elemen UI. Terserah Anda untuk mendeklarasikan objek di XAML atau mendeklarasikan / menulis dalam kode.
XAML adalah opsional, tetapi meskipun demikian, XAML adalah inti dari Silverlight rancangan.
Tujuan dari pengkodean XAML adalah untuk memungkinkan perancang visual membuat elemen antarmuka pengguna secara langsung. Karena itu,Silverlight bertujuan untuk memungkinkan pengontrolan semua aspek visual antarmuka pengguna dari mark-up.