1.導航欄設計

1.1 由于需要水平布局的設計方式，所以外圍需要使用一個HorizontalStackLayout 進行包裹著所有的子控件，來達到水平布局的效果。頁面大概是這樣子，按鈕全部由RadioButton 進行重繪

?最終要做的效果：

?

?1.2 代碼頁面設計

1.3 運行效果發現，整個頁面不怎么理想。所有的控件都是垂直居中。

1.4 那么可以通過設置布局控件?HorizontalStackLayout的VerticalOptions屬性,值設為Start ，把這個RadioButton 顯示在開頭

• Start?該位置位于?RadioButton?開頭HorizontalStackLayout
• Center?垂直居中 RadioButton?HorizontalStackLayout
• End?該位置位于?RadioButton?末尾?HorizontalStackLayout
• Fill?這可確保?RadioButton?填充的高度?HorizontalStackLayout

以上出自官網的文檔：.NET MAUI HorizontalStackLayout - .NET MAUI | Microsoft Docs

?這張圖片出自官方文檔

?1.5?設置后的效果

?2. 隱藏安卓顯示的狀態欄，以及標題欄。

2.1 由于項目初始加載是AppShell.xaml，這個AppShell.xaml引用了MainPage.xaml頁面模板。把Home標題去掉，只需要在頁面調用的時候直接指向MainPage.xaml 頁面即可

?2.2 要在應用中不顯示手機狀態欄，需要進入安卓設備進行修改?

2.3 打開安卓文件夾，在MainActivity 類中調整安卓渲染的相關配置信息(外層窗口的配置信息)

• ?重寫OnCreate 方法

protected override void OnCreate(Bundle savedInstanceState){//全透明任務欄Window.SetFlags(Android.Views.WindowManagerFlags.TranslucentNavigation,Android.Views.WindowManagerFlags.TranslucentNavigation);//設置狀態欄，導航樣顏色為透明Window.SetStatusBarColor(Android.Graphics.Color.Transparent);Window.SetNavigationBarColor(Android.Graphics.Color.Transparent);base.OnCreate(savedInstanceState);}

?2.4 修改后的效果

3. 進行頁面樣式調整

• 調整邊距使用Margin屬性
• 把整個頁面改顏色，用Background 屬性，需要在ContentPage 里面修改?

3.1 修改RadioButton 樣式模板，這章節有介紹?

• ?首先統一設置樣式，并且設置Key
• 在RadioButton 中，通過StaticResource 去關聯到設置的統一樣式

?

3.2 統一修改控件模板

?上面的意思就是通過綁定的關系，實現模板中的Text 文字關聯到實際控件的值

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="MauiApp1.MainPage" Background="LightGray"><ContentPage.Resources><Style TargetType="RadioButton" x:Key="NavButtonStyle"><Setter Property="ControlTemplate"><ControlTemplate><Grid><Grid.RowDefinitions><RowDefinition /><RowDefinition Height="30" /></Grid.RowDefinitions><Label Text="{TemplateBinding Content}"></Label></Grid></ControlTemplate></Setter></Style></ContentPage.Resources><HorizontalStackLayout VerticalOptions="Start" Margin="0,30,0,0"><RadioButton Content="燈光" Style="{StaticResource NavButtonStyle}"></RadioButton><RadioButton Content="燈光" Style="{StaticResource NavButtonStyle}"></RadioButton><RadioButton Content="燈光" Style="{StaticResource NavButtonStyle}"></RadioButton><RadioButton Content="燈光" Style="{StaticResource NavButtonStyle}"></RadioButton><RadioButton Content="燈光" Style="{StaticResource NavButtonStyle}"></RadioButton></HorizontalStackLayout></ContentPage>

?下一章接著處理布局

?出自：全網首發.NET MAUI框架入門 已完結 附企業級WPF實戰（C#/blazor/xamarin/停車場項目+通用框架+數據采集與監控/數據庫）B0858_嗶哩嗶哩_bilibili

僅做為個人學習記錄，僅供個人參考。?

總結

以上是生活随笔為你收集整理的MAUI 框架安卓入门开发01 界面设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。