# WinUI 3 ขั้นสูง: สร้าง Windows App ระดับ Production ด้วย C# > คู่มือสำหรับนักพัฒนาที่ต้องการยกระดับ WinUI 3 app จาก "มือใหม่" สู่ "production-ready" --- ## สารบัญ 1. [WinUI 3 Architecture ที่ควรรู้](#1-winui-3-architecture-ที่ควรรู้) 2. [MVVM ที่ถูกต้องใน WinUI 3](#2-mvvm-ที่ถูกต้องใน-winui-3) 3. [Advanced Data Binding & x:Bind](#3-advanced-data-binding--xbind) 4. [Dependency Injection ที่ไม่ใช่แค่ Service Locator](#4-dependency-injection-ที่ไม่ใช่แค่-service-locator) 5. [Custom Controls & Visual States](#5-custom-controls--visual-states) 6. [Performance Optimization](#6-performance-optimization) 7. [Windows App SDK ขั้นสูง](#7-windows-app-sdk-ขั้นสูง) 8. [App Lifecycle & Background Tasks](#8-app-lifecycle--background-tasks) --- ## 1. WinUI 3 Architecture ที่ควรรู้ ### 1.1 WinUI 3 vs WinUI 2 vs UWP - จุดเปลี่ยนสำคัญ ``` ┌─────────────────────────────────────────────────────────────┐ │ UWP (Windows 10) │ WinUI 3 (Windows App SDK) │ ├────────────────────────────────┼────────────────────────────┤ │ • Sandboxed runtime │ • Full Windows API access │ │ • แชร์ Windows.UI.Xaml │ • Standalone UI stack │ │ • MSIX only │ • MSIX หรือ unpackaged │ │ • WinRT API จำกัด │ • .NET 6+ full features │ │ • ติด Windows version │ • Backward compatible │ └────────────────────────────────┴────────────────────────────┘ ``` **จุดสำคัญที่ต้องเข้าใจ:** ```csharp // ❌ UWP แบบเก่า - ใช้ไม่ได้ใน WinUI 3 // var file = await Windows.Storage.KnownFolders.DocumentsLibrary // .GetFileAsync("data.txt"); // ✅ WinUI 3 - Full .NET file access public async Task ReadConfigAsync() { var path = Path.Combine( Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "MyApp", "config.json" ); Directory.CreateDirectory(Path.GetDirectoryName(path)!); return await File.ReadAllTextAsync(path); } ``` ### 1.2 Project Structure แบบ Enterprise ``` MyApp/ ├── MyApp/ # Main project │ ├── App.xaml / App.xaml.cs │ ├── MainWindow.xaml │ ├── Views/ # XAML pages │ │ ├── DashboardPage.xaml │ │ └── SettingsPage.xaml │ ├── Controls/ # Custom controls │ │ ├── DataGrid/ │ │ └── Charts/ │ ├── Resources/ # Themes & styles │ │ ├── Themes/ │ │ └── Styles/ │ └── Assets/ ├── MyApp.Core/ # Business logic (plain .NET) │ ├── Services/ │ ├── Models/ │ └── Interfaces/ ├── MyApp.ViewModels/ # MVVM layer │ ├── DashboardViewModel.cs │ └── ViewModelLocator.cs └── MyApp.Tests/ ``` --- ## 2. MVVM ที่ถูกต้องใน WinUI 3 ### 2.1 CommunityToolkit.Mvvm - Source Generators หยุดเขียน boilerplate เดี๋ยวนี้! ใช้ `ObservableProperty` แทน: ```csharp // ❌ แบบเก่า - เขียนเองทั้งหมด public class OldViewModel : INotifyPropertyChanged { private string _userName; public string UserName { get => _userName; set { _userName = value; OnPropertyChanged(nameof(UserName)); OnPropertyChanged(nameof(FullGreeting)); // manual! } } public string FullGreeting => $"Hello, {UserName}"; public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); } // ✅ แบบใหม่ - Source Generators จัดการให้ using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Input; public partial class ModernViewModel : ObservableObject { [ObservableProperty] [NotifyPropertyChangedFor(nameof(FullGreeting))] // Auto notify! [Required(ErrorMessage = "UserName is required")] // Validation private string _userName = string.Empty; public string FullGreeting => $"Hello, {UserName}"; // RelayCommand สร้างอัตโนมัติ [RelayCommand] private async Task LoadDataAsync(CancellationToken ct) { // async command ที่ support cancellation var data = await _service.FetchAsync(ct); UserName = data.Name; } // CanExecute แบบ auto [RelayCommand(CanExecute = nameof(CanSave))] private void Save() { } [ObservableProperty] private bool _canSave; } ``` **เบื้องหลัง:** Source generator จะสร้างโค้ดให้ตอน compile: ```csharp // สิ่งที่ generator สร้างให้ (อย่าแก้ไฟล์นี้โดยตรง!) public string UserName { get => _userName; set { if (!EqualityComparer.Default.Equals(_userName, value)) { OnPropertyChanging(nameof(UserName)); _userName = value; OnPropertyChanged(nameof(UserName)); OnPropertyChanged(nameof(FullGreeting)); // ตามที่ระบุใน attribute } } } ``` ### 2.2 Messenger Pattern (Weak Reference Events) แก้ปัญหา ViewModels คุยกันโดยไม่ติด reference: ```csharp // Message definitions public record UserLoggedInMessage(string UserId, string DisplayName); public record SettingsChangedMessage(string SettingKey, object Value); // Publisher public partial class LoginViewModel : ObservableObject { [RelayCommand] private void Login() { // ส่ง message ไปหาใครก็ได้ที่ subscribe WeakReferenceMessenger.Default.Send( new UserLoggedInMessage(UserId, DisplayName) ); } } // Subscriber (ใน ViewModel อื่น) public partial class DashboardViewModel : ObservableObject, IRecipient { public DashboardViewModel() { // ลงทะเบียนรับ message WeakReferenceMessenger.Default.Register(this); } public void Receive(UserLoggedInMessage message) { // รับ message แล้วทำงาน WelcomeText = $"Welcome back, {message.DisplayName}!"; } } // หรือใช้แบบ one-time WeakReferenceMessenger.Default .Register(this, (r, m) => { r.HandleLogin(m); }); ``` ### 2.3 AsyncCommand ที่ถูกต้อง ```csharp public partial class DataViewModel : ObservableObject { [ObservableProperty] private bool _isLoading; [ObservableProperty] private string? _errorMessage; // ✅ Command ที่รองรับ cancellation และ error handling [RelayCommand(IncludeCancelCommand = true)] private async Task FetchDataAsync(CancellationToken cancellationToken) { IsLoading = true; ErrorMessage = null; try { // CancellationToken จะถูก trigger เมื่อกด CancelCommand var data = await _repository.GetAllAsync(cancellationToken); Items = new ObservableCollection(data); } catch (OperationCanceledException) { // ผู้ใช้กด cancel - ไม่ต้องทำอะไร } catch (Exception ex) { ErrorMessage = $"Failed to load: {ex.Message}"; // หรือส่งไปยัง global error handler WeakReferenceMessenger.Default.Send(new ErrorOccurredMessage(ex)); } finally { IsLoading = false; } } } ``` ```xml

SECURE_ACCESS

WinUI 3 สร้าง Windows App ระดับ Production ด้วย C#

CONFIRM_DELETE