กำหนด Font ภาษาไทยใน Silverlight 2 beta 2


 

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

Download source code:

http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/SL2B2|_set|_font.zip

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

 

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

 

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

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

1

รูปที่ 1:

 

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

2

รูปที่ 2:

 

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

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

3

รูปที่ 3:

 

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

4 5 6

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

 

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

7 8 

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

 

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

9

รูปที่ 9:

 

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

10 11

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

 

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

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

12

รูปที่ 12:

 

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

13

รูปที่ 13:

 

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

19

รูปที่ 14:

 

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

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

14 15

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

 

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

16

รูปที่ 17:

 

Download source code:

http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/SL2B2|_set|_font.zip

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

เกี่ยวกับ

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
%d bloggers like this: