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

Telerik DevCraft官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

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

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

什么是上下文菜單?

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

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

上下文菜單的作用

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

這是一個(gè)浮動(dòng)菜單，所以可以把它添加到屏幕上的任何地方，只需要添加一個(gè)視覺(jué)元素即可。

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

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

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

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

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

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

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

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

在本例中，我們有一個(gè)按鈕，當(dāng)右鍵單擊它時(shí)，會(huì)打開(kāi)菜單。

<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。

這些標(biāo)記向控件指示它將包含一個(gè)ContextMenu。

<FlyoutBase.ContextFlyout>
<MenuFlyout>

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

</MenuFlyout>
</FlyoutBase.ContextFlyout>

Step 3：開(kāi)始添加菜單項(xiàng)。

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

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

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

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

MenuFlyoutSeparator：它是水平分隔線，可以用于分類(lèi)菜單的一組項(xiàng)目。(這并不是強(qiáng)制性的。)

<MenuFlyoutSeparator/>

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

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

最后，為了實(shí)現(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>

除了對(duì)每個(gè)項(xiàng)目都必須使用的Text屬性外，還有IconImageSource屬性選項(xiàng)，該選項(xiàng)允許開(kāi)發(fā)人員向從菜單中選擇的項(xiàng)目添加圖標(biāo)。

么是浮動(dòng)塌陷？

當(dāng)子元素設(shè)置浮動(dòng)時(shí)，父元素中所有孩子盒子都是float，則父容器的高度為0。

1.在父親盒子中的最下邊添加一個(gè)空div盒子，并設(shè)置clear為相應(yīng)的值，如果不清除塌陷，那么父元素高度為0，給ul設(shè)置高度就沒(méi)有效果。

clear常見(jiàn)取值如下：

left：清除左側(cè)浮動(dòng)引起的塌陷；

right：清除右側(cè)浮動(dòng)引起的塌陷；

both：清除左右兩側(cè)浮動(dòng)引起的塌陷。

2.