.NET MAUI ในปี 2026: คู่มือพัฒนา Cross-Platform และคำถามสัมภาษณ์งาน

.NET MAUI (Multi-platform App UI) ได้พัฒนาจนกลายเป็น framework cross-platform ระดับ production ด้วย .NET 10 ในฐานะเวอร์ชัน Long-Term Support ที่ได้รับการสนับสนุนจนถึงเดือนพฤศจิกายน 2028 .NET MAUI 10 มาพร้อมกับ workload และแพ็กเกจ NuGet มอบการปรับปรุงด้านคุณภาพ ประสิทธิภาพ และ API ใหม่อย่าง HybridWebView ที่ได้รับการปรับปรุงและ SafeAreaEdges บทความนี้จะพาผู้อ่านไปสร้างแอปพลิเคชัน cross-platform สำรวจสถาปัตยกรรมเบื้องหลัง MAUI และตอบคำถามสัมภาษณ์งานที่ผู้จ้างงานถามในปี 2026

การตั้งค่าโปรเจกต์ .NET MAUI 10 ตั้งแต่เริ่มต้น

วิธีที่เร็วที่สุดในการมีแอป MAUI ที่ทำงานได้เริ่มต้นจาก .NET CLI .NET 10 แนะนำ template โปรเจกต์ใหม่ที่รวม service defaults ของ .NET Aspire เชื่อมต่อ telemetry และ service discovery ตั้งแต่แรก

# Install the MAUI workload (if not already present)
dotnet workload install maui

# Create a new MAUI app
dotnet new maui -n CrossPlatformDemo
cd CrossPlatformDemo

# Run on Android emulator
dotnet build -t:Run -f net10.0-android

โครงสร้าง single-project รวมโค้ดเฉพาะแพลตฟอร์มไว้ใต้โฟลเดอร์ Platforms/ ในขณะที่แชร์ส่วนที่เหลือ ไฟล์ MauiProgram.cs ทำหน้าที่เป็น composition root เป็นที่ลงทะเบียน service, font และ handler

using Microsoft.Extensions.Logging;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // Register services for dependency injection
        builder.Services.AddSingleton<IApiService, ApiService>();
        builder.Services.AddTransient<MainViewModel>();

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Dependency injection ใน MAUI ใช้รูปแบบเดียวกันกับ ASP.NET Core Service แบบ Singleton คงอยู่ตลอดอายุของแอป Service แบบ Transient ถูกสร้างใหม่ทุกครั้งที่มีการร้องขอ และ Service แบบ Scoped ต้องระมัดระวังเนื่องจาก MAUI ไม่มีแนวคิด scope ในตัวเหมือน HTTP request

Handler: สถาปัตยกรรมเบื้องหลังการ Render Cross-Platform

MAUI แทนที่ renderer ของ Xamarin.Forms ด้วยสถาปัตยกรรม handler Handler ทำหน้าที่แมป control cross-platform แต่ละตัวไปยังคู่ native ผ่านชั้น abstraction ที่บาง ความแตกต่างสำคัญ: handler เป็น stateless และแยกออกจาก virtual view ทำให้เร็วกว่าและง่ายต่อการปรับแต่ง

using Microsoft.Maui.Handlers;

public class CustomEntryHandler : EntryHandler
{
    protected override void ConnectHandler(MauiAppCompatEditText platformView)
    {
        base.ConnectHandler(platformView);
        // Remove the default underline on Android
        platformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
    }
}

// Register in MauiProgram.cs
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<Entry, CustomEntryHandler>();
});

ใน .NET 10 control Entry และ Editor บน Android เปลี่ยนจาก AppCompatEditText เป็น MauiAppCompatEditText เพิ่มการรองรับ native สำหรับ event SelectionChanged Handler ของ CollectionView และ CarouselView ที่ปรับปรุงใน .NET 9 กลายเป็นค่าเริ่มต้นบน iOS และ Mac Catalyst แก้ไขปัญหาความเสถียรที่มีมานาน

Android 16 Edge-to-Edge: Breaking Change และวิธีแก้ไข

Android 16 ลบกลไก opt-out สำหรับการแสดงผลแบบ edge-to-edge แอปที่กำหนดเป้าหมาย API 36 ต้องจัดการ system bar insets อย่างถูกต้อง มิฉะนั้นเนื้อหาจะ render ไม่ถูกต้อง .NET 10 นำเสนอ breaking change แบบเงียบ: ใน .NET 9 ContentPage เคารพ system bars โดยค่าเริ่มต้น (พฤติกรรม Container) แต่ .NET 10 ค่าเริ่มต้นเป็น edge-to-edge (None)

