c# - mvvmcross 从选项卡式导航到 View 模型

Question

我有一个使用 mvvmcross 的 Xamarin Forms 应用程序。我通过 TabbedPages 进行导航。每个页面背后都有一个 xaml + 代码和 View 模型。

第一页的相关代码:

<?xml version="1.0" encoding="utf-8" ?>
<pages:BaseTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:pages="clr-namespace:ABBI_XPlat_3.Pages;assembly=ABBI_XPlat_3"
         x:Class="ABBI_XPlat_3.Pages.DeviceListPage"
         Title="Discover devices"
         x:Name="DevicePage">
<pages:BaseTabbedPage.Resources>
  <ResourceDictionary>
     <DataTemplate x:Key="DeviceItemTemplate"> ... </DataTemplate>
  </ResourceDictionary>
</pages:BaseTabbedPage.Resources>
<pages:BaseTabbedPage.Children>
  <pages:BasePage Title="Scan for devices">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
      </Grid.RowDefinitions>
      <StackLayout BackgroundColor="#FF6969" Padding="10" IsVisible="{Binding IsStateOn, Converter={StaticResource InverseBoolean}}">
        <Label Text="{Binding StateText}" FontSize="18" HorizontalTextAlignment="Center"></Label>
        </StackLayout>

      <ListView Grid.Row="1" ItemsSource="{Binding Devices}" SelectedItem="{Binding SelectedDevice, Mode=TwoWay}"
             IsPullToRefreshEnabled="True"
             RefreshCommand="{Binding RefreshCommand}"
             IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
             RowHeight="80"
             ItemTemplate="{StaticResource DeviceItemTemplate}">
      </ListView>

      <StackLayout Grid.Row="2" Orientation="Horizontal">
        <Button Text="Connect" Command="{Binding ConnectToSelectedCommand}" HorizontalOptions="FillAndExpand"/>
        <Button Text="Stop Scan" Command="{Binding StopScanCommand}" HorizontalOptions="End"/>
        <ActivityIndicator IsRunning="{Binding IsRefreshing}"
                         HeightRequest="24"
                         WidthRequest="24"
                         VerticalOptions="Center"
                         HorizontalOptions="End"/>
      </StackLayout>

    </Grid>
  </pages:BasePage>
  <pages:ServiceListPage Title="Services"/>
  <pages:OtherTabbedPage Title="Services"/>
</pages:BaseTabbedPage.Children>
</pages:BaseTabbedPage>

我可以使用以下方法从主视图模型中的按钮调用不同的 View 模型:

public MvxCommand ConnectToSelectedCommand => new MvxCommand(ConnectToSelectedDeviceAsync, CanDisplayServices);

    private async void ConnectToSelectedDeviceAsync()
    {
        ShowViewModel<ServiceListViewModel>(new MvxBundle(new Dictionary<string, string> { { DeviceIdKey, SystemDevices.FirstOrDefault().Id.ToString() } }));
    }

在我的主视图模型中。但我希望能够使用选项卡在 ViewModel 之间导航。目前，如果我单击一个选项卡，它会打开页面，但没有关联的 ViewModel。

请帮忙!

Answer 1

因此，要让 MvvmCross 将页面绑定(bind)到虚拟机，您需要做的就是将 MvxTabbedPage 作为 Root TabbedPosition，并将进入选项卡的页面作为 Detail TabbedPosition。然后在 MvxTabbedPage 的 ViewModel 中，您必须导航到所有 Detail Tab 的 ViewModel。这是一个例子。

namespace NameSpace
{
    // Tabbed Detail Page
    [MvxTabbedPagePresentation(Title = "Home", Icon = "ic_home_black.png")]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : MvxContentPage<HomeViewModel>
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
    // Tabbed Root Page
    [MvxTabbedPagePresentation(TabbedPosition.Root, WrapInNavigationPage = true)]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TabbedPage : MvxTabbedPage<TabbedViewModel>
    {
        public TabbedProjectDetailsPage()
        {
            InitializeComponent();
        }
    }
    // Tabbed Detail ViewModel
    public class HomeViewModel : MvxViewModel
    {
        IMvxNavigationService _navigation;
        public HomeViewModel(IMvxNavigationService navigation)
        {
            _navigation = navigation;
        }
    }
    // Tabbed Root ViewModel
    public class TabbedViewModel : MvxNavigationViewModel
    {
        public TabbedProjectDetailsViewModel(IMvxLogProvider log, IMvxNavigationService navigation) : base(log, navigation)
        {
        }
        MvxCommand _navHome;
        public ICommand NavigateHome
        {
            get
            {
                _navHome = _navHome ?? new MvxCommand(async () =>
                {
                    await NavigationService.Navigate<HomeViewModel>();
                });
                return _navHome;
            }
        }

        public void ShowViewModels()
        {
            this.NavigateHome.Execute(null);
        }
        bool appeared = false;
        public override void ViewAppearing()
        {
            base.ViewAppearing();
            if (!appeared)
            {
                ShowViewModels();
            }
            appeared = true;
        }
    }
}