.NET Maui Shell侧栏启动后立即变色问题排查

云上老周

2026-8-8

.NET MAUI固定侧边栏背景色异常问题排查

我刚接触.NET Maui，制作了一个固定侧边导航栏，预期背景为紫色（#8319A8）。在电脑上运行项目时，侧边栏先显示紫色约0.5秒，随后变为黑色。该功能最初正常，我记不清做过相关修改，想确认是自身配置问题还是MAUI的问题？相关XAML代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="JamIT.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:JamIT"
    xmlns:views="clr-namespace:Jam_It_.Views"
    FlyoutBackgroundColor="#8319A8"
    Shell.FlyoutBehavior="Locked"
    FlyoutWidth="300">
<FlyoutItem Title="Home">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>

<FlyoutItem Title="Page2">
    <ShellContent ContentTemplate="{DataTemplate views:View2}" />
</FlyoutItem>

<FlyoutItem Title="Page 3">
    <ShellContent/>
</FlyoutItem>
</Shell>

排查方向及解决办法：

系统主题冲突：Windows深色模式下，MAUI可能自动用系统主题背景色覆盖你设置的值。可以在App.xaml里强制指定应用主题：
```
<Application ... RequestedTheme="Light">
```
或者用静态资源绑定锁定颜色，避免主题干扰：
在App.xaml的Resources里添加：
```
<Color x:Key="CustomFlyoutPurple">#8319A8</Color>
```
然后修改Shell的属性：
```
FlyoutBackgroundColor="{StaticResource CustomFlyoutPurple}"
```
代码后台或全局样式覆盖：检查AppShell.xaml.cs里有没有类似Shell.SetFlyoutBackgroundColor(this, Colors.Black);的代码，或者全局样式文件中是否定义了Flyout背景色，这些都会覆盖XAML里的设置。
MAUI版本bug：部分旧版MAUI在Windows平台存在Flyout渲染异常的问题，建议更新到最新稳定版的.NET MAUI SDK，大概率能解决这类兼容性问题。
页面加载时的样式篡改：检查各个页面的OnAppearing方法或构造函数，有没有修改Shell背景色的逻辑——比如某个页面加载时误改了全局Shell样式，导致侧边栏颜色被重置。