Style (WPF)

วันนี้ผมจะพูดถึงการใช้ Style ใน WPF Application ลักษณะการทำงานของมันจะคล้ายๆ กับ CSS ใน Web Application

ผมจะมาพูดถึงวิธีการสร้าง Style ให้กับปุ่ม (Button) ของ WPF กันก่อนนะครับ ซึ่งจะแบ่งเป็น 3 แบบด้วยกัน

1. การสร้าง Style ให้กับ Button โดยระบุชื่อของ Style

<Window.Resources>
<Style x:Key="firstStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="Blue" />
</Style>
</Window.Resources>

สังเกตุผมกำหนด x:Key="firstStyle" อันนี้เป็นการกำหนดชื่อให้กับ style ที่ผมสร้าง
ถัดมาผมกำหนด TargetType="{x:Type Button}" หมายถึง style ตัวนี้จะใช้ได้กับ Button เท่านั้น
ลองมาดู Tag คำ่ว่า Setter กันครับ Setter จะต้องการ 2 attribute ด้วยกันในการ set ค่านั่นคือ Property กับ Value
โดย Property ให้กรอกชื่อ Property ที่ต้องการกำหนดค่า และ Value คือค่าของ Property นั้นๆ

ในตัวอย่าง ผมกำหนดให้ สีของ font เป็นสีขาว และพื้นหลังของปุ่มเป็นสีน้ำเงิน ดังรูป

<Button Style="{StaticResource firstStyle}" >first</Button>



2.การสร้าง Default style ให้กับปุ่มใน Application

<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="200" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</Window.Resources>

ตัวอย่างนี้คุณลองสังเกตุสิครับว่า มันต่างจากตัวอย่างแรกตรงไหน ..... ผมตัดไอ่เจ้า x:Key ออก เห็นไหมครับ คือผมไม่ได้ระบุชื่อให้กับ Style นั่นเอง แต่ผมระบุแค่ Type มันว่าจะต้องเป็น Button เท่านั้น สิ่งที่ได้คือ อะไรก็แล้วแต่ที่มี Type เป็น Button จะใช้ Style นี้หมดเลย ดังในรูป


<Button>Default Button</Button>


3.การ Inherit Style

<Style x:Key="inheritStyle" BasedOn="{StaticResource firstStyle}" TargetType="{x:Type Button}">
<Setter Property="Margin" Value="5" />
<Setter Property="Foreground" Value="Red" />
</Style>


เราสามารถนำ Style ที่มีอยู่แล้วมาใช้งานต่อได้ด้วยวิธีการ Inherit style โดยการใช้ BasedOn Property เป็นตัวช่วย ดังตัวอย่างผมกำหนด BasedOn="{StaticResource firstStyle}" หมายความว่า ผม Inherit style จาก firstStyle มา ซึ่งค่า Property ต่างๆ ใน Style ตัวนี้จะเหมือน firstStyle ทุกประการ จากนั้นผมได้กำหนดว่าขอสีตัวอักษรเป็นสีแดงละกัน โดยเพิ่ม <Setter Property="Foreground" Value="Red" /> ตัวนี้เข้าไป ผลลัพธ์ก็เป็นดังรูปนี้

<Button Style="{StaticResource inheritStyle}" > Inherit</Button>


หมายเหตุ : ถ้าเราไม่กำหนด TargetType เราสามารถใช้ style นั้นๆ กับ Element ใดก็ได้ นิยมใช้ในกรณีของสี เช่น สีของกรอบ, สีของ font อะไรแบบนี้

เป็นไงกันบ้างครับ เริ่มชอบ WPF ยังครับ มันสนุกน้าาาา มาเล่นกันเถอะ ^^