FlyoutFooter ContentView在.NET MAUI应用中注入依赖项

Question

我在.NET MAUI应用程序中为FlyoutFooter创建了一个contentView。在页脚中，我将imageButton放置在用户可以使用的图标上。

我还在整个应用程序中都使用依赖项注入，因此我在DI容器中同时注册了flyoutfooter视图及其相应的flyoutfooterviewModel。

问题是当我尝试告诉shell使用flyoutfooter内容视图时，它不喜欢它，因为它的构造函数会收到一个参数 - 请参见下面的屏幕截图。

flyoutfooter的代码看起来像：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:MyApp.ViewModels.Flyout"
             x:Class="MyApp.Views.Flyout.FlyoutFooter"
             x:DataType="vm:FlyoutFooterViewModel">
    <Grid
      RowDefinitions="120"
      ColumnDefinitions="150, 150">
        <Image
            Grid.Row="0"
            Grid.Column="0"
            HorizontalOptions="StartAndExpand"
            Margin="50,0,0,0">
            <Image.Source>
                <FontImageSource
                    FontFamily="MISHRP"
                    Glyph="{StaticResource SettingsIcon}"
                    Color="White"/>
            </Image.Source>
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding GotoSettingsCommand}" />
            </Image.GestureRecognizers>
        </Image>
        <Image
            Grid.Row="0"
            Grid.Column="1"
            HorizontalOptions="EndAndExpand"
            Margin="0,0,30,0">
            <Image.Source>
                <FontImageSource
                    FontFamily="MISHRP"
                    Glyph="{StaticResource PowerIcon}"
                    Color="White"/>
            </Image.Source>
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding SignOffCommand}"/>
            </Image.GestureRecognizers>
        </Image>
    </Grid>
</ContentView>

在fly> flyoutfooter.xaml背后的代码中，我注入视图模型 - ：

public partial class FlyoutFooter : ContentView
{

    FlyoutFooterViewModel _vm;
    public FlyoutFooter(FlyoutFooterViewModel vm)
    {
        InitializeComponent();
        _vm = vm;
        BindingContext = _vm;
    }
}

视图模型看起来像这样：

public class FlyoutFooterViewModel : BaseViewModel
{
   IDatabaseService _dbService;

   public ICommand GotoSettingsCommand { get; }
   public ICommand SignOffCommand { get; }

   public FlyoutFooterViewModel(IDatabaseService dbService)
   {
      _dbService = dbService;

      GotoSettingsCommand = new AsyncRelayCommand(GotoSettings);
      SignOffCommand = new AsyncRelayCommand(SignOff);
   }

   async Task GotoSettings()
   {
      // Send user to Settings page
   }

   async Task SignOff()
   {
      SecureStorage.Remove("access_token");

      await _dbService.ClearAll();

      await Shell.Current.GoToAsync($"///{nameof(Login)}");
   }
}

处理这种情况的任何建议？

Answer 1

我只是想出了一种做到这一点的方法。我给AppShell一个视图模型而不是使用视图模型的控件，因此我可以使用FlyoutFooterTemplate。

<Shell.FlyoutFooterTemplate>
    <DataTemplate>
        <Label Text="{Binding DABUser.Name}" BackgroundColor="Red"/>
    </DataTemplate>
</Shell.FlyoutFooterTemplate>

我将IserviceProvider注入AppShell

public AppShell(IServiceProvider serviceProvider)

，然后将bindingContext设置为我想要的视图模型

BindingContext = serviceProvider.GetService<FlyoutFtViewModel>()

，然后将ViewModel注入构造函数。