ช่วงนี้บทความที่ผมเขียนไม่ค่อยจะถี่มากนัก จะพยายามลงให้ต่อเนื่องมากยืิ่งขึ้นครับ โดยวันนี้จะมาสาธิตการทำ Application Bar บน Windows phone 7 ให้ชมกัน
Application Bar คือส่วนของแถบเมนูที่มีใน WP7 เราจะพัฒนาหรือใส่ลูกเล่นเข้าไปให้กับ Application Bar ของเราก็ได้ ไม่ว่าจะซ่อน, เปลี่ยนสี, ใส่ปุ่ม และอื่นๆ งั้นเรามาเริ่มสร้างไว้ใช้งานกันเองเลยดีกว่าครับ
เตรียมตัวให้พร้อม
Tools ที่ใช้ในวันนี้ก็ยังคงเป็น Microsoft Visual Studio 2010 Express เจ้าเก่าของเรานั่นเอง
เริ่มกันเลย
สร้างโปรเจค Windows Phone Application ขึ้นมา
ทำการ Add Reference ที่ชื่อว่า Microsoft.Phone.Shell เข้าไป เพราะ Application bar จะใช้ Reference ตัวนี้
จากนั้น ไปที่ App.xaml ทำการเพิ่ม name space ของ Microsft.phone.shell เข้าไป
ตอนนี้เราจะ appbar ที่มีคุณสมบัติเป็น ApplicationBar มาให้เราเรียกใช้แล้ว ต่อไปก็ทำการสร้าง ApplicationBar ขึ้นมาใน Resource ของเรา
ตัวอย่างนี้ ผมได้สร้าง menu ขึ้นมา 4 ตัว ใน ApplicationBar โดยกำหนดไว้ว่าให้ visible เป็น true เพื่อให้เราเห็นหน้าตาของมันเมื่อ Run โปรแกรม โดยโครงสร้างภาษา Tag แบบ Xaml น่าจะช่วยให้ตีความกันได้ไม่ยากนะครับ โดยผมตั้งชื่อ Application Bar ตัวนี้ว่า MainAppBar เพื่อที่เราจะนำไปใช้งานกันที่หน้า MainPage.xaml แบบนี้
ในขั้นตอนนี้ผมได้ทำการเพิ่ม ApplicationBar เข้าไปในหน้า MainPage.xaml โดยอ้างอิงถึง StaticResource ที่ได้สร้างไว้ในขั้นตอนที่แล้ว ที่ชื่อ MainAppBar
ถ้าผู้อ่าน ทำการ Run โปรแกรมดูในตอนนี้ ก็จะพบหน้าตาแบบนี้แล้วครับ
ยังไม่จบ !
ถ้าหาก Application Bar ที่เราสร้างขึ้น มันจะมาโชว์นิ่งๆ แบบนี้มันก็คงจะไม่ได้อะไรขึ้นมาครับ ต่อไปจะแสดงวิธีใช้งาน ApplicationBar ที่สร้างขึ้นนี้ แบบ simple simple… ที่ทุกคนคงจะใช้ได้กันครับ คือการทำ Navigate ด้วย AppBar ที่เราสร้างขึ้น
โดยตอนนี้ผมต้องการจะให้เกิดเหตุการดังนี้ครับ
1. เมื่อกดปุ้ม about โปรแกรมจะเรียกหน้า About.xaml ขึ้นมา
2. เมื่อกดปุ่ม contact จะเรียกหน้า Contact.xaml ขึ้นมา
3. เมื่อกดปุ่ม photo จะเรียกหน้า Photo.xaml ขึ้นมา
4. เมื่อกดปุ่ม help จะเรียกหน้า Help.xaml ขึ้นมา
โดยเราก็ต้องไป Add new Item ของแต่ละหน้าขึ้นมานะครับ และถ้าอยากให้ทุกหน้ามี ApplcationBar เหมือนกัน ก็อย่าลืมเพิ่ม namespace เข้าไปในทุกหน้าด้วย
ต่อไปเราจะทำต่อจาก Resource ที่เราได้ทำไว้แล้วใน App.xaml ดังนี้ครับ
ผมทำการเพิ่ม event Click เข้าไปใน MenuItem แต่ละตัว จากนั้นก็ new Event Handler ขึ้นมาให้ครบครับ (ทำง่ายๆ ด้วยการคลิกขวาที่ ชื่อแล้วเลือก Navigate to Event Handler)
ที่ไฟล์ App.xaml.cs เราจะได้ Method ขึ้นมา เราก็จะทำการสร้าง Navigate ให้กับปุ่มดังนี้ครับ
ตรงจุดนี้ในส่วนของ PhoneApplicationFram ที่เราจะใช้นั้น ต้องทำการ using Microsoft.Phone.Controls; มาก่อนครับ (พิมตามนี้แล้ว คลิกขวา Resolve เอาเลยครับ)
จากนั้นผมก็จะทำแบบนี้กับทุกๆ Event ที่ผมสร้างให้ปุ่มทั้ง 4 ครับ
เรียบร้อยแล้วครับ จากนั้นมา Run ดูผลลัพธ์กันเลยดีกว่าครับ
http://www.facebook.com/#!/video/video.php?v=1448765459640 ง่ายใช่ไหมล่ะครับ ถ้ายังไงมีไอเดียเจ๋งๆ อย่าลืมใส่เข้าไป แล้วเอาผลงานมาโชว์กันนะครับ แล้วเจอกันใหม่ครั้งหน้าครับ
Wp7 Applicaiotn Bar Example. by pandula