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 ยังครับ มันสนุกน้าาาา มาเล่นกันเถอะ ^^

simple WPF Application

วันนี้เราจะลองมาเขียน WPF Application ตัวแรกกันนะครับ
เริ่มต้นมา เปิด Visual Studio 2008 SP1 จากนั้นให้เลือก File -> New -> Project
แล้วก็เลือก ชนิดของ project เป็น WPF Application ดังแสดงในภาพ



จากนั้นกด OK ไอ่เจ้า Visual Studio ก็จะทำการสร้าง files ต่างๆ ที่เป็นพื้นฐานให้โดยอัตโนมัติ ดังรูป



จากนั้นเปิดไฟล์ Window1.xaml ขึ้นมา แล้วก็ลาก Button และ Textbox control จาก toolbox ทางด้านซ้ายมือ ดังรูป



หลังจากนั้นให้คลิกที่ Button ที่เราลากมา แล้วกดที่ Icon สีเหลืองที่เป็นรูปสายฟ้า ( Event icon ) จากนั้นให้ดับเบิ้ลคลิก ในช่องที่ด้านหน้าเขียนว่า Click ( หมายถึงว่า เมื่อคลิกปุ่มนี้แล้วจะให้โปรแกรมทำงานอย่างไร )



เมื่อคลิกเสร็จ Visual Studio จะสร้างฟังก์ชันให้้หนึ่งตัว แล้วเหลือพื้นที่ว่างให้เราเขียน code ว่าเมื่อ button ถูกคลิกเราจะให้มันทำอะไร จากนั้นก็เติม code ด้านล่างลงไป แบบนี้

private void button1_Click(object sender, 
    RoutedEventArgs e)
{
    textBox1.Text = "Hello WPF!";
}

ผลลัพธ์ที่ได้คือ ถ้าเรากดคลิกปุ่ม Say Hello! มันจะทำการ เปลี่ยนค่าใน textbox ให้กลายเป็นคำว่า Hello WPF! ตามนี้ครับ


จบบทความนี้ก่อนนะครับ คราวหน้าเราจะมาพูดถึงในรายละเอียดที่มากกว่านี้ โชคดีทุกคนครับ

.NET Stong type

อันนี้คือ concept ตั้งแต่ .Net 2.0 แล้วนะครับ คือ object ที่สาำมารถรู้ได้ทันทีว่าเป็น object ชนิดไหนตั้งแต่ตอน compile time เพื่อลดการ boxing และ unboxing

ยกตัวอย่างเช่น

กรณีที่ไม่เป็น strong type
ArrayList ar = new ArrayList(); // คุณสามารถ add อะไรก็ได้แข้า arraylist ตัวนี้
ar.Add("CCC"); // adding string
ar.Add(new object()); // adding object

กรณีที่เป็น stong type
List<string> ar2 = new List<string>();
ar2.Add("BBB"); // คุณจะ add ได้เฉพาะ string เท่านั้น เพราะว่าคุณระบุว่าจะรับ type แค่ string

กรณีของ strong type ถ้าคุณ add object ที่ไม่ใช่ string จะ compile ไม่ผ่าน และการทำงานแบบ strong type ก็จะทำงานเร็วกว่าด้วยครับ

การ Get IP address

C# เรามีวิธี get ค่า IP Address ได้แล้วหลายวิธีด้วยกัน จาก .Net library ที่มีให้
แต่ผมเจออันนึงครับ ถ้าเราจะ get ip address จาก hostname ต้องใช้แบบนี้เท่านั้น ไม่งั้นเจอบั๊กเต็มๆ อันนี้เป็นประสบการณ์มาแชร์กันครับ

IPHostEntry a = Dns.GetHostEntry(Dns.GetHostName()); แบบนี้ไม่ work ทุกกรณีครับ
IPHostEntry b = Dns.GetHostByName(Dns.GetHostName()); ต้องใช้แบบนี้ครับ

WPF คืออะไร

WPF ย่อมาจากคำว่า Windows Presentation Foundation เป็นเทคโนโลยีหนึ่งที่ช่วยให้โปรแกรมเมอร์พัฒนาซอฟแวร์ออกมาได้อย่างสวยงาม แล้วก็ง่ายกว่าสมัยก่อนเยอะ ซึ่งจะใช้ .Net framework 3.0 ขึ้นไป
โดยสิ่งที่ Microsoft พยายามจะผลักดันตัวนี้คือ ต้องการสร้าง User Experience (เห็นแล้วตื่นตาตื่นใจ หวือหวา) ตัวอย่าง WPF Application

ถ้าถามว่าเราจะใช้เครื่องมืออะไรในการพัฒนาไอ่เจ้า WPF ตัวนี้ ผมขอแนะนำ Visual Studio 2008 SP1 (ย้ำนะครับ ต้องเป็น service pack1 ไม่อย่างนั้นเจอบั๊กพอตัวเลยทีเดียว ) หรือคุณอาจจะใช้ Visual Studio 2010 ก็ได้ซึ่งตอนนี้ก็มีให้ลองใช้กันแล้ว

ข้อดีของ WPF

• สามารถแบ่งหน้าที่การทำงานระหว่าง Designer และ Programmer ได้อย่างชัดเจน
• มีกราฟฟิกที่สวยงาม
  
• สร้าง control ใช้เองได้อย่างง่ายดาย
  
• มี style ( คล้ายๆ CSS ของ web ) ซึ่งเราสามารถสร้าง control หรือ window เดียวแล้วเปลี่ยนแค่ style ก็ทำให้ look & feel เปลี่ยนทั้งหมดโดยที่ไม่ต้องแก้ code แม้แต่บรรทัดเดียว

คราวหน้าผมจะมาต่อกันที่ Hello world ละกันครับ ตามธรรมเนียม ( ไม่รู้จะไปสวัสดีชาวโลกกันทำไมหนอ - -")