Silverlight - Memulai

Dalam bab ini, kita akan melihat contoh kerja Silverlight. Kami membutuhkan dua hal -

• Pertama, kami membutuhkan halaman web. Silverlight ditujukan untuk aplikasi internet yang kaya, Ini dirancang untuk berjalan di dalam browser web sebagai bagian dari halaman web. Halaman tersebut perlu memasukkan tag yang sesuai untuk memuat plugin Silverlight. Ini juga dapat menyertakan logika untuk mendeteksi apakah Silverlight diinstal, dan dapat menyediakan beberapa antarmuka pengguna fallback, jika tidak ada.

• Hal kedua yang kami butuhkan adalah konten Silverlight itu sendiri. Tutorial ini akan fokus pada model pemrograman .NET untuk Silverlight. Kami akan membuat aplikasi Silverlight terkompilasi yang berisi campuran XAML, bahasa mockup yang kami gunakan untuk menentukan antarmuka pengguna Silverlight, dan kode .NET yang ditulis dalam C #.

Buat halaman web

Cara termudah untuk mulai menggunakan Silverlight adalah membuat situs web biasa dengan halaman HTML dan tanpa kode sisi server. Mari kita lihat contoh yang sangat sederhana.

Step 1 - Buka Visual Studio. KlikFile menu, arahkan ke New lalu klik Project.

Step 2 - A New Projectkotak dialog akan terbuka. DibawahTemplates, Pilih Visual C# lalu click Silverlight. Di panel kanan, pilih Aplikasi Silverlight.

Masukkan nama proyek dan lokasi pada hard drive Anda untuk menyimpan proyek Anda dan kemudian klik OK untuk membuat proyek.

Proyek Silverlight sendiri hanya akan membangun konten Silverlight, dan konten tersebut hanyalah salah satu aset di antara banyak aset yang akan membentuk seluruh aplikasi web.

Klik OK.

Step 3 - Periksa Host the Silverlight application checkbox. Standarnya adalah Proyek Aplikasi Web ASP.NET.

Step 4- MS-Visual Studio telah membuat dua proyek, proyek Silverlight dan aplikasi web ASP.NET. Sekarang, kita membutuhkan aplikasi web ASP.NET. Anda dapat melihat ini diSolution Explorer jendela seperti yang ditunjukkan di bawah ini.

Apa pun yang dapat menyajikan konten melalui HTTP akan dilakukan tetapi ini benar Visual Studio, dan memahami teknologi web ASP.NET, itulah yang diberikannya kepada kami.

Untuk menunjukkan bahwa Silverlight tidak bergantung pada teknologi sisi server tertentu, mari kita hapus ini .aspx file, hanya menyisakan file HTML statis biasa.

Step 5- Klik kanan FirstExampleTestpage.aspx. Dari daftar opsi, klikDelete.

Step 6 - Set FirstExampleTestPage.html sebagai Start halaman.

Itu MainPage.xamlfile mendefinisikan antarmuka pengguna untuk konten Silverlight. Entah Anda dapat menulis kode XAML secara langsung atau Anda juga dapat menggunakanToolbox untuk menyeret dan melepaskan elemen UI yang berbeda.

Step 7 - Diberikan di bawah ini adalah kode sederhana di MainPage.xaml di mana a Button dan a TextBlock didefinisikan di dalam StackPanel.

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

Step 8 - Contoh ini mengasumsikan bahwa Anda telah membuat metode penanganan peristiwa bernama ClickMe_Click. Inilah tampilannya diMainPage.xaml.cs mengajukan.

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"; 
      } 
   } 
}

Step 9 - Aplikasi Silverlight dapat dijalankan di semua browser yang diinstal.

Step 10 - Ketika kode di atas dikompilasi dan dijalankan, Anda akan melihat halaman web berikut.

Step 11 - Sekarang, saat Anda mengeklik Click Me tombol, itu akan memperbarui teks di TextBlock seperti gambar dibawah.

Kami menyarankan Anda untuk menjalankan contoh di atas dengan menambahkan beberapa elemen UI lainnya.