Silverlight - เริ่มต้นใช้งาน

ในบทนี้เราจะดูตัวอย่างการทำงานของ Silverlight เราต้องการสองสิ่ง -

  • ขั้นแรกเราต้องมีหน้าเว็บ Silverlight มีไว้สำหรับแอปพลิเคชั่นอินเทอร์เน็ตที่หลากหลายซึ่งออกแบบมาให้ทำงานภายในเว็บเบราว์เซอร์โดยเป็นส่วนหนึ่งของหน้าเว็บ หน้านี้จำเป็นต้องรวมแท็กที่เหมาะสมเพื่อโหลดปลั๊กอิน Silverlight นอกจากนี้ยังสามารถรวมตรรกะในการตรวจสอบว่ามีการติดตั้ง Silverlight ไว้หรือไม่และสามารถให้อินเทอร์เฟซผู้ใช้ทางเลือกบางส่วนได้เมื่อไม่มีอยู่

  • สิ่งที่สองที่เราต้องการคือเนื้อหา Silverlight เอง บทช่วยสอนนี้จะเน้นที่รูปแบบการเขียนโปรแกรม. NET สำหรับ Silverlight เราจะสร้างแอปพลิเคชัน Silverlight ที่คอมไพล์แล้วซึ่งมีส่วนผสมของ XAML ซึ่งเป็นภาษาจำลองที่เราใช้กำหนดส่วนต่อประสานผู้ใช้ของ Silverlight และรหัส. NET ที่เขียนด้วยภาษา C #

สร้างเว็บเพจ

วิธีที่ง่ายที่สุดในการเริ่มใช้ Silverlight คือการสร้างเว็บไซต์ธรรมดาที่มีหน้า HTML และไม่มีโค้ดฝั่งเซิร์ฟเวอร์ ให้เราดูตัวอย่างง่ายๆ

Step 1 - เปิด Visual Studio. คลิกFile เมนูชี้ไปที่ New จากนั้นคลิก Project.

Step 2 - ก New Projectกล่องโต้ตอบจะเปิดขึ้น ภายใต้Templatesเลือก Visual C# แล้ว click Silverlight. ในบานหน้าต่างด้านขวาเลือกแอปพลิเคชัน Silverlight

ป้อนชื่อโปรเจ็กต์และตำแหน่งบนฮาร์ดไดรฟ์ของคุณเพื่อบันทึกโปรเจ็กต์ของคุณจากนั้นคลิก OK เพื่อสร้างโครงการ

โครงการ Silverlight นั้นกำลังจะสร้างเนื้อหา Silverlight และเนื้อหานั้นเป็นเพียงเนื้อหาเดียวในหลาย ๆ รายการที่จะประกอบขึ้นเป็นเว็บแอปพลิเคชันทั้งหมด

คลิก OK.

Step 3 - ตรวจสอบไฟล์ Host the Silverlight application checkbox. ค่าดีฟอลต์คือ ASP.NET Web Application Project

Step 4- MS-Visual Studio ได้สร้างสองโครงการคือโครงการ Silverlight และเว็บแอปพลิเคชัน ASP.NET ตอนนี้เราต้องการแอปพลิเคชันเว็บ ASP.NET คุณสามารถดูสิ่งนี้ได้ในไฟล์Solution Explorer หน้าต่างดังภาพด้านล่าง

ทุกสิ่งที่สามารถแสดงเนื้อหาผ่าน HTTP จะทำ แต่นี่คือ Visual Studioและเข้าใจเทคโนโลยีเว็บ ASP.NET นั่นคือสิ่งที่ให้เรา

เพื่อแสดงให้เห็นว่า Silverlight ไม่ได้ขึ้นอยู่กับเทคโนโลยีฝั่งเซิร์ฟเวอร์ใด ๆ ให้เราลบสิ่งนี้ .aspx ออกจากไฟล์ HTML คงที่ธรรมดา

Step 5- คลิกขวาที่ FirstExampleTestpage.aspx จากรายการตัวเลือกคลิกDelete.

Step 6 - ชุด FirstExampleTestPage.html เป็น Start หน้า.

MainPage.xamlไฟล์กำหนดส่วนต่อประสานผู้ใช้สำหรับเนื้อหา Silverlight คุณสามารถเขียนโค้ด XAML โดยตรงหรือใช้ไฟล์Toolbox เพื่อลากและวางองค์ประกอบ UI ต่างๆ

Step 7 - ระบุด้านล่างนี้เป็นรหัสง่ายๆใน MainPage.xaml ซึ่งก Button และก TextBlock ถูกกำหนดไว้ภายในไฟล์ 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 - ตัวอย่างนี้ถือว่าคุณได้สร้างเมธอดการจัดการเหตุการณ์ที่ชื่อ ClickMe_Click. นี่คือสิ่งที่ดูเหมือนในไฟล์MainPage.xaml.cs ไฟล์.

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 - แอปพลิเคชัน Silverlight สามารถทำงานบนเบราว์เซอร์ใดก็ได้ที่ติดตั้งไว้

Step 10 - เมื่อโค้ดด้านบนถูกคอมไพล์และเรียกใช้งานคุณจะเห็นหน้าเว็บต่อไปนี้

Step 11 - ตอนนี้เมื่อคุณคลิกไฟล์ Click Me มันจะอัปเดตข้อความในไฟล์ TextBlock ดังแสดงด้านล่าง

เราขอแนะนำให้คุณดำเนินการตามตัวอย่างข้างต้นโดยการเพิ่มองค์ประกอบ UI เพิ่มเติม