Visual Studio LightSwitch set font by create new theme


จากบทความ
Visual Studio LightSwitch DataGrid Change Font Style
คุณผู้อ่านได้ทราบแล้วว่า
LightSwitch(LS) เวอร์ชั่น 1 (Visual Studio LightSwitch 2011)
ยังไม่รองรับการเปลี่ยนฟอนต์ ผ่านหน้าจอออกแบบ

แต่ก็พอจะมีวิธีการเปลี่ยนมันบ้างพอสมควร
เพียงว่าต้องลงแรงสักเล็กน้อยเท่านั้น
เช่น

  1. การปรับ Font Style เป็น Heading1:
    https://janawat.wordpress.com/2011/12/25/visual-studio-lightswitch-datagrid-change-font-style/
  2. การปรับ Font โดยการเขียนโค้ด:
    https://janawat.wordpress.com/2011/12/27/visual-studio-lightswitch-change-font/
  3. การปรับเปลี่ยนฟอนต์โดยการสร้างธีมใหม่ ซึ่งเป็นเนื้อหาที่กำลังจะกล่าวในบทความต่อไปนี้

ซึ่งในสองวิธีแรกการเปลี่ยนฟอนต์ดังกล่าว
ก็พอจะทำให้คุณผู้อ่านสามารถใช้ LS
สร้างโปรแกรมที่สนับสนุนภาษาไทย
แต่มีข้อเสียคือ คุณผู้อ่านต้องทำทีละหน้าจอ(Screen)
เป็นการเปลืองพลังงานพอสมควร

 

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

 

เราไปดูการเปลี่ยนฟอนต์โดยการ สร้างธีมกันบ้าง
ดังนี้:

 

สร้างโปรเจ็กต์

1. สร้างโปรเจ็กต์ LS ด้วย Extensibility แล้วเลือกภาษาที่ถนัด
ตั้งชื่อโปรเจ็กต์ตามต้องการ ในที่นี้ใช้ชื่อ JanawatTheme
image

2.เมื่อกด OK คุณผู้อ่านจะได้โครงสร้างโปรเจ็กต์ดังรูป
image

3.จากนั้นคลิกขวาบนโปรเจ็กต์
JanawatTheme.Lspkg => เลือก Add => เลือก New Item…
image

4. เลือกไอเทม Theme=> ตั้งชื่อธีมตามต้องการ
ในที่นี้ใช้ JanawatTheme (ชื่อเดียวกับโปรเจ็กต์)
image

5.VSLS จะพาคุณผู้อ่านเข้าไปที่โปรเจ็กต์ JanawatTheme.Client
โฟลเดอร์ Presentation => Themes
คุณผู้อ่านจะเห็นธีม JanawatTheme.xaml
ซึ่งเป็นไฟล์ XAML กำหนดสไตล์ของคอนโทรลนั่นเอง
image

6.เมื่อคุณผู้อ่านเปิดดูไฟล์ JanawatTheme.xaml จะเห็นว่า
ฟอนต์ค่าเริ่มต้น(Default) คือ Segoe UI, Arial
ขนาดฟอนต์เริ่มต้น 11
 image

 

เปลี่ยนฟอนต์ใหม่

7.เปลี่ยนฟอนต์ใหม่ตามที่ต้องการ
โดยการเปลี่ยนชื่อฟอนต์ ???FontFamily และ
ถ้าต้องการเปลี่ยนขนาด
สามารถใส่ตัวเลขที่ต้องการลงไปใน ???FontSize

ปล. ??? เป็นชื่อของสไตล์ เช่น
NormalFontFamily, Heading1FontFamily เป็นต้น

การเปลี่ยนฟอนต์ โดยการแทนที่(Replace)

  1. โดยการ Copy Segoe UI, Arial
  2. แล้วกดปุ่ม Ctrl+H บนคีย์บอร์ด
  3. ว่าง Segoe UI, Arial ในช่อง Find what:
  4. พิมพ์ Tahoma ในช่อง Replace with
  5. เราจะกระทำเฉพาะในไฟล์ (JanawatTheme.xaml) นี้เท่านั้น
  6. หลังจากนั้นแทนทีทั้งหมดในไฟล์นี้โดย
    การกดปุ่ม Replace All

image

8. เปลี่ยนฟอนต์เรียบร้อย
image

 

การติดตั้ง Extensions

9. หลังจากนั้น Build Solution 1 ครั้ง
ให้เปิดไปที่โฟลเดอร์ของโปรเจ็กต์ JanawatTheme.Vsix
เพื่อติดตั้ง Extensions ธีมของเราเข้าไปบน VSLS
image

10. เข้าไปที่โฟลเดอร์ JanawatTheme.Vsix\bin\Debug
แล้วเปิดไฟล์ JanawatTheme.vsix  เพื่อติดตั้ง
image

11. หน้าต่าง Visual Studio Extension Install คลิก Install
image

12. ติดตั้งเรียบร้อย
image

13.จากนั้นเปิดโปรเจ็กต์เก่าที่เคยสร้างไว้ หรือ
สร้างโปรเจ็กต์ใหม่ ในที่นี้เป็นการเปิดโปรเจ็กต์เก่า
ที่เคยสร้างไว้แล้ว
image

 

เปิดใช้งานธีม

14.คลิกขวาบนโปรเจ็กต์ => properties
บนหน้าจอการออกแบบ=>คลิกแทบ Extensions
ติ๊กเลือก JanawatTheme
image

15. คลิกแทบ General Properties
คลิกดรอปดาวน์ Theme เลือกธีม JanawatTheme
image
image

16. รันโปรแกรม ทดสอบภาษาไทย
จะเห็นว่าภาษาไทยตัวอักษรใหญ่ขึ้น
image

17.ลองปรับเปลี่ยน Label
แสดงเป็นภาษาไทย
image

18. จะเห็นว่าทั้งหน้าจอ
แสดงผลภาษาไทยได้ดียิ่งขึ้น
ทั้งคอนโทรลบน DataGrid, Label หรือ TextBox
โดยที่เราไมาต้องเขียนโค้ด
image

 

จะเห็นว่าในวิธีที่สาม การสร้างธีม
เราสามารถเปลี่ยนฟอนต์ ได้ทั้งโปรแกรม
เพียงแค่กำหนดเปิดใช้ธีม
ที่เราทำการปรับฟอนต์เรียบร้อยแล้วเท่านั้น
คุณผู้อ่านก็จะมีความสุขมากขึ้นในการสร้างโปรแกรมด้วย LS

 

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

 

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

 


ผู้เขียน

clip_image019

** รู้จักกับผู้สอน อ.นุชิต **
JANAWAT Blog: https://janawat.wordpress.com
Nuchit’s Profile @microsoft
https://mvp.support.microsoft.com/profile/nuchit
Facebook:
https://www.facebook.com/nuchit
Twitter:
http://twitter.com/janawat

เกี่ยวกับ

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

Tagged with:
เขียนใน LightSwitch
One comment on “Visual Studio LightSwitch set font by create new theme
  1. มือใหม่หัดฝึก พูดว่า:

    หลังจากข้อ 12 ต้องรีสตาท vs ก่อนนะ
    ไม่เช่นนั้นจะไม่เห็น Extension ในข้อ 14

ใส่ความเห็น

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: