บทความ

สวัสดีครับ เหล่า Developer ทุกท่าน สำหรับบทความชุดนี้ เป็นบทความแปลจากบทความชุด Silverlight Quickstart บนเว็บไซต์ Silverlight.net ซึ่งผมได้ทำการเรียบเรียงเนื้อหา ให้เหมาะสมกับ Developer โดยเฉพาะ ซึ่งคุณสามารถนำเอาเทคนิคต่างๆ จากบทความชุดนี้ ไปใช้ในการนำเอาโปคเจค Silverlight ที่สร้างจาก Microsoft Expression Blend 2 มาใช้บนหน้าเว็บ ได้อย่างมีประสิทธิภาพมากขึ้น สำหรับบทนี้ จะเป็นการแนะนำถึงตัวไฟล์ Xaml ที่เป็นไฟล์หลักที่ Silverlight ใช้ในการกำหนดการแสดงผลต่างๆ เชิญติดตามอ่านได้เลยครับ

ตอนที่ 2: สร้างไฟล์ Silverlight XAML

ในตอนก่อนหน้านี้ "สร้าง Silverlight Project" คุณได้เพิ่ม Silverlight plug-in ลงไปในเพจ HTML และสร้างไฟล์ XAML ว่างๆขึ้นมา เนื้อหาในตอนนี้จะแสดงวิธีสร้างเนื้อหา Silkverlight ภายในไฟล์ XAML ของคุณ

· ขั้นตอนที่ 1: สร้าง Canvas และ namespace declarations

· ขั้นตอนที่ 2: วาดอะไรบางอย่าง

· ขั้นตอนที่ 3: ดูเนื้อหา XAML

· ขั้นตอนต่อไป

ขั้นตอนที่ 1: สร้าง Canvas และ namespace declarations

เปิดไฟล์  myxaml.xaml  ที่คุณสร้างขึ้นมาในขั้นตอนก่อนหน้านี้ขึ้นมา  (และโครงการ Silverlight) ให้คุณสร้าง Canvas  และ Silverlight and XAML namespace declarations โดยการก็อปปี้ markup ต่อไปนี้ลงไปในไฟล์ XAML

<Canvas 
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

ไฟล์   Silverlight  XAML  แต่ละไฟล์จะเริ่มต้นโดยแท็ก  <Canvas>  ที่มี  Silverlight  namespace declaration  อยู่ บวกกับ  xmlns attribute ที่ใช้กำหนด Silverlight namespace ร่วมกับ xmllns:x attribute ที่ใช้กำหนด XAML namespace

ขั้นตอนที่ 2: กำหนดการแสดงผล

ก็อปปี้และวางโค้ดต่อไปนี้ลงไปในไฟล์ XAML โดยให้อยู่ระหว่าง แท็ก Canvas จากนั้นเซฟไฟล์

 <Ellipse
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

ซึ่งในไฟล์ Xaml ของคุณ จะมีโค๊ดดังนี้

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse 
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

ขั้นตอนที่ 3: ดูเนื้อหา XAML

ให้คุณดับเบิ้ลคลิ๊กที่ไฟล์ที่เก็บ HTML อยู่ คุณจะเห็นวงกลมสีฟ้าที่มีขอบสีดำอยู่

ถ้าหากคุณติดตั้ง  .NET 3.0 เอาไว้ ดับเบิ้ลคลิ๊กที่ไฟล์  XAML  จะเรียกหน้าต่าง WPF ขึ้นมา ถึงแม้ว่าไฟล์ของคุณอาจจะแสดงผลได้ แต่นี่ไม่ใช่การทำงานที่ถูกต้องของ Silverlight จุดมุ่งหมายของ Silverlight คือการแสดงผล User Interface ในลักษณะเดียวกับ WPF บนเว็บ ซึ่งโค๊ด XAML ของ Silverlight อาจจะสามารถแสดงผลได้ด้วย WPF เนื่องจากเป้นรูปแบบคำสั่งเดียวกัน

อย่างไรก็ดี...ขอแสดงความยินดีด้วยครับ! คุณสร้าง Silverlight Project แรกของคุณเสร็จสำเร็จแล้ว!

ตอนต่อไป

ในตอนต่อไป เราจะมาทำความรู้จักกับแท็ก MediaElement และการเล่นไฟล์ WMV/WMA บน Silverlight กันครับ