วิธีการสร้างเว็บด้วย Silverlight 3 แบบมีหลายหน้า (Silverlight3 multi Page)


Silverlight 3

 

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

  • Blend 3

 

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

 

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

 

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

2 7 3

 

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

4 5 

 

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

6 7

 

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

8 9

 

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

10

 

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

11

 

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

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

12

 

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

13

 

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

14

 

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

15

 

โค้ดสมบูรณ์

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

 

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

17

 

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

18

 

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

19 

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

 

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

 

แหล่งข้อมูลดาวน์โหลด:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/Navigate1|_Silverlight3|_multi|_Page.zip

 

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

 

ผู้เขียน
Columnist

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Silverlight

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive