TOC

This article is currently in the process of being translated into Thai (~55% done).

Getting started:

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>

Try running the application now (select Debug -> Start debugging or press F5) and see the beautiful result of your hard work - your first WPF application:

You will notice that we used three different attributes on the TextBlock to get a custom alignment (in the middle of the window), as well the FontSize property to get bigger text. All of these concepts will be treated in later articles.

Congratulations on making it this far. Now go read the rest of the tutorial and soon you will master WPF!