Ở Series trước, chúng ta đã làm việc với màn hình Console với những dòng chữ đơn điệu. Hôm nay, mọi thứ sẽ thay đổi. Chúng ta sẽ bước vào thế giới của WPF (Windows Presentation Foundation) để tạo ra những ứng dụng Windows có giao diện đẹp mắt, nút bấm, hình ảnh và tương tác chuột.
Trong bài này, chúng ta sẽ đi qua 3 khái niệm cốt lõi:
1. XAML: Ngôn ngữ để dựng giao diện.
2. Basic Controls: Các thành phần cơ bản (Nút bấm, Ô nhập liệu...).
3. Event Handling: Cách làm cho ứng dụng có thể tương tác với người dùng
XAML là gì?
Khi bạn tạo một dự án WPF mới (chọn template WPF Application), Visual Studio sẽ mở ra 2 view:
● Phần trên: Cửa sổ Designer - Để xem trước giao diện.
● Phần dưới: Cửa sổ code XAML.
XAML là gì?
XAML viết tắt của Extensible Application Markup Language.
Nếu bạn đã từng nhìn thấy HTML của trang web, bạn sẽ thấy XAML rất quen thuộc. Nó là ngôn ngữ markup (ngôn ngữ đánh dấu), dùng các thẻ (tags) để định nghĩa các phần tử giao diện.
Cấu trúc của XAML
XAML hoạt động theo cấu trúc Cây (Tree): Có thẻ cha bao bọc các thẻ con.
<Window x:Class="WpfApp1.MainWindow" ...>
<Grid>
<Button Content="Click me" />
</Grid>
</Window>
Mối liên hệ với C#
Bạn sẽ thấy file MainWindow.xaml luôn đi kèm với một file con là MainWindow.xaml.cs. Đây gọi là Code-behind.
● XAML: Lo phần giao diện
● C# (Code-behind): Lo phần logic
● Chúng kết nối với nhau thông qua từ khoá x:Class ở dòng đầu tiên của XAML.
Các Controls cơ bản
Trong WPF có hàng trăm controls, nhưng hầu hết thời gian ban đầu bạn sẽ làm việc với 3 cái này: TextBlock, TextBox và Button.
TextBlock
Dùng để hiển thị văn bản tĩnh mà người dùng không thể sửa được
● Thuộc tính quan trọng:
○ Text: Nội dung chữ hiển thị.
○ FontSize: Cỡ chữ.
○ Foreground: Màu chữ
<TextBlock Text="Hello WPF!"
FontSize="20"
Foreground="Blue" />
TextBox
Dùng để người dùng gõ văn bản vào (giống như ô đăng nhập).
● Thuộc tính quan trọng:
○ Text: Nội dung đang có trong ô.
○ Name: Cực kỳ quan trọng. Bạn phải đặt tên cho nó (ví dụ: txtInput) để code C# có thể gọi ra và lấy dữ liệu.
<TextBox Name="txtHoTen"
Width="200"
Height="30" />
Button
Dùng để bấm vào và thực hiện hành động.
● Thuộc tính quan trọng:
○ Content: Nội dung hiển thị trên nút (thường là chữ "Lưu", "OK", nhưng cũng có thể là hình ảnh).
○ Name: Đặt tên để quản lý (ví dụ: btnSave).
<Button Name="btnSave"
Content="Lưu"
Width="100"
Height="30" />
StackPanel
Trước khi học kỹ về bố cục, làm sao để sắp xếp 3 cái trên mà không bị đè lên nhau?
Hãy dùng thẻ <StackPanel>. Nó sẽ xếp các controls bên trong nó thành một hàng dọc (hoặc ngang) giống như xếp gạch.
<Window ...>
<Grid>
<StackPanel>
<TextBlock Text="Nhập tên của bạn:" />
<TextBox Name="txtTen" />
<Button Name="btnGui" Content="Gửi Lời Chào" />
<TextBlock Name="txtKetQua" FontSize="16" FontWeight="Bold"/>
</StackPanel>
</Grid>
</Window>
Xử lý sự kiện
Giao diện đã xong, nhưng khi bấm nút không thấy phản hồi gì. Chúng ta cần bắt Sự kiện (Event).
Sự kiện phổ biến nhất của Button là Click.
Bước 1: Đăng ký sự kiện trong XAML
Trong thẻ Button, bạn gõ Click=. Visual Studio sẽ gợi ý "New Event Handler". Hãy nhấn Enter.
<Button Name="btnGui"
Content="Gửi Lời Chào"
Click="btnGui_Click" />
Bước 2: Viết code xử lý trong C# (Code-behind)
Nhấn F7 (hoặc chuột phải chọn View Code) để sang file .xaml.cs. Bạn sẽ thấy một hàm mới xuất hiện:
private void btnGui_Click(object sender, RoutedEventArgs e)
{
// Code xử lý khi nút được bấm sẽ viết ở đây
}
Bước 3: Viết logic
Chúng ta muốn: Lấy tên từ TextBox -> Ghép thành câu chào -> Hiện lên TextBlock kết quả.
private void btnGui_Click(object sender, RoutedEventArgs e)
{
// 1. Lấy dữ liệu từ TextBox (dựa vào Name đã đặt là txtTen)
string ten = txtTen.Text;
// 2. Kiểm tra nếu chưa nhập gì
if (string.IsNullOrWhiteSpace(ten))
{
MessageBox.Show("Vui lòng nhập tên!"); // Hiện thông báo nhỏ
return;
}
// 3. Xử lý logic
string loiChao = "Xin chào, " + ten + "! Chúc bạn học tốt WPF.";
// 4. Đẩy kết quả ra TextBlock (dựa vào Name đã đặt là txtKetQua)
txtKetQua.Text = loiChao;
// Có thể đổi màu chữ cho đẹp
txtKetQua.Foreground = Brushes.Green;
}
Bây giờ nhấn F5 để chạy chương trình.
1. Nhập tên của bạn vào ô.
2. Nhấn nút "Gửi Lời Chào".
3. Dòng chữ bên dưới sẽ hiện ra lời chào.
Bạn đã hoàn thành ứng dụng WPF đầu tiên với đầy đủ quy trình các bước: Dựng giao diện (XAML) -> Đặt tên (Name) -> Bắt sự kiện (Event) -> Viết Code (C#).