航欄怎么搭？mdc-maui NavigationBar底部導(dǎo)航欄與NavigationDrawer抽屜完整教程)
Material導(dǎo)航欄怎么搭mdc-maui NavigationBar底部導(dǎo)航欄與NavigationDrawer抽屜完整教程【免費下載鏈接】mdc-mauiMaterial design components for .NET MAUI項目地址: https://gitcode.com/gh_mirrors/md/mdc-mauimdc-maui是為 .NET MAUI 打造的 Material Design 3 組件庫其中的NavigationBar底部導(dǎo)航欄與NavigationDrawer導(dǎo)航抽屜是搭建跨平臺 App 導(dǎo)航的兩大核心組件。本文帶你快速上手先認識兩個組件的適用場景再用幾段 XAML 就能搭出帶選中態(tài)、點擊切換頁面、漣漪反饋的專業(yè)級導(dǎo)航并附上官方推薦的布局最佳實踐。一、先搞懂NavigationBar 和 NavigationDrawer 有什么區(qū)別在動手之前用一張表搞清楚什么時候用哪個對比項NavigationBar 底部導(dǎo)航欄NavigationDrawer 導(dǎo)航抽屜適用設(shè)備手機等小屏幕平板、桌面等大屏幕項目數(shù)量官方建議3~5 個同級入口入口可更多支持分組呈現(xiàn)方式常駐屏幕底部默認收起點擊呼出典型用途首頁 / 分類 / 收藏 / 我的主菜單、設(shè)置等次級入口源碼位置src/Material.Components.Maui/Components/NavigationBar/src/Material.Components.Maui/Components/NavigationDrawer/ 官方文檔原文建議導(dǎo)航目的地不要頻繁變動且應(yīng)保持同級重要性抽屜則應(yīng)把最常用的入口放在頂部、相關(guān)入口放在一起見 docs/navigation-bar.md 與 docs/navigation-drawer.md。二、3 分鐘完成環(huán)境準(zhǔn)備想要使用 Material 導(dǎo)航組件只需三步創(chuàng)建 MAUI 項目在 Visual Studio 中新建一個 .NET MAUI 應(yīng)用安裝 NuGet 包包名為Material.Components.Maui倉庫示例工程sample/中可直接參考注冊組件在 MauiProgram.cs 的構(gòu)建器鏈中調(diào)用builder.UseMaterialComponents()并在 App.xaml 中合并mds:MaterialStyles /資源字典支持Light/Dark雙色種子色。完成后所有頁面只需聲明一個 XML 命名空間前綴md即可直接使用全部 Material 組件。詳細步驟見 docs/getting-started.md。三、NavigationBar 底部導(dǎo)航欄實戰(zhàn)3 行 XAML 搭出選中態(tài)導(dǎo)航底部導(dǎo)航欄的源碼入口是 NavigationBar.cs它提供Items導(dǎo)航項集合、SelectedItem當(dāng)前選中項以及Command命令綁定。每個導(dǎo)航項由 NavigationBarItem.cs 實現(xiàn)內(nèi)置了選中指示器Active Indicator和漣漪反饋。最小可用示例如下md:NavigationBar md:NavigationBarItem IconData{Static icon:Material.Star} Text首頁 / md:NavigationBarItem IconData{Static icon:Material.Star} Text分類 / md:NavigationBarItem IconData{Static icon:Material.Star} Text我的 / /md:NavigationBar要點解析點擊自動切換選中態(tài)用戶點擊某一項時組件自動將SelectedItem指向該項并觸發(fā)SelectedItemChanged事件你只需在事件里切換頁面內(nèi)容命令綁定更簡潔通過CommandCommandParameter屬性可以直接把選中項對象傳給 ViewModel 的命令避免在代碼后硬編碼判斷選中指示器可定制ActiveIndicatorHeight默認 32與ActiveIndicatorColor默認取 SecondaryContainerColor 主題色讓你精確控制 Material 3 標(biāo)志性的膠囊形指示器樣式字體圖標(biāo)全套可調(diào)Text、IconData、IconColor、FontColor、FontSize、FontWeight均可單獨配置支持Clicked、Pressed、LongPressed等觸摸事件。進階用 ContentType 直接綁定頁面類型NavigationBarItem支持ContentType屬性把導(dǎo)航項與一個ContentView類型關(guān)聯(lián)起來選中時自動實例化對應(yīng)內(nèi)容XAML 聲明式即可完成頁面切換——示例工程 01.OverviewPage.xaml 中的md:Tabs就采用了同樣的思路。四、NavigationDrawer 導(dǎo)航抽屜實戰(zhàn)標(biāo)準(zhǔn) 模態(tài)雙風(fēng)格導(dǎo)航抽屜是桌面與平板場景的導(dǎo)航主力源碼見 NavigationDrawer.cs。它比底部導(dǎo)航欄多了兩個殺手锏標(biāo)題欄區(qū)TitleBar和底部固定區(qū)FooterItems并內(nèi)置兩種 Material 3 官方風(fēng)格定義于 NavigationDrawerStyles.xaml.csStandardNavigationDrawerStyle標(biāo)準(zhǔn)風(fēng)格抽屜默認展開占據(jù)左側(cè)空間適合大屏常駐ModalNavigationDrawerStyle模態(tài)風(fēng)格抽屜默認收起點擊圖標(biāo)彈出點擊外部自動關(guān)閉適合空間緊湊的布局。完整結(jié)構(gòu)示例如下展示了標(biāo)題、主導(dǎo)航區(qū)、底部固定區(qū)三大區(qū)域md:NavigationDrawer Style{DynamicResource ModalNavigationDrawerStyle} Label Padding20,0,20,20 FontAttributesBold FontSize18 TextTitle / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 1 / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 2 / md:NavigationBarItem.IconData /md:NavigationBarItem.IconData md:NavigationDrawer.FooterItems md:NavigationDrawerItem IconData{Static icon:Material.Settings} TextSettings / /md:NavigationDrawer.FooterItems /md:NavigationDrawer示例工程 MainPage.xaml 的真實用法更加精煉用ContentType把每個抽屜項直接綁定到具體頁面類型Settings 放在FooterItems中常駐底部——這正是官方次級入口下沉建議的最佳實踐。抽屜項的 Material 細節(jié)NavigationDrawerItem.cs 的每個抽屜項都實現(xiàn)了完整的視覺狀態(tài)機普通、懸停、按下、選中四個狀態(tài)normal / hovered / pressed / actived_*配合StateLayerColor狀態(tài)層與RippleDuration漣漪動畫參數(shù)在不同平臺上都呈現(xiàn)地道的 Material 觸感。五、5 條導(dǎo)航最佳實踐清單結(jié)合官方文檔與示例工程整理成可直接照做的清單控制入口數(shù)量底部導(dǎo)航欄保持 3~5 個再多就改用導(dǎo)航抽屜 分組保持入口恒定導(dǎo)航項不應(yīng)隨頁面動態(tài)增刪保證用戶在任意頁面都有相同的心理地圖常用入口置頂抽屜中把使用頻率最高的項放最上面相關(guān)項歸為一組次級入口下沉設(shè)置、退出、主題切換等低頻入口放進FooterItems與主導(dǎo)航視覺分離選中態(tài)交給組件優(yōu)先使用SelectedItem屬性與Command命令綁定避免手動逐項設(shè)置IsActived代碼更少且不易出錯。六、寫在最后mdc-maui 的 NavigationBar 與 NavigationDrawer 把 Material 3 的導(dǎo)航規(guī)范選中指示器、狀態(tài)層、漣漪、雙風(fēng)格抽屜做成了開箱即用的組件小屏用底部導(dǎo)航欄大屏用導(dǎo)航抽屜Command綁定 ContentType頁面關(guān)聯(lián)幾行 XAML 即可搭建出專業(yè)級導(dǎo)航結(jié)構(gòu)。打開sample/目錄運行示例工程對照本文逐段嘗試你會很快把這兩個組件用熟?！久赓M下載鏈接】mdc-mauiMaterial design components for .NET MAUI項目地址: https://gitcode.com/gh_mirrors/md/mdc-maui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Material導(dǎo)航欄怎么搭？mdc-maui NavigationBar底部導(dǎo)航欄與NavigationDrawer抽屜完整教程
Material導(dǎo)航欄怎么搭mdc-maui NavigationBar底部導(dǎo)航欄與NavigationDrawer抽屜完整教程【免費下載鏈接】mdc-mauiMaterial design components for .NET MAUI項目地址: https://gitcode.com/gh_mirrors/md/mdc-mauimdc-maui是為 .NET MAUI 打造的 Material Design 3 組件庫其中的NavigationBar底部導(dǎo)航欄與NavigationDrawer導(dǎo)航抽屜是搭建跨平臺 App 導(dǎo)航的兩大核心組件。本文帶你快速上手先認識兩個組件的適用場景再用幾段 XAML 就能搭出帶選中態(tài)、點擊切換頁面、漣漪反饋的專業(yè)級導(dǎo)航并附上官方推薦的布局最佳實踐。一、先搞懂NavigationBar 和 NavigationDrawer 有什么區(qū)別在動手之前用一張表搞清楚什么時候用哪個對比項NavigationBar 底部導(dǎo)航欄NavigationDrawer 導(dǎo)航抽屜適用設(shè)備手機等小屏幕平板、桌面等大屏幕項目數(shù)量官方建議3~5 個同級入口入口可更多支持分組呈現(xiàn)方式常駐屏幕底部默認收起點擊呼出典型用途首頁 / 分類 / 收藏 / 我的主菜單、設(shè)置等次級入口源碼位置src/Material.Components.Maui/Components/NavigationBar/src/Material.Components.Maui/Components/NavigationDrawer/ 官方文檔原文建議導(dǎo)航目的地不要頻繁變動且應(yīng)保持同級重要性抽屜則應(yīng)把最常用的入口放在頂部、相關(guān)入口放在一起見 docs/navigation-bar.md 與 docs/navigation-drawer.md。二、3 分鐘完成環(huán)境準(zhǔn)備想要使用 Material 導(dǎo)航組件只需三步創(chuàng)建 MAUI 項目在 Visual Studio 中新建一個 .NET MAUI 應(yīng)用安裝 NuGet 包包名為Material.Components.Maui倉庫示例工程sample/中可直接參考注冊組件在 MauiProgram.cs 的構(gòu)建器鏈中調(diào)用builder.UseMaterialComponents()并在 App.xaml 中合并mds:MaterialStyles /資源字典支持Light/Dark雙色種子色。完成后所有頁面只需聲明一個 XML 命名空間前綴md即可直接使用全部 Material 組件。詳細步驟見 docs/getting-started.md。三、NavigationBar 底部導(dǎo)航欄實戰(zhàn)3 行 XAML 搭出選中態(tài)導(dǎo)航底部導(dǎo)航欄的源碼入口是 NavigationBar.cs它提供Items導(dǎo)航項集合、SelectedItem當(dāng)前選中項以及Command命令綁定。每個導(dǎo)航項由 NavigationBarItem.cs 實現(xiàn)內(nèi)置了選中指示器Active Indicator和漣漪反饋。最小可用示例如下md:NavigationBar md:NavigationBarItem IconData{Static icon:Material.Star} Text首頁 / md:NavigationBarItem IconData{Static icon:Material.Star} Text分類 / md:NavigationBarItem IconData{Static icon:Material.Star} Text我的 / /md:NavigationBar要點解析點擊自動切換選中態(tài)用戶點擊某一項時組件自動將SelectedItem指向該項并觸發(fā)SelectedItemChanged事件你只需在事件里切換頁面內(nèi)容命令綁定更簡潔通過CommandCommandParameter屬性可以直接把選中項對象傳給 ViewModel 的命令避免在代碼后硬編碼判斷選中指示器可定制ActiveIndicatorHeight默認 32與ActiveIndicatorColor默認取 SecondaryContainerColor 主題色讓你精確控制 Material 3 標(biāo)志性的膠囊形指示器樣式字體圖標(biāo)全套可調(diào)Text、IconData、IconColor、FontColor、FontSize、FontWeight均可單獨配置支持Clicked、Pressed、LongPressed等觸摸事件。進階用 ContentType 直接綁定頁面類型NavigationBarItem支持ContentType屬性把導(dǎo)航項與一個ContentView類型關(guān)聯(lián)起來選中時自動實例化對應(yīng)內(nèi)容XAML 聲明式即可完成頁面切換——示例工程 01.OverviewPage.xaml 中的md:Tabs就采用了同樣的思路。四、NavigationDrawer 導(dǎo)航抽屜實戰(zhàn)標(biāo)準(zhǔn) 模態(tài)雙風(fēng)格導(dǎo)航抽屜是桌面與平板場景的導(dǎo)航主力源碼見 NavigationDrawer.cs。它比底部導(dǎo)航欄多了兩個殺手锏標(biāo)題欄區(qū)TitleBar和底部固定區(qū)FooterItems并內(nèi)置兩種 Material 3 官方風(fēng)格定義于 NavigationDrawerStyles.xaml.csStandardNavigationDrawerStyle標(biāo)準(zhǔn)風(fēng)格抽屜默認展開占據(jù)左側(cè)空間適合大屏常駐ModalNavigationDrawerStyle模態(tài)風(fēng)格抽屜默認收起點擊圖標(biāo)彈出點擊外部自動關(guān)閉適合空間緊湊的布局。完整結(jié)構(gòu)示例如下展示了標(biāo)題、主導(dǎo)航區(qū)、底部固定區(qū)三大區(qū)域md:NavigationDrawer Style{DynamicResource ModalNavigationDrawerStyle} Label Padding20,0,20,20 FontAttributesBold FontSize18 TextTitle / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 1 / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 2 / md:NavigationBarItem.IconData /md:NavigationBarItem.IconData md:NavigationDrawer.FooterItems md:NavigationDrawerItem IconData{Static icon:Material.Settings} TextSettings / /md:NavigationDrawer.FooterItems /md:NavigationDrawer示例工程 MainPage.xaml 的真實用法更加精煉用ContentType把每個抽屜項直接綁定到具體頁面類型Settings 放在FooterItems中常駐底部——這正是官方次級入口下沉建議的最佳實踐。抽屜項的 Material 細節(jié)NavigationDrawerItem.cs 的每個抽屜項都實現(xiàn)了完整的視覺狀態(tài)機普通、懸停、按下、選中四個狀態(tài)normal / hovered / pressed / actived_*配合StateLayerColor狀態(tài)層與RippleDuration漣漪動畫參數(shù)在不同平臺上都呈現(xiàn)地道的 Material 觸感。五、5 條導(dǎo)航最佳實踐清單結(jié)合官方文檔與示例工程整理成可直接照做的清單控制入口數(shù)量底部導(dǎo)航欄保持 3~5 個再多就改用導(dǎo)航抽屜 分組保持入口恒定導(dǎo)航項不應(yīng)隨頁面動態(tài)增刪保證用戶在任意頁面都有相同的心理地圖常用入口置頂抽屜中把使用頻率最高的項放最上面相關(guān)項歸為一組次級入口下沉設(shè)置、退出、主題切換等低頻入口放進FooterItems與主導(dǎo)航視覺分離選中態(tài)交給組件優(yōu)先使用SelectedItem屬性與Command命令綁定避免手動逐項設(shè)置IsActived代碼更少且不易出錯。六、寫在最后mdc-maui 的 NavigationBar 與 NavigationDrawer 把 Material 3 的導(dǎo)航規(guī)范選中指示器、狀態(tài)層、漣漪、雙風(fēng)格抽屜做成了開箱即用的組件小屏用底部導(dǎo)航欄大屏用導(dǎo)航抽屜Command綁定 ContentType頁面關(guān)聯(lián)幾行 XAML 即可搭建出專業(yè)級導(dǎo)航結(jié)構(gòu)。打開sample/目錄運行示例工程對照本文逐段嘗試你會很快把這兩個組件用熟?！久赓M下載鏈接】mdc-mauiMaterial design components for .NET MAUI項目地址: https://gitcode.com/gh_mirrors/md/mdc-maui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考