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 เพิ่มเติม