如何为具有棱镜的Xamarin形式的内容视图创建单独的视图模型

Question

问题陈述我想创建一个contentview用户控件，它有自己的视图模型，可以在多个内容页面中使用。

以下实施中的问题我已经扩展了我的App.xaml.cs，如下所述。但是，一旦导航从具有contentview用户控件的contentpage开始工作，但如果我再次导航到该页面，导航就不起作用。只是添加到其中，查看。在下面的代码中，Parent也为null。

请帮忙。

using OEP.Views;
using Prism;
using Prism.Common;
using Prism.Ioc;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Unity;
using Unity.Resolution;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace OEP
{
public partial class App : PrismApplication
{
public App() : this(null) { }
public App(IPlatformInitializer initializer) : base(initializer) { }
protected override async void OnInitialized()
{
InitializeComponent();
//await NavigationService.NavigateAsync("NewOrderPage");
await NavigationService.NavigateAsync("LoginPage");
//await NavigationService.NavigateAsync("HomePage");
}
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterForNavigation<LoginPage>();
containerRegistry.RegisterForNavigation<ForgotPasswordPage>();
containerRegistry.RegisterForNavigation<HomePage>();
containerRegistry.RegisterForNavigation<CustomerDetailsPage>();
containerRegistry.RegisterForNavigation<NewOrderPage>();
//Container.Resolve<HomePageCustomersUserControl>("Customers");
//containerRegistry.Register<HomePageCustomersUserControl, HomePageCustomersUserControlViewModel>();
//ViewModelLocationProvider.Register<HomePageCustomersUserControl>(() => Container.Resolve<HomePageCustomersUserControlViewModel>());
}
protected override void ConfigureViewModelLocator()
{
ViewModelLocationProvider.SetDefaultViewModelFactory((view, type) =>
{
Page page = null;
switch (view)
{
case Page page1:
page = page1;
break;
case Element customView:
page = GetPageFromElement(customView);
// Existing parameter with the Page
break;
}
var navService = CreateNavigationService(page);
ParameterOverrides overrides = new ParameterOverrides
{
{ "navigationService", navService }
};
return Container.GetContainer().Resolve(type, type.GetType().Name, overrides);
});
}
// Currently exists
protected INavigationService CreateNavigationService(Page page)
{
var navigationService = NavigationService;
((IPageAware)navigationService).Page = page;
return navigationService;
}
protected INavigationService CreateNavigationService(object view)
{
switch (view)
{
case Page page:
return CreateNavigationService(page);
case Element element:
var parentPage = GetPageFromElement(element);
if (parentPage == null)
{
return null;
}
return CreateNavigationService(parentPage);
default:
return null;
}
}
private Page GetPageFromElement(Element view)
{
switch (view.Parent)
{
case Page page:
return page;
case null:
return null;
default:
return GetPageFromElement(view.Parent);
}
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Answer 1

Prism 7.1支持此功能。以下内容直接取自棱镜单元测试。如果您遵循命名约定，实际上不需要注册任何内容，只需设置ViewModelLocator即可。引用父页的AutowirePartialView。

<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Prism.DI.Forms.Tests.Mocks.Views.PartialView">
<StackLayout>
<Label Text="{Binding SomeText}" />
<Button Command="{Binding NavigateCommand}"
x:Name="navigateButton" />
</StackLayout>
</ContentView>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Prism.DI.Forms.Tests.Mocks.Views"
xmlns:prism="clr-namespace:Prism.Ioc;assembly=Prism.Forms"
xmlns:mvvm="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:converters="using:Prism.Forms.Tests.Mocks.Converters"
Title="{Binding Title}"
x:Name="xamlViewMock"
x:Class="Prism.DI.Forms.Tests.Mocks.Views.XamlViewMock">
<ContentPage.Resources>
<ResourceDictionary>
<prism:ContainerProvider x:TypeArguments="converters:MockValueConverter" x:Key="mockValueConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<local:PartialView mvvm:ViewModelLocator.AutowirePartialView="{x:Reference xamlViewMock}" />
<Entry x:Name="testEntry"
Text="{Binding Test,Converter={StaticResource mockValueConverter}}" />
</StackLayout>
</ContentPage>

• 局部视图
• 消耗页面

如果您需要遵循一些自定义命名方案，只需调用：

ViewModelLocationProvider.Register<MyView, SomeViewModel>();

更新

Prism 8将引入对区域导航的支持。因此，棱镜7.1中引入的"局部视图"将被删除。您需要迁移才能使用Regions。这很容易做到，尽管在如何将参数传递到区域中会有一些根本性的差异。

Answer 2

我认为没有必要为ContentView定义新的ViewModel。您只需要在使用ContentView的Page中使用AutowirePartialView属性。像这个

<DataTemplate>
<ViewCell>
<local:CardViewTemplatePage prism:ViewModelLocator.AutowirePartialView="true"/>
</ViewCell>
</DataTemplate>

您的ContentView应该绑定像这样的字段

<StackLayout HorizontalOptions="Fill" VerticalOptions="Start">
<Label TextColor="Denim" Text="{Binding Title}" />
<Label TextColor="DimGray" Text="{Binding Description}" />
</StackLayout>