Windows Presentation Foundation (WPF) là một công nghệ của .NET Framework để xây dựng giao diện người dùng đồ họa (GUI) phong phú và phức tạp trong các ứng dụng Windows. Dưới đây là hướng dẫn cơ bản về cách tạo ứng dụng WPF trong C#.
1. Tạo Dự án WPF
- Mở Visual Studio.
- Chọn Create a new project.
- Chọn WPF App (.NET Framework) và nhấp Next.
- Đặt tên cho dự án và chọn đường dẫn lưu trữ, sau đó nhấp Create.
2. Hiểu Cấu Trúc Dự Án WPF
Một dự án WPF có các thành phần chính sau:
- MainWindow.xaml: Đây là tệp XAML, nơi bạn định nghĩa giao diện người dùng.
- MainWindow.xaml.cs: Đây là tệp code-behind, nơi bạn viết mã xử lý cho giao diện người dùng.
- App.xaml và App.xaml.cs: Định nghĩa cấu hình ứng dụng và các sự kiện khởi tạo.
3. Thiết Kế Giao Diện Người Dùng bằng XAML
XAML (eXtensible Application Markup Language) là ngôn ngữ đánh dấu để thiết kế giao diện người dùng trong WPF. Dưới đây là một ví dụ đơn giản về một giao diện người dùng cơ bản.
a. Thêm Điều Khiển vào MainWindow.xaml
Mở MainWindow.xaml và thêm các điều khiển vào Grid.
<Window x:Class="WpfApp.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>
<TextBox Name="textBoxInput" Width="200" Height="30" VerticalAlignment="Top" Margin="10"/>
<Button Name="buttonClick" Width="100" Height="30" Content="Click Me" VerticalAlignment="Top" Margin="10,50,0,0" Click="buttonClick_Click"/>
<TextBlock Name="textBlockOutput" Width="200" Height="30" VerticalAlignment="Top" Margin="10,100,0,0"/>
</Grid>
</Window>
b. Viết Mã Xử Lý trong Code-Behind
Mở MainWindow.xaml.cs và thêm mã xử lý cho sự kiện nhấp chuột.
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void buttonClick_Click(object sender, RoutedEventArgs e)
{
string input = textBoxInput.Text;
textBlockOutput.Text = $"You entered: {input}";
}
}
}
4. Chạy Ứng Dụng
- Nhấn F5 hoặc chọn Debug > Start Debugging để chạy ứng dụng.
- Nhập văn bản vào TextBox và nhấn nút "Click Me". Bạn sẽ thấy văn bản nhập vào được hiển thị trong TextBlock.
5. Sử Dụng Binding và MVVM (Model-View-ViewModel)
WPF hỗ trợ mô hình MVVM để tách biệt logic giao diện người dùng và logic nghiệp vụ. Dưới đây là một ví dụ cơ bản về cách sử dụng Binding và MVVM.
a. Tạo ViewModel
Thêm một lớp mới MainViewModel.cs.
using System.ComponentModel;
namespace WpfApp
{
public class MainViewModel : INotifyPropertyChanged
{
private string _inputText;
private string _outputText;
public string InputText
{
get { return _inputText; }
set
{
_inputText = value;
OnPropertyChanged("InputText");
}
}
public string OutputText
{
get { return _outputText; }
set
{
_outputText = value;
OnPropertyChanged("OutputText");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public void UpdateOutput()
{
OutputText = $"You entered: {InputText}";
}
}
}
b. Thay Đổi MainWindow.xaml
Cập nhật MainWindow.xaml để sử dụng Binding.
<Window x:Class="WpfApp.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">
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Grid>
<TextBox Text="{Binding InputText, UpdateSourceTrigger=PropertyChanged}" Width="200" Height="30" VerticalAlignment="Top" Margin="10"/>
<Button Width="100" Height="30" Content="Click Me" VerticalAlignment="Top" Margin="10,50,0,0" Command="{Binding UpdateOutputCommand}"/>
<TextBlock Text="{Binding OutputText}" Width="200" Height="30" VerticalAlignment="Top" Margin="10,100,0,0"/>
</Grid>
</Window>
c. Cập Nhật ViewModel để Sử Dụng ICommand
Cập nhật MainViewModel để sử dụng ICommand cho nút bấm.
using System;
using System.ComponentModel;
using System.Windows.Input;
namespace WpfApp
{
public class MainViewModel : INotifyPropertyChanged
{
private string _inputText;
private string _outputText;
public string InputText
{
get { return _inputText; }
set
{
_inputText = value;
OnPropertyChanged("InputText");
}
}
public string OutputText
{
get { return _outputText; }
set
{
_outputText = value;
OnPropertyChanged("OutputText");
}
}
public ICommand UpdateOutputCommand { get; }
public MainViewModel()
{
UpdateOutputCommand = new RelayCommand(UpdateOutput);
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
private void UpdateOutput()
{
OutputText = $"You entered: {InputText}";
}
}
public class RelayCommand : ICommand
{
private readonly Action _execute;
private readonly Func<bool> _canExecute;
public RelayCommand(Action execute, Func<bool> canExecute = null)
{
_execute = execute;
_canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return _canExecute == null || _canExecute();
}
public void Execute(object parameter)
{
_execute();
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
}
}
Tổng kết
WPF là một công cụ mạnh mẽ để tạo giao diện người dùng phong phú cho các ứng dụng Windows. Bằng cách sử dụng XAML, bạn có thể thiết kế giao diện một cách trực quan, trong khi MVVM giúp tách biệt logic giao diện người dùng và logic nghiệp vụ, giúp mã của bạn dễ bảo trì và mở rộng.
Comments