.NET MAUI 這5個獨特功能,帶你增強使用者體驗

微軟技術棧發表於2023-02-13

使用 .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 以獲取可能需要利用的其他功能和控制元件。

點我前往 .NET MAUI 官網,瞭解更多桌面功能~

相關文章