WPF MVVM导航视图
我有一个多视图的WPF应用程序。 我想从视图1切换到视图2,从那里我可以切换到多个视图。 所以我想在视图1上的一个button加载view2在同一个窗口。
我尝试了这些东西,但无法实现它的工作。
- 如何使用MVVM Light为WPF导航窗口?
- http://blog.galasoft.ch/archive/2011/01/06/navigation-in-a-wp7-application-with-mvvm-light.aspx
从第一个链接的问题是,我不明白viewmodellocator代码。 他们调用CreateMain(); 函数,但是这个定义在哪里,我如何切换到视图内的其他视图。
首先,您不需要任何这些工具包/框架来实现MVVM。 它可以像这样简单…让我们假设我们有一个MainViewModel
, PersonViewModel
和一个CompanyViewModel
,每个都有自己的相关视图,每个扩展abstract
基类BaseViewModel
。
在BaseViewModel
,我们可以添加公共属性和/或ICommand
实例,并实现INotifyPropertyChanged
接口。 因为它们都扩展了BaseViewModel
类,所以我们可以在MainViewModel
类中拥有这个属性,该属性可以设置为我们的任何视图模型:
public BaseViewModel ViewModel { get; set; }
当然,你会在你的属性上正确地实现INotifyPropertyChanged
接口,不像这个简单的例子。 现在在App.xaml
,我们声明一些简单的DataTemplate
来连接视图和视图模型:
<DataTemplate DataType="{x:Type ViewModels:MainViewModel}"> <Views:MainView /> </DataTemplate> <DataTemplate DataType="{x:Type ViewModels:PersonViewModel}"> <Views:PersonView /> </DataTemplate> <DataTemplate DataType="{x:Type ViewModels:CompanyViewModel}"> <Views:CompanyView /> </DataTemplate>
现在,无论我们在应用程序中使用我们的一个BaseViewModel
实例,这些DataTemplate
都会告诉框架显示相关的视图。 我们可以像这样显示它们:
<ContentControl Content="{Binding ViewModel}" />
所以我们现在需要做的是切换到一个新的视图是从MainViewModel
类设置ViewModel
属性:
ViewModel = new PersonViewModel();
最后,我们如何改变其他观点的观点? 那么有几种可能的方法来做到这一点,但最简单的方法是从子视图直接添加一个Binding
到MainViewModel
的ICommand
。 我使用了RelayComand
一个自定义版本,但是你可以使用任何你喜欢的types,我猜你会得到这个图片:
public ICommand DisplayPersonView { get { return new ActionCommand(action => ViewModel = new PersonViewModel(), canExecute => !IsViewModelOfType<Person>()); } }
在子视图XAML中:
<Button Command="{Binding DataContext.DisplayPersonView, RelativeSource= {RelativeSource AncestorType={x:Type MainView}}, Mode=OneWay}" />
而已! 请享用。
当我第一次开始使用MVVM时,我也为不同的MVVM框架,尤其是导航部分而苦苦挣扎。 因此,我使用Rachel Lim创build的这个小教程。 这很好,很好的解释。
看看下面的链接:
希望它帮助你:)
也许这个链接将帮助你。 只需将NavigateTo
属性设置为您需要在窗口上显示的视图即可。
作为一个例子,你可以做类似的事情
<Window x:Class="MainWindowView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:meffed="http:\\www.codeplex.com\MEFedMVVM" meffed:ViewModelLocator.NonSharedViewModel="YourViewModel" WindowStartupLocation="CenterScreen"> <Button meffed:NavigationExtensions.NavigateTo="firstview" meffed:NavigationExtensions.NavigationHost="{Binding ElementName=_viewContainer}" meffed:NavigationExtensions.NavigateOnceLoaded="False" Visibility="Visible" /> <ContentControl x:Name="_viewContainer" Margin="0,0,0,10" /> <Window>
然后这个类文件将会是
public partial class MainWindowView : Window { public MainWindowView() { InitializeComponent(); } public ContentControl ViewContainer { get { return _viewContainer; } } }
然后你可以定义每个视图为UserControl
,然后使用上面给出的链接绑定button的meffed:NavigationExtensions.NavigateTo="secondView"
。 要使用RelativeSource
绑定来定位Window
的ContentControl
。 例如
meffed:NavigationExtensions.NavigationHost="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}},Path=ViewContainer}"
在每个视图中,只要看到你使用[NavigationView("firstview")]
对类定义背后的代码进行注释,依此类推。
这是第一次复杂,但一旦你理解这个想法,这将是非常容易的。
<ContentControl x:Name="KISS" Content="{Binding ViewModel, Converter={StaticResource ViewLocator}}"/>