Hello, WPF!

ตัวอย่างแรกและเป็นตัวอย่างคลาสสิกที่ใช้ในการสอนเขียนโปรแกรมโดยส่วนใหญ่ ก็คือ ตัวอย่าง "Hello, world!" แต่ในบทความนี้เราจะทำสิ่งบ้าๆ และเปลี่ยนเป็น "Hello WPF!" แทน เป้าหมายคือเพื่อแสดงข้อความนี้ไปยังหน้าจอเพื่อแสดงให้คุณเห็นว่าง่ายแค่ไหนในการเริ่มต้นใช้งาน

ส่วนที่เหลือของบทความนี้จะสมมุติว่าคุณได้ติดตั้ง IDE แล้ว โดยเฉพาะ Visual Studio หรือ Visual Studio Community (ดูบทความก่อนหน้านี้สำหรับคำแนะนำในการดาวน์โหลด) ถ้าคุณใช้ IDE อื่น คุณจะต้องดัดแปลงวิธีใช้ที่เหมาะสมกับ IDE ของคุณ

ใน Visual Studio เริ่มต้นโดยการเลือก New project จากเมนู File ทางด้านซ้ายมือคุณควรจะมี รายการของ categories ซึ่งบทความนี้จะเน้นภาษา C# ดังนั้นคุณควรจะเลือกภาษา C# เมื่อเลือก templates และเนื่องจากเราจะสร้าง Windows application คุณควรจะเลือก Windows จากรายการที่มี ซึ่งจะแสดงรายการ Windows applications ประเภทต่างๆ ทางด้านขวา ซึ่งคุณควรเลือก WPF Application ตั้งชื่อโปรเจคว่า "HelloWPF" ใน text field Name ตรวจสอบการตั้งค่าส่วนที่เหลือทางด้านล่างของ dialog และกดปุ่ม Ok

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

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

นี่เป็น XAML พื้นฐานที่ Visual Studio สร้างขึ้นมาสำหรับ window ของเรา ส่วนต่างๆทั้งหมดของโปรแกรมได้อธิบายไว้ในบทเกี่ยวกับ XAML และ "The Window" คุณสามารถรันแอปพลิเคชันได้เลย (เลือก Debug -> Start debugging หรือ กดปุ่ม F5) จะเห็นหน้าต่างว่างๆ เพราะแอพพลิเคชั่นของเรายังไม่มีอะไร และขณะนี้เราก็พร้อมเริ่มที่จะแสดงข้อความของเราบนหน้าจอได้แล้ว

เราจะเริ่มจากการเพิ่ม TextBlock control ไปที่ Grid panel โดยมีข้อความดังกล่าวเป็นเนื้อหา

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72">
            Hello, WPF!
        </TextBlock>
    </Grid>
</Window>

ลองรันโปรแกรม (โดยกด Debug -> Start debugging หรือกด F5) หลังจากนั้น รอดูผลลัพธ์จากการพัฒนาแอปพลิเคชันของคุณ

คุณจะสังเกตได้ว่ามี 3แอตทริบิวต์ ที่แตกต่างกันเพื่อกำหนดลักษณะต่างๆบน TextBlock ในการกำหนด ย่อหน้าของข้อความ(VerticalAlignmentสำหรับแนวตั่ง และ HorizontalAlignmentสำหรับแนวตั่ง) หรือ ขนาดของตัวอักษร(FontSize) หลักการเหลานี้ใชั แอตทริบิวต์ เป็นตัวกำหนด คุณจะได้ศึกษาในเบื่องลึกกว่านี้ในบทความภายหลัง

ยินดีด้วยที่ทำได้คืบหน้าถึงนี่ ได้เวลาตอนนี้ดำเนินการอ่านส่วนที่เหลือของบทการสอนและในไม่ช้าคุณจะเป็นผู้เชี่ยวชาญ WPF!