Telerik DevCraft包含一個完整的產(chǎn)品棧來構(gòu)建您下一個Web、移動和桌面應(yīng)用程序。它使用HTML和每個.NET平臺的UI庫，加快開發(fā)速度。Telerik DevCraft提供最完整的工具箱，用于構(gòu)建現(xiàn)代和面向未來的業(yè)務(wù)應(yīng)用程序。

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

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

什么是上下文菜單?

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

注意：只有當它是桌面應(yīng)用程序時，才會出現(xiàn)此菜單!

上下文菜單的作用

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

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

ContextMenu可視化結(jié)構(gòu)

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

在本文中桌面應(yīng)用程序會有一個按鈕，用戶右鍵單擊它，ContextMenu就會出現(xiàn)。

理解代碼結(jié)構(gòu)

首先，不要忘記創(chuàng)建支持 .NET 7的項目。

現(xiàn)在，這就是ContextMenu的代碼結(jié)構(gòu)：

接下來，讓我們通過一些簡單的步驟來學(xué)習如何將上述結(jié)構(gòu)轉(zhuǎn)換為代碼：

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：開始添加菜單項。

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

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

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

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

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

<MenuFlyoutSeparator/>

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

MenuFlyoutSubItem：它允許開發(fā)人員為菜單添加更多層次結(jié)構(gòu)，項目添加的方式與MenuFlyoutItem相同得益于此，開發(fā)人員可以添加一組派生自另一組的項目，還可以在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 -- >

最后，為了實現(xiàn)如圖所示的示例，并記住所學(xué)到的內(nèi)容，必須擁有如下代碼：

<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屬性選項，該選項允許開發(fā)人員向從菜單中選擇的項目添加圖標。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進群討論