WPF : ใส่ข้อความยาว ๆ ใน TextBlock

จากตอนที่แล้วเราได้สร้าง TextBlock ง่าย ๆ ขึ้นมา โดยที่ข้อความ จะอยู่ใน Text="Hello"
หากต้องการใส่ข้อความที่ยาว ๆ ให้ใส่ไว้ภายในบล็อก ดังนี้


ถ้าเราต้องการให้คำว่า This is a good day. เป็นตัวหนา ให้ใส่แท็ก <Bold> ครอบ
และถ้าเราต้องการให้คำว่า How are you? เป็นตัวเอียง ให้ใส่แท็ก <Italic> ครอบ
และถ้าเราต้องการให้คำว่า Happy new year. ถูกขีดเส้นใต้ ให้ใส่แท็ก <Underline> ครอบ
ดังนี้

มาเขียนข้อความด้วย TextBlock กันเถอะ

ใน WPF มี Control ที่เกี่ยวกับข้อความอยู่หลายตัว แต่ในตอนนี้จะพูดถึงตัวที่ basic ที่สุด คือ TextBlock
เมื่ออยู่ใน Blend ให้กดปุ่ม toolbar ด้ายซ้าย ตรงที่เป็นสี่เหลี่ยมแล้วมีตัว T อยู่ข้างใน ค้างไว้ แล้วเครื่องมือที่ซ่อนอยู่ ก็จะเด้งออกมา
ให้เลือก TextBlock

ให้คลิกลาก บนจอ ArtBoard

แล้วจะเห็นดังนี้



ให้พิมพ์ข้อความเช่น Hello ข้อความนั้นก็จะแสดง
อยู่ในกรอบของ TextBlock







ในมุมของ XAML จะเห็นดังนี้
Text="Hello" ข้อความที่แสดงคือ Hello
HorizontalAlignment="Left" คือ จัดข้อความชิดซ้าย
TextWrapping="Wrap" คือ หากข้อความยาวเกินไป จะตัดคำ ขึ้นบรรทัดใหม่

ให้ลองเพิ่ม attribute ดังนี้
Background="Yellow" พื้นหลัง สีเหลือง
Foreground="Brown" ตัวหนังสือ สีน้ำตาล
FontFamily="Tahoma" ฟอนต์ ชือ Tahoma
FontSize="26" ขนาดอักษร=26
ซึ่งจะสัมพันธ์กับใน Blend (วงกลมสีแดง)

การระบายสีแบบไล่เฉดแนวตรง LinearGradientBrush ตอนที่ 2

จากตอนที่แล้ว ที่เราได้ระบายสีวงกลม
เราสามารถกำหนดทิศทางของการเกลี่ยสี ได้โดยใช้ Toolbox ด้านข้างซ้าย ชื่อว่า Brush Transform
โดยไปคลิกลากบนรูปวงกลม





จะเห็นภาพ ดังนี้




โดยจะมีลูกศรเกิดขึ้น บอกทิศทางสี
ท้ายลูกศร คือ สีเริ่มต้น
หัวลูกศร คือ สีสิ้นสุด

ถ้าเราคลิกลากที่ หัวหรือท้ายลูกศร จะเปลี่ยนทิศทางลูกศร
ลองย้ายเล่น เพื่อดูผลของมัน

นอกจากนั้น เราสามารถกำหนดจุดสี(GradientStop) ได้มากกว่า 2 จุด
เช่น ถ้าเราจะเปลี่ยนสี จาก แดง->น้ำเงิน->เหลือง ให้เราเพิ่มจุดสี ดังนี้
โดยกดที่จุดซ้าย (วงกลมแดง)
แล้วเลือกสีแดง

กดตรงกลาง(วงกลมแดง)
แล้วเลือกสีน้ำเงิน

กดที่จุดขวา (วงกลมแดง)
แล้วเลือกสีเหลือง

ลองสร้างวงกลมบน WPF และการไล่เฉดสี ตอนที่ 1

