สิ่งที่จำเป็น

ในบทความนี้เราไปทำการสร้างเว็บSilverlight ง่ายๆ แบบมีหลายหน้ากันครับ

ขั้นตอนการสร้างเว็บด้วย Silverlight

เปิด Blend 3 ขึ้นมาครับ => โอ๊ะใช้ได้เพียง 60 เหลือเฟือสำหรับการซ้อมมือ (หลังจากวันที่ 61 ถ้าดีก็ซื้อไปใช้ ถ้าไม่ดีก็ทิ้งไปประมาณนั้น) => แล้ว New Project

เลือกโปรเจ็กต์เป็น Silverlight =>เพิ่ม Frame คอนโทรลโดยการเข้าที่แทบ Assets ช่องค้นหาให้ป้อน fr เพื่อค้นหาชื่อคอนโทรลที่ขึ้นต้นด้วย fr
ไล่ดูคอนโทรลตามกลุ่มมาเจอมันอยู่ที่กลุ่มของ Locations ทำการดับเบิ้ลคลิกมัน เพื่อให้เพิ่มเข้าไปในอาร์ดบอร์ดของ MainPage.xaml และทำการเพิ่มคอนโทรล Button เข้าไปอีกสองอันเพื่อทำเป็นเมนู Menu Page1 และMenu Page2 และตั้งชื่อให้คอนโทรล Button เป็น btPage1 และ btPage2

ทำการย่อขยายให้ได้ขนาดพอเหมาะ และจัด layout เอาแบบง่ายๆ ก่อนครับ => จากนั้นทำการเพิ่มไอเทมเพจ(Item Page) เข้าไปในโปรเจ็กต์ โดยคลิกบนแทบ Project=>คลิกขวาบน Project ของเรา = > เลือกเมนู Add New Item…

ในหน้าต่าง New Item ให้เลือก Item Page => จากนั้น Blend จะนำเราเข้าสู่พื้นที่ออกแบบของ Page1.xaml ให้เราวาดสี่เหลี่ยมลงไป 1 อันทำเป็นพื้น และวาด TextBlock ลงไปอี 1 อันเพื่อระบุป้ายข้อความ PAGE1 (เพื่อทำเป็นหน้าเว็บเพจที่หนึ่ง)

เพิ่มไอเทม Page2 เข้าไปอีก 1 ไอเทมเพื่อสร้างเป็นหน้าเว็บเพจที่สอง (คล้ายๆ asp.net ไหมครับ)

กลับไปที่พื้นที่ของ MainPage.xaml โดยคลิกเมาส์ลงบน MainPage.xaml ใน Solution =>คลิกเมาส์ลงบนคอนโทรล Button=> ย้ายเมาส์ไปที่แทบ Properties คลิกไอคอน Event แล้วดับเบิ้ลคลิกบน event Click

Blend3 จะนำเราเข้าสู่หน้าจอโค้ดิ้ง พร้อมสร้างเมธอด event btPage1_Click(…) โอ้!… รู้สึกจะไม่ต้องอาศัย VS2008 แล้วครับท่าน (ไมโครซอฟท์ช่างเข้าใจนักพัฒนาชาวไทยดีจังเลยครับ นักออกแบบ, นักวิเคราะห์, นักพัฒนา,ผู้จัดการโครงการ และผู้ทดสอบ รวมอยู่ในคนคนเดียวกัน)   

ให้กระทำบนคอนโทรล btPage2 เช่นเดียวกัน

ตั้งชื่อ Frame เป็น framMain โดยกำหนดได้ที่แทบ Properties

หรือเปลี่ยนชื่อได้จากแทบ Objects and Timeline โดยคลิกลงบนคอนโทรล แล้วพิมพ์ชื่อใหม่ลงไป

โหลดเพจเข้าสู่คอนโทรล framMain ผ่านเมธอด Navigate(…)

โค้ดสมบูรณ์

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Navigate1
{
  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      // Required to initialize variables
      InitializeComponent();
    }
    private void  btPage1_Click (object sender, System.Windows.RoutedEventArgs e)
    {
      framMain.Navigate (new Uri("/Page1.xaml",UriKind.Relative) );
    }
    private void  btPage2_Click (object sender, System.Windows.RoutedEventArgs e)
    {
      framMain.Navigate (new Uri("/Page2.xaml",UriKind.Relative) );
    }
  }
}

ใส่โค้ดเรียบร้อยแล้วทำการรันเลยครับ

คลิก Menu Page1 framMain โหลด Page1

คลิก Menu Page2 framMain โหลด Page2

โอ้สามารถทำได้ง่ายดี

ใน Blend3 แม้จะโค้ดดิ้งได้ดีไม่แพ้ VS2008 แต่เรื่องดีบั๊กยังสู้ไม่ได้ครับ เวลา Error ยังนิ่งไม่บอกไม่กล่าว อะไรให้ทราบ และช้ากว่า Blend2 อย่างเห็นได้ชัด

แหล่งข้อมูลดาวน์โหลด:

แหล่งข้อมูลอ้างอิง:

• Silverlight 3 Navigation URI Routing
• Silverlight 3 Navigation API

ผู้เขียน