.NET MAUI - part 1 -Bắt đầu với Hello world

By Trịnh Hữu Hoàng

Published in Others

December 11, 2022

1 min read

MAUI - part 1

Phần đầu tiên của serie này sẽ đi thẳng vào xây dựng ứng dụng. Chúng ta sẽ đi qua các bước

Cài đặt môt trường dev
Chạy một app Hello world.

Download and install

Tải về và cài đặt Visual studio 2022

Trong quá trình cài chọn .NET Multi-platform App UI development

Tạo app sử dụng template mặc định

Các bước thực hiện

Mở Visual Studio 2022
Chọn Create a new project
Trong cửa sổ Create a new project, chọn MAUI

Untitled 1.png

Trong cửa sổ Configure your new project nhập MyFirstMauiApp rồi bấm Next

Untitled 2.png

Trong cửa sổ Additional information , chọn .NET 7.0 (Standard Term Suport) hoặc chọn .NET 6.0 cũng được → bấm Create .

Untitled 3.png

Chạy ứng dụng

Chờ build project xong. Bấm Run là được. Mặc định sẽ chạy trên ****Window Machine**** (vì tôi đang dùng window - và tôi nghĩ bạn cũng đang dùng window)

Untitled 4.png

Untitled 5.png

Okay tuyệt vời, easy không. Thế là xong 1 con app rồi đấy =]]

Code C# không khó

Chú ý: nếu chưa bật Developer mode trên window thì bạn có khả năng sẽ gặp lỗi. Mà máy nó thông báo tường minh lắm rồi, tôi không viết vô bài này nữa nhé.

Untitled 6.png

Thế thôi nhỉ, chạy được con app, ai về nhà nấy nhỉ =]] Đùa thôi, có project rồi, không vào vọc vạch thì phí.

Sửa code

Cấu trúc thư mục như sau

Untitled 7.png

Chọn MainPage.xaml → file này chứa code của trang Helloworld

Sửa đoạn sau

<Label
    Text="Hello, World!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

thành

<Label
    Text="Hello, .NET MAUI!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

Woa la,

Untitled 8.png

Đấy là sửa giao diện

Giờ chúng ta sẽ thử sửa logic nút click coi

Untitled 9.png

Chọn file MainPage.xaml.cs

Sửa

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

thành

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Bấm và trải nghiệm nhờ =]]