พักเรื่องสีไว้ก่อน ตอนนี้เรามาดูเรื่องวงกลม กันบ้าง
ลองเปิด Blend ขึ้นมา
แล้วคลิกค้างที่ ToolBar ตรงรูปสี่เหลื่ยมซักพัก
จะเห็น เครื่องมือ วงกลมที่ซ่อนอยู่ เด้งออกมา

ให้เอาไปคลิกลาก บน artboard จะเห็นเป็นรูปวงรีขึ้นมา
หากต้องการให้เป็นรูปวงกลมเด๊ะ ๆ ให้กดปุ่ม shift ค้างไว้ขณะลาก








จะได้รูปและ xaml ดังนี้
สังเกตุว่าจะคล้ายกับรูปสี่เหลี่ยมเลย ต่างกันตรงที่ใช้ tag ว่า Ellipse
ทีนี้เรามาดูเรื่องสีให้ละเอียดกันอีกนิด
ช่อง Fill="Red" Stroke="Blue" เราสามารถเขียนอีกแบบได้ ดังนี้



คือ การใส่ Brush(แปรงสี) ชนิด SolidColorBrush สีทึบ ที่เป็นสีแดง เข้าไปใน Fill
และ ใส่ Brush(แปรงสี) ชนิด SolidColorBrush สีทึบ ที่เป็นสีน้ำเงิน เข้าไปใน Stroke นั่นเอง

Brush(แปรงสี) มีหลายชนิด ดังนี้

1. SolidColorBrush แปรงสีทึบ(สีเดียว)
2. LinearGradientBrush แปรงสี ที่ไล่เฉดสี เป็นทางตรง (ตอนนี้ เราจะมาดูชนิดนี้กัน)
3. RadialGradientBrush แปรงสี ที่ไล่เฉดสี ไปตามรัศมี (จะกล่าวถึงอีกทีในภายหลัง)
4. ImageBrush แปรง ที่ใช้ภาพ(Image) ปะเอาแทน (จะกล่าวถึงอีกทีในภายหลัง)
5. DrawingBrush แปรง ที่ใช้รูปร่างที่ได้จากการวาดด้วย Wpf มาวาดลงบนแปรง (จะกล่าวถึงอีกทีในภายหลัง)
6. VisualBrush แปรง (คล้ายกับ DrawingBrush) ที่ใช้ภาพที่ปรากฏของรูปร่างที่ได้จากการวาดด้วย Wpf (จะกล่าวถึงอีกทีในภายหลัง)

ลอง LinearGradiantBrush กัน
คลิกที่รูปวงกลมที่ได้สร้างขึ้น ใน Blend
แล้วไปดู Property ด้านข้างขวา
ดูคลิกที่ Brush เสร็จแล้ว ดูคลิกที่ Fill แล้วคลิกที่รูปสี่เหลี่ยมที่มีการไล่เฉด (ตรงวงกลมสีแดงกลางภาพ)
เป็นการเลือกว่าเราจะเอาแบบ ไล่เฉด


แล้วเลือกด้านล่างซ้ายสุด (ตรงจุด C ที่เป็นสี่เหลี่ยม = linear,วงกลม = Radial)
เสร็จแล้วจะปรากฏแถบไล่เฉดสี (จากภาพ ตรงที่วงกลมสีแดง วงไว้ที่ซ้ายสุด --- ขวาสุด)
ตอนนี้เป็นการไล่เฉดสีดำไปเป็นสีขาว
ถ้าต้องการเปลี่ยนเป็นไล่เฉด จาก สี เหลือง ไปเป็น น้ำเงิน
ให้คลิกที่ รูปบ้าน(ที่วงกลมสีแดงไว้)ทางซ้าย แล้วค่อยเลือกสี เหลือง ในช่องสีรุ้ง(วงกลมแดง B)
แล้วคลิกระดับสี (วงกลมแดง A)
แล้ว คลิกที่ รูปบ้าน(ที่วงกลมสีแดงไว้)ทางขวา แล้วค่อยเลือกสี น้ำเงิน ในช่องสีรุ้ง(B) แล้วคลิกระดับสี(A)
จะได้ผลดังภาพด้านขวานี้

