HomeOur Team

.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

Untitled.png

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

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

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

Untitled 1.png

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

Untitled 2.png

  1. 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ờ =]]

Kết luận

Bài này chúng ta đã làm được

  • Cài đặt môi trường Visual Studio 2022 để code MAUI.
  • Tạo một project và chạy trên môi trường window
  • Sửa code giao diện và sửa logic

Ở các bài tiếp theo tôi sẽ hướng dẫn các bạn thêm về cấu trúc thư mục, Binding dữ liệu,…..

Hẹn các bạn ở bài viết tiếp theo


Tags

.NET MAUI.NET

Trịnh Hữu Hoàng

.NET Developer

Expertise

C#
ReactJs
PHP
Python

Social Media

fb

Related Posts

Fullstack - Chuyện trò linh tinh
Others
Fullstack - Chuyện trò linh tinh
December 11, 2022
7 min

Quick Links

HomeOur Team

Social Media