使用 .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, "lick to save your comment");
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 在应用程序中执行操作。要了解有关不同手势识别者的更多信息,请确保浏览该文档。
以上,我们介绍了5个很棒的功能来增强你桌面上的 .NET MAUI 应用程序。这仅仅是开始,因为还有更多的优质功能可以在所有平台上构建出色的应用程序。请浏览所有 .NET MAUI documentation 以获取可能需要利用的其他功能和控件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。