มาต่อกันเรื่อง XAML ของสี่เหลี่ยมใน WPF

มาดูรายละเอียดเพิ่มขึ้นกันดีกว่า
<Rectangle Margin="160,28,0,0"
Width="100" Height="50" />

attribute ชื่อ Margin คือ ระยะห่างระหว่าง สี่เหลี่ยมกับขอบของหน้าต่าง เท่ากับว่า
สี่เหลี่ยมนี้ห่างจากขอบซ้าย 160 ห่างจากขอบบน 28
ห่างจากขอบล่าง 0 ห่างจากขอบขวา 0
สังเกตุว่า Width กับ Height อยู่คนละบรรทัดกับ Margin
เพราะว่า XML ไม่ถือเรื่องการขึ้นบรรทัดใหม่ (ถือว่าเป็นบรรทัดเดียวกัน)
แต่จะให้ความสำคัญกับเรื่องวงเล็บ < > มากกว่า

attribute สามารถดึงออกมาใส่ภายใน Tag ได้ โดย xaml ด้านบน แปลงเป็นแบบด้านล่างได้ ดังนี้
<Rectangle Margin="160,28,0,0" >
<Rectangle.Width>
100
</Rectangle.Width>

<Rectangle.Height>
50
</Rectangle.Height>
</Rectangle>

เรามาลองเติมสีให้กับสี่เหลี่ยม เช่่น เราจะให้สี่เหลี่ยมมีสีเหลือง และมีขอบสีน้ำเงิน ได้ดังนี้
<Rectangle Width="100" Height="50"
Fill="Yellow" Stroke="Blue" />

เมื่อท่านเห็น xaml ด้านบน ก็คงทราบทันทีว่า
attribute ที่ชื่อว่า Fill ใช้สำหรับระบุสี(หรือแปรง)ของสี่เหลี่ยม
attribute ที่ชื่อว่า Stroke ใช้สำหรับระบุสี ของขอบนั่นเอง
บางท่านอาจจะสงสัยว่าเรามีสีอะไรบ้างให้เลือก
ตอบว่า หากเราเข้าโปรเจ็กโดย VisualStudio แล้ว
เมื่อเราพิมพ์ Fill= เสร็จ VisualStudio จะแสดงรายชื่อสีให้เลือกทันที ดังนี้

นอกจากการใส่ชื่อสี โดยตรงแล้ว(เช่น "Blue") เรายังใส่ค่ารหัสสีได้ด้วย
(ความเข้มใส,ความเข้มสีแดง,ความเข้มสีเขียว,ความเข้มสีน้ำเงิน) คือ ARGB
เช่นหากเราต้องการสีแดงเข้ม เราจะเขียนว่า #ffff0000
ff ตัวแรกเป็นเลขฐาน 16 มีค่าเท่ากับ 255 แปรว่า เข้มเต็มที่ (ไม่ใส)
ff ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 255 แปรว่า สีแดงเต็ม
00 ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 0 แปรว่า ไม่มีสีเขียวผสม
00 ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 0 แปรว่า ไม่มีสีน้ำเงินผสม

สมมติว่า ถ้าเราต้องการสีเหลือง เราก็ใช้ สีแดงเต็ม กับ สีเขียวเต็ม รวมกัน เป็น#ffffff00 เป็นต้น
แต่ไม่ต้องตกใจไปครับ เพราะ Blend มีเครื่องมือเลือกสีที่เข้าใจง่ายมากครับ ดังนี้
เมื่อคลิกที่สี่เหลี่ยมแล้ว ให้ไปดูที่หน้าต่างข้างขวา คลิกแท็บ Property
แล้วเลือกเฉดสี (ที่แถบสีรุ้ง) แล้วเลือกความเข้มสี (จากจอด้านซ้าย)
เมื่อเลือกแล้วจะเห็นเป็นรหัสด้านล่าง เช่น #ffffff00
หากต้องการให้สี่เหลี่ยมของเราใส มองเห็นทะลุไปถึงพื้นหลัง ก็ให้กำหนดค่า A ให้น้อยกว่า 100% แต่ถ้ากำหนดเป็น 0% เราก็จะไม่เห็นสี่เหลี่ยมไปเลย

