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

仅做为个人学习记录，仅供个人参考。