[英]Wpf Multiple nested Usercontrols with MvvmCross
I'm pretty new in MvvmCross
but I'm working with mvvm
for awhile.我是
MvvmCross
的新手,但我正在使用mvvm
一段时间。 I know how to compose usercontrols with nested usercontrols.我知道如何用嵌套的用户控件组合用户控件。 Now with
mvvmcross
I got stucked to show two or more usercontrols in another usercontrol.现在使用
mvvmcross
我被困在另一个用户控件中显示两个或多个用户控件。 I don't use any other framework than MvvmCross
.除了
MvvmCross
之外,我不使用任何其他框架。 My Rootview looks like this:我的 Rootview 看起来像这样:
`<views:MvxWpfView
x:Class="MvvmCrossTest.Wpf.Views.RootView"
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<DockPanel>
<TextBlock Text="Root" DockPanel.Dock="Top"/>
<ContentControl x:Name="MainMenuVM" Content="{Binding MainMenuVM}" DockPanel.Dock="Top" />
</DockPanel>
</views:MvxWpfView>`
The corresponding ViewModel looks like this:对应的 ViewModel 如下所示:
using MvvmCross.Commands;
using MvvmCross.Logging;
using MvvmCross.Navigation;
using MvvmCross.ViewModels;
namespace MvvmCrossTest.Core.ViewModels
{
public class RootViewModel: MvxNavigationViewModel
{
private readonly IMvxViewModelLoader _mvxViewModelLoader;
public RootViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService, IMvxViewModelLoader mvxViewModelLoader) : base(logProvider, navigationService)
{
_mvxViewModelLoader = mvxViewModelLoader;
ShowMainMenu();
}
private MainMenuViewModel _mainMenuVM;
public MainMenuViewModel MainMenuVM
{
get { return _mainMenuVM; }
set
{
SetProperty(ref _mainMenuVM, value);
RaisePropertyChanged(() => MainMenuVM);
}
}
public MvxCommand ShowMainMenuCommand { get; set; }
public void ShowMainMenu()
{
MainMenuVM = (MainMenuViewModel)_mvxViewModelLoader.LoadViewModel(MvxViewModelRequest.GetDefaultRequest(typeof(MainMenuViewModel)), null, null);
}
}
}
The simplified View I want to show in the contentcontrol looks like this:我想在 contentcontrol 中显示的简化视图如下所示:
<views:MvxWpfView
x:Class="MvvmCrossTest.Wpf.Views.MainMenuView"
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Background="Aqua"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
</Grid>
</views:MvxWpfView>
And also the corresponding ViewModel.还有对应的ViewModel。
using MvvmCross.Logging;
using MvvmCross.Navigation;
using MvvmCross.ViewModels;
namespace MvvmCrossTest.Core.ViewModels
{
public class MainMenuViewModel : MvxNavigationViewModel
{
public MainMenuViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
}
}
}
Instead of the View/ViewModel I see a text that says "MvvmCrossTest.Core.ViewModels.MainMenuViewModel".我看到的不是 View/ViewModel,而是一条显示“MvvmCrossTest.Core.ViewModels.MainMenuViewModel”的文本。
I don't want to use Xamarin!我不想使用 Xamarin!
it seems that MvvmCross is wiring up Views and ViewModels automatically
似乎 MvvmCross 正在自动连接 Views 和 ViewModels
I know nothing about MvvmCross, but for "automatically" to work there should be an agreement and rules, eg attributes or matching names (xViewModel <-> xView).我对 MvvmCross 一无所知,但为了“自动”工作,应该有一个协议和规则,例如属性或匹配名称(xViewModel <-> xView)。 Currently there is nothing I can see what connects
MainMenuViewModel
with views:MvxWpfView
.目前,我看不到什么将
MainMenuViewModel
与views:MvxWpfView
连接起来。
Anyway what you see无论如何你所看到的
I see a text that says "MvvmCrossTest.Core.ViewModels.MainMenuViewModel"
我看到一条显示“MvvmCrossTest.Core.ViewModels.MainMenuViewModel”的文字
is the view trying to visualize non-control as text due to missing data template.是由于缺少数据模板而试图将非控制可视化为文本的视图。
It's easy to fix by just adding data template只需添加数据模板即可轻松修复
<DataTemplate DataType="{x:Type local:MainMenuViewModel}">
<views:MvxWpfView />
</DataTemplate>
somewhere (eg into views:MvxWpfView.Resources
) and the view will be displayed.某处(例如进入
views:MvxWpfView.Resources
)并且将显示视图。
I created a project where I show you some basics.我创建了一个项目,向您展示了一些基础知识。
You can find the samples here .您可以在此处找到示例。
the RootView
; RootView
;
<views:MvxWpfView xmlns:local="clr-namespace:SomeProject.Views" ...>
<Grid>
<Label Content="Hello from RootView" />
<local:NestedView />
</Grid>
</views:MvxWpfView>
the NestedView
; NestedView
;
<views:MvxWpfView ...>
<Grid>
<Label Content="Hello from NestedView" />
</Grid>
</views:MvxWpfView>
With this custom wpf presenter you can easily navigate to views while specified themn in a container.使用此自定义 wpf 演示器,您可以在容器中指定视图时轻松导航到视图。 With that, you can close and open views from the view model while using the mvvmcross navigation service.
这样,您可以在使用 mvvmcross 导航服务时从视图 model 关闭和打开视图。
I copied this from another project .我从另一个项目中复制了这个。 You can find the whole implementation in my sample project here .
您可以在我的示例项目中找到整个实现。
the RootView
; RootView
;
<views:MvxWpfView ...>
<Grid>
<Label Content="Hello" />
<ItemsControl region:MvxContainer.Id="RootViewRegion"/>
</Grid>
</views:MvxWpfView>
the RootView
code behind;背后的
RootView
代码;
[MvxContentPagePresentation(WrapInNavigationPage = true, NoHistory = false)]
public partial class RootView: MvxWpfView<RootViewModel>
{
public RootView()
{
InitializeComponent();
}
}
the RootViewModel
; RootViewModel
;
public class RootViewModel: MvxNavigationViewModel
{
private readonly IMvxNavigationService _navigationService;
public IMvxAsyncCommand ShowNestedViewModelCommand { get; protected set; }
public RootViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService) : base(logProvider, navigationService)
{
this._navigationService = navigationService;
// navigate to nested view
this.ShowNestedViewModelCommand = new MvxAsyncCommand(() => this._navigationService.Navigate<NestedViewModel>());
ShowNestedViewModelCommand.Execute();
}
}
the NestedView
code behind;后面的
NestedView
代码;
[MvxWpfPresenter("RootViewRegion", mvxViewPosition.NewOrExsist)]
public partial class NestedView : MvxWpfView<NestedViewModel>
{
public NestedView()
{
InitializeComponent();
}
}
when you have problems with navigation and view model connection use this code behind.当您在导航和查看 model 连接时遇到问题时,请使用此代码。 It loads the viewmodel for the specific view;
它加载特定视图的视图模型;
[MvxContentPagePresentation(WrapInNavigationPage = true, NoHistory = false)]
public partial class SomeView : MvxWpfView<ViewModels.SomeViewModel>
{
public SomeView()
{
InitializeComponent();
if (!(ViewModel is ViewModels.SomeViewModel))
{
if (Mvx.IoCProvider.TryResolve<ViewModels.SomeViewModel>(out var someViewModel))
{
ViewModel = someViewModel;
return;
}
var _viewModelLoader = Mvx.IoCProvider.Resolve<IMvxViewModelLoader>();
var request = new MvxViewModelInstanceRequest(typeof(ViewModels.SomeViewModel));
request.ViewModelInstance = _viewModelLoader.LoadViewModel(request, null);
ViewModel = request.ViewModelInstance as ViewModels.SomeViewModel;
Mvx.IoCProvider.RegisterSingleton<ViewModels.SomeViewModel>(ViewModel);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.