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

• Microsoft Expression Blend 2.5 June 2008 Preview (Expression Blend)
• Microsoft Visual Studio 2008 (VS2008)

Download source code:

ใน Silverlight 2 beta 2 (SL2B2) ยังมี font ให้เลือกใช้งานไม่มากนักโดยเฉพาะ ถ้าจะทำงานกับภาษาไทยด้วยแล้ว เราพบปัญหาแล้วว่า ไม่มี font สำหรับภาษาไทย

ในบทความนี้ผมมีวิธีเล็กๆ น้อยๆ ในการทำงานกับข้อความภาษาไทยบน SL2B2  ซึ่งวิธีการไม่ยากเย็นครับเราเพียง นำ font ของวินโดวส์ ที่ทำงานกับภาษาไทยได้ นำเข้ามาฝัง (Embed) ไว้กับ SL2B2 แอพพลิเคชันของเรา และเราไปกำหนด font นั้นให้กับข้อความก็เป็นอันใช้ได้แล้วครับ เราไปดูขั้นตอนเล็กๆ เหล่านั้นกันครับ

สร้างแอพพลิเคชัน SL2B2

สร้างแอพพลิเคชันด้วย Expression Blend ดังรูปที่ 1

รูปที่ 1:

ลาก TextBlock มาหนึ่งอัน และใส่ข้อความว่า "กำนด font" และไปกำหนด font ในช่อง Text เราจะเห็นว่าไม่มี font ที่ทำงานกับภาษาไทย

รูปที่ 2:

เพิ่ม font ด้วยเครื่องมือ VS 2008  

ฉะนั้นเราต้องทำการเพิ่ม font ที่ทำงานกับภาษาไทยได้เข้ามาใน SL2B2 แอพพลิเคชันของเราสักก่อน ให้เราสลับไปทำงานใน VS2008 โดยคลิกไปที่แท็บ Project => คลิกขวา =>Edit in Visual Studio ดังรูปที่ 3

รูปที่ 3:

ตอนนี้เราทำงานอยู่บน VS2008 เราหยุดใช้งานเครื่อง VS2008 สักครู่ ให้เราเข้าไป copy font ที่มันทำงานกับภาษาไทยได้จาก C:\Windows\Fonts ดังรูปที่ 4 จากนั้น copy (Ctrl+C) font ดังกล่าว (ในบทความ ใช้ Angsana New) ไปวาง บนหน้าจอ Desktop (Ctrl+V) ดังรูปที่ 5 หากเราทำการเปิดไฟล์ font ดังกล่าวดูเราจะเห็นตัวอย่างข้อมูลดังรูปที่ 6:

รูปที่ 4:                                                    รูปที่ 5:                                   รูปที่ 6:

เมื่อเราเตรียม font ที่ต้องการเป็นที่เรียบร้อยแล้ว ให้เรากลับมาที่เครื่องมือ VS2008 ของเรา Add ไฟล์ font ดังกล่าวเข้ามาในโปรเจ็กต์ ดังรูปที่ 7 - รูปที่ 8

รูปที่ 7:                                              รูปที่ 8:

จากนั้นปรับพลอเพอร์ตี้เป็น Resource ดังรูปที่ 9

รูปที่ 9:

Build มันสักหนึ่งครั้ง ดังรูปที่ 10 จากนั้นสลับไปทำงานใน Expression Blend มันจะถามว่าโปรเจ็กต์มีการแก้ไข เราต้องการโหลดใหม่หรือเปล่า กด Yes ดังรูปที่ 11

รูปที่ 10:                               รูปที่ 11:

กำหนด font ให้กับข้อความ

เมื่อเราไปที่พลอเพอร์ตี้ ช่อง Text จะเห็นว่ามี font ใหม่เพิ่มเข้ามาให้เราเลือกใช้งานนั่นคือ font  Angsana New   ดังรูปที่ 12

รูปที่ 12:

ไปกำหนด font ดังกล่าวให้ข้อความ จะเห็นว่ามันแสดงภาษาไทยได้แล้ว

รูปที่ 13:

การกระทำในสรรพสิ่งล้วนมีเบื้องหน้า และเบื้องหลัง และจากการกระทำเล็กๆ ในรูปที่ 13 เบื้องหลังแล้วมันซ่อนบางอย่าง (code xaml)  ดังรูปที่ 14

รูปที่ 14:

ทดสอบแอพพลิเคชัน

build โปรเจ็กต์ และทดสอบรัน ดังรูปที่ 15 - รูปที่ 16

รูปที่ 15:                                รูปที่ 16:

และแต่ต่อนี้ เราก็สามารถทำงานกับข้อความภาษาไทยได้อย่างไม่มีปัญหา แล้วดังรูปที่ 17

รูปที่ 17:

Download source code:

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

• Embedding fonts in Silverlight 2
• Text and Fonts (Silverlight 2)