.NET MAUI多页面依赖注入后侧边菜单消失，如何恢复？

此前有相关讨论，但仅涉及单页面场景。我已成功配置所有依赖项，但添加依赖注入后，原本的页面侧边菜单消失了。需明确消失原因，以及如何在保留依赖注入功能的前提下恢复侧边菜单。

原本的侧边菜单：

添加依赖注入后的关键代码如下：

App.xaml.cs #

public partial class App : Application
{
    public App(HomePage homePage)
    {
        InitializeComponent();

        MainPage = homePage;
  }
}

App.xaml #

<Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
        <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
      </ResourceDictionary.MergedDictionaries>

      <Style x:Key="FloutItemStyle" TargetType="Grid">
        <Setter Property="VisualStateManager.VisualStateGroups">
          <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="Selected">
                <VisualState.Setters>
                  <Setter Property="BackgroundColor" Value="Transparent"/>
                  <Setter TargetName="_label" Property="Label.TextColor" Value="Red" />
                  <Setter TargetName="_image" Property="Image.Source" Value="Red" />
                </VisualState.Setters>
              </VisualState>
            </VisualStateGroup>
          </VisualStateGroupList>
        </Setter>
      </Style>
    </ResourceDictionary>
  </Application.Resources>

  <Application.MainPage>
    <Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}" 
           FlyoutBackground="#111111">

      <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
          <BoxView HeightRequest="50" Color="Transparent"/>
        </DataTemplate>
      </Shell.FlyoutHeaderTemplate>

      <!-- Desktop/Tablet-->
      <FlyoutItem Title="Page1" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50, Color=Red}">
        <ShellContent Title="Page1" Route="Page1" ContentTemplate="{DataTemplate page:Page1}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="Red" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
      <FlyoutItem Title="Page2" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50}">
        <ShellContent Title="Page2" Route="Page2" ContentTemplate="{DataTemplate page:Page2}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>

      <Shell.ItemTemplate>
        <DataTemplate>
          <Grid Style="{StaticResource FloutItemStyle}">
            <Grid.RowDefinitions>
              <RowDefinition Height="50" />
              <RowDefinition Height="25" />
            </Grid.RowDefinitions>
            <Image Source="{Binding FlyoutIcon}"
                   Grid.Row="0"
                   HeightRequest="40"
                   Margin="5,0,5,0"
                   HorizontalOptions="CenterAndExpand"
                   x:Name="_image"/>
            <Label Grid.Row="1"
                   Text="{Binding Title}"
                   TextColor="White"
                   FontSize="Body"
                   Padding="7,0,7,0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"
                   x:Name="_label">
            </Label>
          </Grid>
        </DataTemplate>
      </Shell.ItemTemplate>

    </Shell>
  </Application.MainPage>

原因 #

你在App.xaml.cs的构造函数中直接将MainPage设置为HomePage，覆盖了App.xaml里定义的、承载侧边菜单的Shell容器结构。单个页面无法提供侧边菜单的展示环境，因此菜单消失。

解决方法 #

方案1：保留App.xaml的Shell配置，为页面注入ViewModel #

无需修改App的构造函数，让App.xaml中定义的Shell作为默认MainPage，仅为页面注入对应的ViewModel即可：

1. 在MauiProgram.cs中注册ViewModel与页面：

// 注册ViewModel
builder.Services.AddTransient<HomePageViewModel>();
// 注册页面并注入ViewModel
builder.Services.AddTransient<HomePage>(sp => new HomePage(sp.GetRequiredService<HomePageViewModel>()));
// 其他页面同理注册

2. 恢复App.xaml.cs的默认无参构造：

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        // 无需手动设置MainPage，App.xaml中的Application.MainPage已定义Shell
    }
}

方案2：构造函数注入Shell而非单个页面 #

若坚持通过构造函数注入主页面，需注入完整的Shell而非单个页面：

1. 在MauiProgram.cs中注册Shell（假设你的Shell类名为AppShell，需根据实际命名调整）：

builder.Services.AddSingleton<AppShell>();

2. 修改App.xaml.cs的构造函数：

public partial class App : Application
{
    public App(AppShell shell)
    {
        InitializeComponent();
        MainPage = shell;
    }
}

两种方案均可在保留依赖注入功能的同时，恢复侧边菜单的正常显示。

内容的提问来源于stack exchange，提问作者10101