5 个 .NET MAUI 功能为您构建出色的桌面应用程序

Amy Peng

February 5th, 20230 2

本文翻译于James Montemagno的这篇英文文章：5 .NET MAUI Features for Building Great Desktop Apps。

.NET MAUI不仅可以构建跨平台移动应用程序，它还可以为 Windows 和 Mac 制作精美的桌面应用程序。您的应用程序可能只面向桌面平台，又或许是跨移动和桌面。无论哪种方式，无论用户使用什么设备，您都希望为他们带去最佳的用户体验。为此，您需要依靠运行您的应用程序的硬件和操作系统。就桌面而言，.NET MAUI 提供了几个独特的功能来增强用户的体验，今天我将详细讲解我心目中 5个最佳功能。

多窗口

.NET MAUI 的一个根本变化是引入了Window作为基础。当您创建、运行 .NET MAUI 应用程序时，您的应用程序会自动创建一个默认的窗口并用其显示内容。应用程序有一个新的CreateWindow方法，在创建任何新窗口时都会调用该方法。当应用程序在桌面（或平板电脑）上运行有更多可利用空间时，您可能想要创建第二个或第三个窗口而不是四处浏览。让我们以天气应用程序为例。一旦用户浏览到一个城市，我们可能希望显示更多信息，包括地图。我们可以选择导航到该页面，或使用内置 API 打开一个全新的窗口：

var weatherDetails = new Window(new WeatherDetailsPage());
Application.Current.OpenWindow(weatherDetails);

现在我们的用户可以拥有多个视图，而不必局限于一个窗口的信息。用户可以在任何时候关闭一个窗口，或者我们也可以用程序关闭它。

// Close a specific window
Application.Current.CloseWindow(weatherDetails);

// Close the active window
Application.Current.CloseWindow(GetParentWindow());

有关配置多窗口支持的更多信息，请阅读多窗口文档。

顶级菜单栏

桌面应用程序最常见的一个功能就是菜单栏，该菜单栏可以集成到Windows上的应用程序中，也可以集成到Mac上的系统菜单栏中。通过使用 .NET MAUI，只需几行代码，您就可轻松集成菜单栏。这样有一个好处，用户在iPad上使用键盘运行应用程序时，他们也可以访问菜单。以这个天气应用程序为例，您可能想有一个菜单，允许用户添加、删除或浏览不同的位置。

每个ContentPage都有一个 MenuBarItems 集合，该集合可以有多个级别的菜单：

<ContentPage ...>
    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="Exit"
                            Command="{Binding ExitCommand}" />
        </MenuBarItem>
        <MenuBarItem Text="Locations">
            <MenuFlyoutSubItem Text="Change Location">
                <MenuFlyoutItem Text="Redmond, USA"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Redmond" />
                <MenuFlyoutItem Text="London, UK"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="London" />
                <MenuFlyoutItem Text="Berlin, DE"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Berlin"/>
            </MenuFlyoutSubItem>
            <MenuFlyoutSeparator />            
            <MenuFlyoutItem Text="Add Location"
                            Command="{Binding AddLocationCommand}" />
            <MenuFlyoutItem Text="Edit Location"
                            Command="{Binding EditLocationCommand}" />
            <MenuFlyoutItem Text="Remove Location"
                            Command="{Binding RemoveLocationCommand}" />                            
        </MenuBarItem>
        <MenuBarItem Text="View">
            <!--More items-->
        </MenuBarItem>
    </ContentPage.MenuBarItems>
</ContentPage>

您可以直接在 XAML 中创建这些菜单项，也可以通过代码编程创建动态菜单。菜单项可以被启用或禁用，具有分隔符，子菜单等项，在Windows应用程序上具有图标，并且除了绑定命令之外，还能触发Clicked事件。请您浏览菜单栏文档 menu bar documentation以获取更多详细信息。

Context menus

有时，您希望用户右击元素时会显示更多选项。这时您就需要一个类似于基于特定上下文菜单栏的菜单。这时， .NET MAUI 应用程序中就出现了上下文菜单context menus。它们具有与菜单栏作用类似的 API，但API需要被放置在特定控件上。例如，我们可能想在天气应用中添加对特定城市的评论。我们可能还想打开一个新窗口，然后提供一个Editor区域让用户编辑。

我们可以将MenuFlyout 应用于Editor，并用类似于前面菜单栏的 MenuFlyoutItems 填充它。

<Editor>
    <FlyoutBase.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Bold" Clicked="OnBoldClicked"/>
            <MenuFlyoutItem Text="Italics" Clicked="OnItalicsClicked"/>
            <MenuFlyoutItem Text="Underline" Clicked="OnUnderlineClicked"/>
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</Editor>

这和使用菜单栏效果一样，您还可以绑定命令，让其可以触发事件，具有图标，子菜单，分隔线等。查看上下文菜单文档 context menu documentation了解所有详细信息。

Tooltips

Tooltips 是一种可以在应用程序中添加功能并增强用户体验的快速简便的方法。您的桌面用户可以使用鼠标和键盘，这意味着您可以在应用程序中的控件徘徊时提供其他上下文。使用附加的属性TooltipProperties.Text 使您可以指定向用户鼠标悬停显示的其他信息。

假设我们要在评论页面上的“保存”按钮中添加其他信息。我们需要做的就是设置属性，就像这样它会顺利运行。

<Button Text="Save"
        ToolTipProperties.Text="Click to save your comment" />

这也可以在任何控件的代码中以编程方式设置：

var button = new Button { Text = "Save" };
ToolTipProperties.SetText(button, "click to save your comment");

有关更多信息，请访问 tooltip documentation.

Pointer gestures

说到在用户使用鼠标导航时增强桌面应用程序， .NET MAUI有几个专门针对鼠标 Pointer 的新手势识别器。您可以轻松地查看任何 Pointer 何时输入，退出或移至控件内部。

<Image Source="dotnet_bot.png">
    <Image.GestureRecognizers>
        <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                  PointerExited="OnPointerExited"
                                  PointerMoved="OnPointerMoved" />
  </Image.GestureRecognizers>
</Image>

当 Pointer 与我们的图像互动时，我们会得到事件。一旦获得事件，我们还可以获得 Pointer 在图像内部或相对于图像的位置。

void OnPointerExited(object sender, PointerEventArgs e)
{
    // Position inside window
    Point? windowPosition = e.GetPosition(null);

    // Position relative to an Image
    Point? relativeToImagePosition = e.GetPosition(image);

    // Position relative to the container view
    Point? relativeToContainerPosition = e.GetPosition((View)sender);
}

就像这样，我们可以用Point在应用程序中执行操作。要了解有关不同手势识别者的更多信息，请确保浏览该文档。