Create mobile apps using. NET MAUI-Get Start

Create mobile apps using. NET MAUI-Get Start

A simple journey to use MAUI

最后更新 6/15/2022 10:52 PM
张飞洪[厦门]
预计阅读 7 分钟
分类
MAUI
标签
.NET C# MAUI

1. IDE download and install

  • If you haven't installed the Visual Studio 2022 preview yet

你可以点击下载

在安装过程中,应选择.NET 跨平台应用程序 UI 开发,如下图所示:

  • Already has a preview version of Visual Studio 2022

如果您已经拥有 Visual Studio 2022 预览版,则可以更新以添加 .NET MAUI 支持。

2. Create an application

  • Open the preview version of Visual Studio 2022.
  • Select the Create New Project button.
  • Select MAUI from the Project Type drop-down list.
  • Select the. NET MAUI App template and select the Next button.

  • 输入MyFirstMauiApp作为项目名称并选择Create按钮。

  • Restore NuGet package

Wait for NuGet to automatically restore the application's dependencies, and wait until the restored or ready message appears in the status bar at the lower left of the screen.

3. Running the application

This tutorial focuses on first deploying the. NET MAUI application to a local Windows machine. Later, you can choose to set up an Android device or emulator.

  • Set up Windows for development

To develop Windows applications, you need to enable Developer Mode to load applications alongside Windows 11 or Windows 10.

** Enable developer mode **

  1. On Windows, go to the Settings application.
  2. Search for developer settings in Privacy and Security on Windows 11 and Updates and Security on Windows 10.
  3. Turn on the toggle switch in Developer Mode.

  1. The Use Developer Functions dialog box appears. Select Yes to confirm that you want to enable developer mode.

  • run on Windows

You are now ready to run your. NET MAUI application and deploy it to Windows. In the toolbar, Windows machines are treated as debugging targets by default.

选择“调试” > “开始调试F5”(或按)

4. Edit the code

When developing with. NET MAUI, you can use XAML hot overloading during debugging. This means that you can change the XAML user interface at run time, and the UI will update automatically.

解决方案资源管理器中,双击项目 MainPage.xaml 下的文件 MyFirstMauiApp。

Currently, the first Label of Text is set to Hello, World! The following code shows:

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

Update the text to Hello,. NET MAUI!:

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

The UI will automatically update:

When developing with. NET MAUI, you can also use. NET Hot Reload to reload C#code. We modified the logic in the program to increase the count by 10 instead of 1.

打开 MainPage.xaml.cs(此文件嵌套在 MainPage.xaml 下,或者您可以右键单击并从菜单中选择查看代码)。

The method on this OnCounterClicked file currently has the following code:

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);
}

Update count++; by changing to to increase 10 count += 10;

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);
}

To apply code changes, select the Hot Reload button in Visual Studio or select ALT+F10.

Select the "Click on me" button and see that it has increased by 10.

5. Configure Android devices

You can decide to deploy to multiple platforms based on your own development environment. Just up and deployed to Windows. Now let's set up an Android device or emulator.

  • Android SDK installation

从调试下拉菜单中,选择框架下的 net6.0-android

构建项目需要特定版本的 Android SDK。如果您尚未接受 Android SDK 许可,您将在错误列表窗口中看到以下错误消息。

Double-click the message to start the license acceptance process. Click accept for each license that exists and automatic installation will begin.

  • Set up an Android emulator

If you don't have an Android device to deploy, you can set up an Android emulator. If you have already done this, you can skip this step.

If this is your first time building a. NET MAUI application, you will see "Android Emulator" in the debugging menu. Click it to start the creation process.

This will pop up a user account control prompt. Select the Yes button and the simulator creation process will begin. Select the Create button to create a simulator using the default settings.

此时,可能会提示您同意 Android 模拟器的许可协议。选择接受以继续该过程,下载模拟器图像并完成模拟器的创建,创建模拟器后,您会看到一个显示Start的按钮。点击它。

您可能会收到启用 Windows Hypervisor 平台的提示。按照文档启用加速以提高性能(强烈推荐)

The Android emulator will start. Wait until it completely completes launching, and you will see it appear in the Visual Studio debugging menu.

Your Android emulator is now created and ready to use. The next time you run Visual Studio, the emulator will appear directly in the debugging target window and start when you select it.

  • Set up Android devices To use Android devices for development, USB debugging needs to be enabled. Follow these steps on your device to connect it to Visual Studio. If you don't have an Android device, you can skip this section.

** Enable developer mode **

  1. Go to the Settings screen.
  2. 使用设置屏幕顶部的搜索查找内部版本号,或在关于手机中找到它。
  3. 点击内部版本号7-10 次,直到“你现在是开发者了!” 弹出。
  4. 单击创建

** Check USB debugging status **

  1. Go to the Settings screen.
  2. 使用设置屏幕顶部的搜索查找USB 调试,或在开发人员选项中找到它。
  3. 如果尚未启用USB 调试,请启用它。

** Trust device **

  1. Plug your device into your computer.
  2. You will be prompted to allow USB debugging.
  3. Check Always Allow from this computer.
  4. Click Allow.

Your device is now configured and will appear as a deployment target in Visual Studio.

  • Run on Android

Make sure your device or emulator is selected as a debugging target.

从菜单中,选择调试>开始调试(或按F5)。如果禁用此选项,请确保选择了模拟器或设备。

The application will be built, deployed to the selected Android device/emulator, and run.

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 4/11/2024

NET MAUI Open Source Free UI Toolkit- Uranium

There have been friends who have been leaving messages on the background of the Weixin Official Accounts asking me to share the UI framework related to. NET MAUI. Today, Dayao shared an open source and free UI toolkit: Uranium.

继续阅读
同分类 / 同标签 1/12/2023

Maui Blazor uses a camera

Since the interface in Maui Blazor is rendered by WebView, it cannot be obtained when using the Android camera again, because the native camera needs to be bound with interface components.

继续阅读