ลองสร้างสี่เหลี่ยมแรกบน WPF

เริ่มต้น เรามาเปิดโปรเจ็กที่เราทำทิ้งไว้เมื่อคราวที่แล้ว ด้วย Blend
แล้วกดที่ Toolbar รูปสี่เหลี่ยม

นี่คือ เครื่องมือสร้างสี่เหลี่ยม
เมื่อกดแล้ว ให้ไปกดบน ArtBoard แล้วลากรูปสี่เหลี่ยมแล้วปล่อย
เราก็จะได้รูปสี่เหลี่ยมง่าย ๆ ดังนี้



ลองดูรูปสี่เหลี่ยมด้านบน จะมีรูป สี่เหลี่ยมเล็ก ๆ อยู่ที่ขอบและมุมทั้ง 4 ด้าน เรียกว่า Handle เมื่อเอาเมาส์วางบน handle จะเห็นลูกศร
เมื่อให้เมาส์กดลากที่ handle จะเป็นการขยายหรือย่อรูปสี่เหลี่ยม ตามใจต้องการ

แต่ถ้าเขยิบเมาส์ออกมานิดนึง ไอคอนลูกศรจะเปลี่ยนไป ดังนี้

หากกดที่ลูกศรโค้งแล้วเลื่อนเมาส์ จะเป็นการหมุนรูปสี่เหลี่ยม โดยมีจุดวงกลมตรงกลางเป็นจุดศูนย์กลาง เราสามารถกดที่จุดวงกลม แล้วเปลี่ยนจุดหมุนได้
หากกดที่เครื่องหมาย < / > แล้ว จะเป็นดึงรูปสี่เหลี่ยม ให้เฉ เป็นรูปสี่เหลี่ยมขนมเปียกปูน

ตรงหัวมุมด้านซ้ายบน ท่านจะเห็นเส้นประแล้วมีวงกลมที่ปลาย 2 เส้น 0-----
เมื่อท่านกดแล้วลากตรงวงกลมนั้น จะเป็นการ ทำเกลามุม ของสี่เหลี่ยม ให้มนขึ้น ดังนี้

หากไม่ต้องการรูปนั้นแล้ว ให้กดปุ่ม Backspace หรือ Del จะเป็นการลบออก

ตอนนี้ให้เราลบสี่เหลี่ยมเดิมออก แล้วเริ่มสร้างสี่เหลี่ยมขึ้นอีกครั้ง
ตอนนี้เราอยู่ในโหมด Design ให้กดแท็บ XAML หรือ Split เพื่อดูรูปสี่เหลี่ยมในมุมมองของโค้ด XAML บ้าง
จะเห็นโค้ด XAML ดังนี้ (อย่าเพิ่งตกใจ เดี๋ยวจะอธิบายให้ฟังอย่างง่าย ๆ)

ให้สังเกตุ ตัวหนังสือสีแดง เป็นการระบุว่า ตัวหนังสือสีแดง นั้นคือ tag หรือ attribute ส่วนตัวหนังสือสีน้ำเงินนั้น คือ ค่าของข้อมูล
เช่น
<Rectangle Width="100" Height="50">
</Rectangle>

คำว่า Rectangle คือ Tag ที่ใช้บอกว่าเป็นสี่เหลี่ยม
Width คือ attribute มีความหมายว่า ความกว้าง
Height="50" คือ บอกว่า สี่เหลี่ยมนี้มีความสูง 50 หน่วย

เมื่อมี Tag เปิดแล้วก็ต้องมี Tag ปิด คือ </Rectangle>

ถ้าจะเขียนโดยไม่ให้มี Tag ปิด ต้องเอาเครื่องหมาย / ไปใส่ไว้ท้าย Tag
ดังนี้ <Rectangle Width="100" Height="50" />

สร้างโปรเจ็ก WPF ด้วย Visual Studio

จากคราวที่แล้วเราสร้างโปรเจ็ก WPF ด้วย Blend มาแล้ว คราวนี้เราจะลองสร้างจาก Visual Studio ดูบ้าง
เริ่มแรก เราก็เปิด VisualStudio ขึ้นมา
เลือกเมนู File > New > Project

