Telerik DevCraft包含一個完整的產品棧來構建您下一個Web、移動和桌面應用程序。它使用HTML和每個.NET平臺的UI庫，加快開發速度。Telerik DevCraft提供最完整的工具箱，用于構建現代和面向未來的業務應用程序。

上下文菜單允許在屏幕上的任何地方添加浮動菜單，本文將為大家介紹使用這些工具的好處，以及如何將它們添加到.NET MAUI應用程序中。

 目前 .NET 7已經發布了，在本文中我們將討論為了改進桌面應用程序的用戶體驗而實現的一個功能——上下文菜單！我們將一起學習一種非常簡單和直觀的方式實現它！

什么是上下文菜單?

上下文菜單是浮動菜單，可以通過MenuFlyout附加到 .NET MAUI應用程序的任何視覺元素上，當用戶右擊分配了ContextMenu的控件時，就會顯示此信息。

注意：只有當它是桌面應用程序時，才會出現此菜單!

上下文菜單的作用

開發人員可以將這個ContextMenu添加到想要的所有視覺元素中。

這是一個浮動菜單，所以可以把它添加到屏幕上的任何地方，只需要添加一個視覺元素即可。

ContextMenu可視化結構

在開始編寫代碼之前，開發人員必須直觀地了解組成菜單的每個元素的技術名稱，這樣可以更容易地理解代碼結構。

在本文中桌面應用程序會有一個按鈕，用戶右鍵單擊它，ContextMenu就會出現。

理解代碼結構

首先，不要忘記創建支持 .NET 7的項目。

現在，這就是ContextMenu的代碼結構：

接下來，讓我們通過一些簡單的步驟來學習如何將上述結構轉換為代碼：

Step 1：選擇附加ContextMenu的控件。

在本例中，我們有一個按鈕，當右鍵單擊它時，會打開菜單。

<Button Text="Right click to here to see the options"
BackgroundColor="#E1C9FF">

<!-- Add here the code explained in the next step.-->

</Button>

Step 2：添加ContextFlyout和MenuFlyout。

這些標記向控件指示它將包含一個ContextMenu。

<FlyoutBase.ContextFlyout>
<MenuFlyout>

<!-- Add here the code explained in the next step.-->

</MenuFlyout>
</FlyoutBase.ContextFlyout>

Step 3：開始添加菜單項。

開發人員可以在這里添加三個元素:

MenuFlyoutItem：它是菜單項，其中包含將在項目中顯示的描述，開發人員添加所需的項目，如下例所示：

<MenuFlyoutItem Text="Preferences" />
<MenuFlyoutItem Text="Privacy Reporte" />

<!-- Add all the Items that you need -- >

MenuFlyoutSeparator：它是水平分隔線，可以用于分類菜單的一組項目。(這并不是強制性的。)

<MenuFlyoutSeparator/>

<!-- Add all the separator that you need -- >

MenuFlyoutSubItem：它允許開發人員為菜單添加更多層次結構，項目添加的方式與MenuFlyoutItem相同得益于此，開發人員可以添加一組派生自另一組的項目，還可以在App中添加任意多的子菜單。

<MenuFlyoutSubItem Text="Export from">
<MenuFlyoutItem Text="Bookmarks" />
<MenuFlyoutItem Text="Password" />
<MenuFlyoutSubItem Text="History">
<MenuFlyoutItem Text="Last Friday" />
<MenuFlyoutItem Text="Today" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
<!-- Add all the SubMenus that you need -- >

最后，為了實現如圖所示的示例，并記住所學到的內容，必須擁有如下代碼：

<Button Text="Right click to here to see the options" BackgroundColor="#E1C9FF">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="About this App" />
<MenuFlyoutSeparator/>
<MenuFlyoutItem Text="Preferences" />
<MenuFlyoutItem Text="Privacy Reporte" />
<MenuFlyoutSeparator/>
<MenuFlyoutSubItem Text="Export from">
<MenuFlyoutItem Text="Bookmarks" />
<MenuFlyoutItem Text="Password" />
<MenuFlyoutSubItem Text="History">
<MenuFlyoutItem Text="Last Friday" />
<MenuFlyoutItem Text="Today" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Button>

 除了對每個項目都必須使用的Text屬性外，還有IconImageSource屬性選項，該選項允許開發人員向從菜單中選擇的項目添加圖標。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論