วิธีแก้ไขคือเพิ่ม global implicit style ใน App.xaml:

<!-- App.xaml -->
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CrossPlatformDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
                <Setter Property="SafeAreaEdges" Value="Container" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Enum SafeAreaEdges ให้การควบคุมแบบละเอียด:

• None: เนื้อหา edge-to-edge ไม่มี padding safe area
• SoftInput: padding สำหรับแป้นพิมพ์เสมอ
• Container: ไหลใต้แป้นพิมพ์ อยู่นอก bars และ notch
• Default: พฤติกรรมเริ่มต้นของ platform
• All: ปฏิบัติตาม safe area insets ทั้งหมด

วิธีนี้ใช้ Window Insets API ขณะ runtime ทำให้เข้ากันได้กับ Android 16 ที่ opt-out ระดับ manifest ไม่ทำงานอีกต่อไป

MVVM ด้วย CommunityToolkit.Mvvm: กำจัด Boilerplate

Source generator ของ CommunityToolkit.Mvvm ลดโค้ดซ้ำซ้อนของ MVVM ได้ราว 80% ไม่ต้องเขียน INotifyPropertyChanged เอง ไม่ต้องมี command wrapper: attribute เป็นตัวขับเคลื่อน code generation

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class MainViewModel : ObservableObject
{
    private readonly IApiService _apiService;

    public MainViewModel(IApiService apiService)
    {
        _apiService = apiService;
    }

    // Source generator creates the 'Title' property with change notification
    [ObservableProperty]
    private string _title = string.Empty;

    // Source generator creates the 'IsLoading' property
    [ObservableProperty]
    private bool _isLoading;

    // Source generator creates an async ICommand
    [RelayCommand]
    private async Task LoadDataAsync()
    {
        IsLoading = true;
        try
        {
            Title = await _apiService.FetchTitleAsync();
        }
        finally
        {
            IsLoading = false;
        }
    }
}

XAML ทำ binding โดยตรงกับ property และ command ที่ถูกสร้างขึ้น:

<!-- MainPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:CrossPlatformDemo.ViewModels"
             x:DataType="vm:MainViewModel">
    <VerticalStackLayout Padding="20" Spacing="16">
        <Label Text="{Binding Title}"
               FontSize="24"
               HorizontalOptions="Center" />
        <Button Text="Load Data"
                Command="{Binding LoadDataCommand}"
                IsEnabled="{Binding IsLoading, Converter={StaticResource InverseBoolConverter}}" />
        <ActivityIndicator IsRunning="{Binding IsLoading}"
                           IsVisible="{Binding IsLoading}" />
    </VerticalStackLayout>
</ContentPage>

Attribute x:DataType เปิดใช้งาน compiled bindings ซึ่งเร็วกว่า binding แบบ reflection และแสดง error ตอน compile-time เมื่อ binding path ผิด

XAML Source Generator ใน .NET 10

.NET MAUI 10 แนะนำ XAML source generator ที่คอมไพล์ XAML ตอน build time แทนที่จะ parse ตอน runtime สิ่งนี้ปรับปรุงประสิทธิภาพ startup และจับ error ของ XAML ระหว่างการคอมไพล์

เพื่อเปิดใช้งาน XAML source generation ให้เพิ่ม property ในไฟล์โปรเจกต์:

<PropertyGroup>
  <MauiXamlInflator>SourceGen</MauiXamlInflator>
</PropertyGroup>

.NET 10 Preview 5 ยังแนะนำ implicit XML namespaces ที่ขจัดการประกาศ xmlns ที่ซ้ำซ้อน ไฟล์ GlobalXmlns.cs สามารถรวม namespaces หลายตัว:

[assembly: XmlnsDefinition(
    "http://schemas.microsoft.com/dotnet/maui/global",
    "MyApp.Views")]
[assembly: XmlnsDefinition(
    "http://schemas.microsoft.com/dotnet/maui/global",
    "MyApp.Controls")]

ด้วยการตั้งค่านี้ ไฟล์ XAML จะสะอาดขึ้น:

<!-- Before -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:controls="clr-namespace:MyApp.Controls"
        x:Class="MyApp.MainPage">
    <controls:TagView />
</ContentPage>

<!-- After (with global xmlns) -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/maui/global"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    <TagView />
</ContentPage>

HybridWebView ใน .NET 10: เชื่อมต่อ Native กับ Web

HybridWebView ช่วยให้สามารถฝังเนื้อหา web ภายในแอป MAUI พร้อมรักษาการสื่อสารสองทางระหว่าง C# และ JavaScript .NET 10 เพิ่มความสามารถสามอย่าง: การเรียก JavaScript แบบ fire-and-forget, event สำหรับการเริ่มต้นเพื่อกำหนดค่าเฉพาะแพลตฟอร์ม และการดักจับ web request

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Initialization event for platform-specific tweaks
        hybridWebView.WebViewInitialized += (sender, args) =>
        {
            System.Diagnostics.Debug.WriteLine("WebView ready");
        };
    }

    // Call JavaScript from C#
    private async void OnCallJsClicked(object sender, EventArgs e)
    {
        var result = await hybridWebView.InvokeJavaScriptAsync<string>(
            "getFormData",
            HybridSampleContext.Default.String
        );
        await DisplayAlertAsync("Result", result, "OK");
    }

    // Fire-and-forget: no return type needed (.NET 10)
    private async void OnResetClicked(object sender, EventArgs e)
    {
        await hybridWebView.InvokeJavaScriptAsync("resetForm");
    }
}

Exception ของ JavaScript ที่เกิดขึ้นระหว่าง InvokeJavaScriptAsync ตอนนี้ถูกส่งต่อไปยัง .NET โดยอัตโนมัติเป็น exception ขจัดความล้มเหลวที่ตรวจไม่พบ การดักจับ web request ช่วยให้แก้ไข header หรือให้ response แบบ local:

webView.WebResourceRequested += (s, e) =>
{
    if (e.Uri.ToString().Contains("api/secure"))
    {
        e.Handled = true;
        e.SetResponse(200, "OK", "application/json", GetCustomStream());
    }
};

API ที่ Deprecated และเส้นทางการย้าย

.NET MAUI 10 deprecate API หลายตัว แอปพลิเคชันที่ใช้ API เหล่านี้ควรย้ายไปยังทางเลือกที่แนะนำ

ListView และ cell ที่เกี่ยวข้อง: ListView, EntryCell, ImageCell, SwitchCell, TextCell, และ ViewCell ถูก deprecated ใช้ CollectionView แทน ซึ่งมีประสิทธิภาพและความเสถียรดีกว่าด้วย handler iOS/Mac Catalyst ใหม่

MessagingCenter: เปลี่ยนเป็น internal ใน .NET 10 แทนที่ด้วย WeakReferenceMessenger จาก CommunityToolkit.Mvvm

เมธอด animation: FadeTo, RotateTo, ScaleTo, และเมธอดที่คล้ายกันถูก deprecated ใช้เวอร์ชัน async: FadeToAsync, RotateToAsync, ScaleToAsync

TableView: Deprecated ใช้ CollectionView แทน

DisplayAlert/DisplayActionSheet: แทนที่ด้วย DisplayAlertAsync และ DisplayActionSheetAsync

การย้ายจาก Xamarin.Forms ไปยัง .NET MAUI

Xamarin.Forms สิ้นสุดการสนับสนุนในเดือนพฤษภาคม 2024 การย้ายไปยัง MAUI เกี่ยวข้องกับการเปลี่ยนแปลงโครงสร้างที่มากกว่าการเปลี่ยน namespace ต่อไปนี้เป็นรายการตรวจสอบการย้ายที่อ้างอิงจากประสบการณ์แปลงโปรเจกต์จริง:

1. โครงสร้างโปรเจกต์: แปลงจากโปรเจกต์เฉพาะแพลตฟอร์มเป็นโมเดล single-project ของ MAUI ย้ายโค้ดที่ใช้ร่วมกันไปที่ root โค้ดแพลตฟอร์มไปที่ Platforms/
2. Namespace: แทนที่ Xamarin.Forms ด้วย Microsoft.Maui.Controls และ Xamarin.Essentials ด้วย Microsoft.Maui.Essentials (ตอนนี้ built-in ใน MAUI)
3. Renderer เป็น Handler: Custom renderer ต้องเขียนใหม่เป็น handler API ของ handler ง่ายกว่าแต่ logic การแมปต่างกัน
4. Startup: แทนที่การเริ่มต้น App.xaml.cs ด้วย MauiProgram.cs โดยใช้ builder pattern
5. แพ็กเกจ NuGet: แพ็กเกจยุค Xamarin จำนวนมากมีเวอร์ชัน MAUI ตรวจสอบความเข้ากันได้ก่อนอัปเกรด
6. Dependency injection: MAUI ใช้ Microsoft.Extensions.DependencyInjection โดย native แทนที่ DI container ของบุคคลที่สามหรือการเรียก DependencyService

.NET Upgrade Assistant ทำขั้นตอนที่ 1-2 บางส่วนโดยอัตโนมัติ แต่ handler (ขั้นตอนที่ 3) และการปรับ business logic ต้องทำด้วยตนเอง

คำถามสัมภาษณ์งาน .NET MAUI ยอดนิยมสำหรับปี 2026

คำถามเหล่านี้สะท้อนสิ่งที่ทีมรับสมัครถามในปี 2026 อ้างอิงจากระบบนิเวศ .NET 10 ปัจจุบัน สำหรับการเตรียมสัมภาษณ์ C# และ .NET เพิ่มเติม ดู คู่มือสัมภาษณ์ .NET ฉบับสมบูรณ์

สถาปัตยกรรม handler ของ MAUI แตกต่างจาก renderer ของ Xamarin.Forms อย่างไร?

Renderer ใน Xamarin.Forms มี coupling ที่แน่นหนากับทั้ง control cross-platform และ native view สร้างการพึ่งพาแบบสองทิศทาง Handler ใน MAUI เป็น mapper แบบ stateless: รับการแจ้งเตือนเมื่อ property เปลี่ยนแปลงและนำไปใช้กับ native view ผ่าน dictionary ของ mapper การแยกส่วนนี้ทำให้ handler ทดสอบ ขยาย และนำกลับมาใช้ใหม่ได้ง่ายกว่า Dictionary PropertyMapper และ CommandMapper แทนที่รูปแบบ override OnElementPropertyChanged ทำให้การปรับแต่งชัดเจนแทนที่จะซ่อนอยู่ใน switch statement

ข้อผิดพลาดด้าน DI lifetime ที่เฉพาะสำหรับ MAUI มีอะไรบ้าง?

MAUI รองรับ lifetime แบบ Singleton, Transient และ Scoped แต่ Scoped ทำงานต่างจาก ASP.NET Core ไม่มีขอบเขต scope ตามธรรมชาติ (เหมือน HTTP request) Service แบบ Scoped ที่ลงทะเบียนใน MAUI ทำงานเหมือน Singleton เว้นแต่จะสร้าง scope แบบกำหนดเองด้วยตนเอง ข้อผิดพลาดที่พบบ่อย: ลงทะเบียน ViewModel เป็น Singleton เมื่อมันเก็บ state เฉพาะหน้า (ข้อมูลเก่าเมื่อนำทาง) หรือลงทะเบียน database connection เป็น Transient (connection pool หมด) กฎทั่วไป: ViewModel เป็น Transient, service เป็น Singleton และหลีกเลี่ยง Scoped เว้นแต่ lifecycle ของ scope จะถูกจัดการอย่างชัดเจน

Compiled binding แตกต่างจาก binding แบบ reflection ใน MAUI อย่างไร?

Binding แบบ reflection แก้ไข property path ตอน runtime โดยใช้ System.Reflection ซึ่งช้าและสร้าง error ตอน runtime สำหรับการพิมพ์ผิด Compiled binding ที่เปิดใช้งานผ่าน x:DataType แก้ไข binding path ตอน compile time Compiler สร้างโค้ดเข้าถึง property โดยตรง ข้าม reflection ทั้งหมด สิ่งนี้ปรับปรุงเวลาเริ่มต้น ลดการจัดสรรหน่วยความจำ และจับ error ของ binding ตอน build ใน .NET 10 source generator XAML ใหม่เพิ่มประสิทธิภาพอีกโดยคอมไพล์ XAML ตอน build time แทนที่จะ parse ตอน runtime

มีกลยุทธ์อะไรบ้างสำหรับการแชร์โค้ดระหว่างแอป MAUI และ backend ASP.NET Core?