เมื่อเลือกแล้วจะปรากฏดังนี้

ให้เลือกภาษาที่ท่านต้องการ (เลือกได้เพียง 2 ภาษา คือ C# หรือ VisualBasic)
แล้วเลือก Windows > WPF Application
ด้านบน ให้เลือกเวอร์ชันของ .NET Framework ที่จะใช้
เลือกได้ 2 เวอร์ชัน คือ 3 หรือ 3.5 (หากเลือกเวอร์ชัน 2 ท่านจะไม่เห็นโปรเจ็ก WPF)
ตรง Name : ให้ใส่ชื่อโปรเจ็ก
Location : ใส่ที่อยู่พาธของโปรเจ็ก
Solution Name : ใส่ชื่อโซลูชั่น (มักจะชื่อเดียวกับ ชื่อโปรเจ็ก)

แล้วจะปรากฏดังนี้



ตรงกลาง จะมี หน้าต่างคล้าย ArtBoard ของ Blend แบ่งออกเป็นสองส่วน คือ
ส่วน Design
ส่วน XAML
เช่นเดียวกันกับ Blend
ด้านข้างจะมี Tab ต่าง เช่น
Solution Explorer คล้ายกับ Project Panel ของ Blend
Property แบบเดียวกับ Blend
Resource แบบเดียวกับ Blend
ต่างกันที่มี Tab : ToolBox อยู่ตรงนี้ด้วย (ของ Blend แยกไปเป็น แถบต่างหาก)
ด้านล่างจะมีหน้าต่าง Output
เอาไว้แสดงผลของการคอมไพล์โปรแกรม,Error และอื่น ๆ

หน้าต่างของ Expression Blend

เรามาดูส่วนต่าง ๆ ของ Blend กัน

1. ArtBoard เป็นพื้นที่หลักที่เราจะเห็น ชิ้นงานทั้งหมด
   
2. ToolBox เป็นแถบ ให้เราเลือกเครื่องมือ ที่จะนำมาใช้
   
3. View Tab สำหรับเปลี่ยนมุมมองของ artboard โดยเลือกได้ 3 อย่าง คือ Design(เห็นเป็นภาพ),XAML,Split(เห็นทั้งสองอย่างพร้อมกัน)
   
4. Project/Property/Resource Panel เลือกได้ 3 แท็บ
   
5. ArtBoard Zoom ใช้เลือกขนาดการขยายภาพ(zoom)
   
6. Interaction Panel ใช้สำหรับการเลือก ออปเจ็ก, การอนิเมชั่น, การกำหนดเหตุการณ์

การสร้างโปรเจ็ก WPF ด้วย Expression Blend

เมื่อติดตั้ง Express Blend และ Visual Studio 2008 เสร็จแล้ว เรามาเริ่มสร้างโปรเจ็กกัน
เราเลือกสร้างโปรเจ็กได้จากทั้งสองโปรแกรม เช่น เมื่อเปิด Blend มาครั้งแรกจะเห็นหน้าจอนี้



เราก็เลือก New Project ได้ทันที เสร็จแล้วจะเห็นดังนี้


มีให้เลือก 3 อย่าง

1. WPF Application (.exe) คือ สร้างโปรแกรมที่ทำงานบนเครื่องคอมพิวเตอร์ (โดยไม่จำเป็นต้องต่อ Internet)
2. WPF Control Library คือ สร้างชิ้นส่วนคอนโทรล เพื่อเอาไว้ใช้ในโปรเจ็กอื่นในภายหลัง
3. SilverLight คือ การสร้างโปรเจ็กที่สามารถรันบนเว็บได้

Location : คือ ไดเรกทอรีที่เราจะเก็บชิ้นงานไว้
Language: มีให้เลือก 2 ภาษา คือ C# หรือ VisualBasic.NET
Target: ให้เราระบุเลือกว่าจะใช้ .NET Framework เวอร์ชันใด
กรณีที่เลือก .NET Framework 3.0 จะมีข้อดีตรงที่ โปรแกรมสามารถรันบนวินโดว์วิสต้าได้ทันที (โดยไม่ต้องติดตั้ง .NET 3.5)
(แต่ถ้าจะรันบน วินโดว์ XP ก็ยังคงต้องติดตั้ง .NET 3)
กรณีที่เลือก .NET Framework 3.5 จะมีข้อดีตรงที่ โปรแกรมสามารถใช้ฟีเจอร์ Linq ได้ แต่ต้องติดตั้ง .NET 3.5 ลงในเครื่องที่จะรันโปรแกรม

แล้วกด OK โปรแกรมก็จะสร้างโปรเจ็กขึ้นมา

ให้ดูที่ด้านขวาบน จะเห็นดังนี้
ในหัวข้อ Project จะมีไฟล์ต่างเกิดขึ้น คือ

Solution : คือ ไฟล์ที่เป็นไฟล์แม่ สำหรับเปิดโปรเจ็กขึ้นมา
Project : คือ ไฟล์โปรเจ็ก (สังเกตุว่าจะมี Icon ที่บอกภาษา เช่น C#)
App.xaml : คือ ไฟล์กลางสำหรับตั้งค่าต่าง ๆ ของโปรแกรม
AssemblyInfo.cs : คือ ไฟล์กลางสำหรับตั้งค่าเช่นเดียวกัน
Window1.xaml : คือ ไฟล์ xaml ที่เราจะใช้เป็นประจำ มีไว้สำหรับกำหนด UI ของโปรแกรม ใช้คู่กับไฟล์ Window1.xaml.cs(c#) หรือ Window1.xaml.vb (VisualBasic) ให้กดปุ่มลูกศร > แล้วจะเห็นไฟล์นี้

เริ่มต้น WPF

ขอเกริ่นเล็กน้อย WPF
ย่อมาจาก Window Presentation Foundation เป็นระบบ User Interace(UI) แบบใหม่ ที่ทำให้โปรแกรมเมอร์กับกราฟิกดีไซเนอร์ ทำงานร่วมกันเพื่อสร้างโปรแกรมที่สวยงามขึ้น ใช้ง่ายขึ้น และ Interactive กับผู้ใช้มากขึ้น

โดยเกิดภาษาใหม่ขึ้น ชื่อว่า XAML เป็นภาษาที่ใช้อธิบายว่า UI เป็นอย่างไร เช่น
<textblock>
Hello,World !
</textblock>
โปรแกรมก็จะแสดง ช่องข้อความที่มีคำว่า Hello, World
เป็นภาษาที่ใช้ XML เป็นพื้นฐาน คือ

1. มี Tag คือ ข้อความที่อยู่ในวงเล็บ <>
   
2. เมื่อมี Tag อะไรเกิดขึ้น ก็จะมี Tag ปิด คู่กันเสมอ โดยจะมีเครื่องหมาย / นำหน้าคำ
3. หากเป็น Tag ที่จบในตัวมันเอง (ไม่มี Tag ปิด) ก็จะมีเครื่องหมาย / ต่อท้ายเช่น <textblock text="Test" />
4. ถือตัวอักษรใหญ่/เล็ก ว่าแตกต่างกัน (Case Sensitive)

เครื่องมือที่จะใช้สร้างงาน มี 2 โปรแกรม

1. MS Expression Blend สำหรับให้ กราฟิกดีไซเนอร์ สร้างงานออกแบบที่เป็นกราฟิกแบบเวกเตอร์ (คล้ายกับ Illustrator) โดยจะได้เห็นเป็นภาพ และโค้ดภาษา XAML หามาใช้ได้ไม่ยากจาก ตรงนี้
   
2. MS Visual Studio 2008 Express สำหรับให้ โปรแกรมเมอร์ เขียนโปรแกรม(ภาษา C# หรือ VisualBasic) เชื่อมกับโค้ด XAML ที่ได้จาก Blend เพื่อออกมาเป็นโปรแกรมที่สมบูรณ์ หามาใช้ได้ไม่ยากจาก ตรงนี้