<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% เราก็จะไม่เห็นสี่เหลี่ยมไปเลย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น