แนวทางที่แนะนำใช้ shared class library ที่มี DTO, logic ตรวจสอบ และ business rules ทั้งแอป MAUI และ backend ASP.NET Core อ้างอิง library นี้ .NET 10 เสริมรูปแบบนี้ด้วยการรวม .NET Aspire สำหรับ MAUI ที่ให้ service discovery และ telemetry ข้ามโปรเจกต์มือถือและ backend Shared contract ที่ใช้ source generator ของ System.Text.Json รับประกันความสอดคล้องของ serialization ข้อจำกัดหลัก: shared library ต้อง target net10.0 (ไม่ใช่ TFM เฉพาะแพลตฟอร์ม) เพื่อรักษาความ portable

HybridWebView แตกต่างจาก BlazorWebView ใน MAUI อย่างไร?

BlazorWebView โฮสต์แอปพลิเคชัน Blazor เต็มรูปแบบภายในแอป MAUI Component ของ Razor เรนเดอร์ลงใน WebView ที่ฝังไว้ แต่ .NET runtime ทำงานแบบ native (ไม่ผ่าน WebAssembly) HybridWebView เบากว่า: โหลดเนื้อหา HTML/CSS/JS แบบ static และให้ interop C#-ไป-JavaScript โดยไม่มี overhead ของ framework Blazor ทางเลือกขึ้นอยู่กับ use case BlazorWebView เหมาะสำหรับทีมที่มี component Blazor อยู่แล้วและต้องการ code reuse HybridWebView เหมาะสำหรับสถานการณ์ที่เนื้อหา web ที่มีอยู่ (dashboard, แผนที่, editor) ต้องการการรวมแบบ native โดยไม่ต้องใช้ framework เต็มรูปแบบ

ฝึกฝนเพิ่มเติมด้วยคำถามสัมภาษณ์ .NET บน SharpSkill เพื่อเสริมความเข้าใจแนวคิดเหล่านี้ด้วยแบบฝึกหัดแบบโต้ตอบ

แหล่งข้อมูล

• What's new in .NET MAUI for .NET 10 — เอกสารทางการครอบคลุมฟีเจอร์ .NET 10 MAUI ทั้งหมด
• .NET MAUI GitHub Releases — release notes ของ service สำหรับเวอร์ชัน 10.0.x
• Edge-to-Edge Is Now Mandatory in Android 16 — คู่มือการย้ายสำหรับข้อกำหนด Android 16
• MAUI GitHub Discussion #34171 — ความคิดเห็นของชุมชนเกี่ยวกับความเสถียรของ .NET MAUI 10

สิ่งที่นักพัฒนา .NET MAUI 10 ควรจำ

• .NET MAUI 10 เป็นเวอร์ชัน LTS (สนับสนุนถึงพฤศจิกายน 2028) ที่เน้นความเสถียรและประสิทธิภาพ เป็นตัวเลือกที่เชื่อถือได้สำหรับแอป cross-platform ระดับ production
• Android 16 บังคับ edge-to-edge: เพิ่ม SafeAreaEdges="Container" เป็น global style ใน App.xaml เพื่อคืนค่าพฤติกรรม .NET 9
• XAML source generator (MauiXamlInflator=SourceGen) คอมไพล์ XAML ตอน build time ปรับปรุงประสิทธิภาพ startup และจับ error เร็วขึ้น
• ListView, TableView, และ MessagingCenter ถูก deprecated: ย้ายไปยัง CollectionView และ WeakReferenceMessenger
• สถาปัตยกรรม handler แทนที่ renderer ของ Xamarin ด้วย mapper แบบ stateless ปรับปรุงความสามารถในการทดสอบผ่าน PropertyMapper และ CommandMapper
• Source generator ของ CommunityToolkit.Mvvm ลด boilerplate MVVM ส่วนใหญ่: attribute [ObservableProperty] และ [RelayCommand] แทนที่การ implement แบบ manual
• HybridWebView ใน .NET 10 เพิ่มการเรียก JavaScript แบบ fire-and-forget, event เริ่มต้น และการดักจับ request สำหรับการรวม native-web
• การเตรียมตัวสัมภาษณ์ควรเน้นที่สถาปัตยกรรม handler vs. renderer, ข้อผิดพลาด DI lifetime ในแอปที่ทำงานนาน, compiled binding และข้อแลกเปลี่ยนระหว่าง HybridWebView vs. BlazorWebView