[英]Changing View Wpf MVVM
I'm beginner in WPF and MVVM, but want to learn it by building some small project. 我是WPF和MVVM的初学者,但想通过构建一些小项目来学习它。
I've got a WPF app using the Model-View-ViewModel pattern, based on Rachel Lim example. 我有一个基于Rachel Lim示例的使用Model-View-ViewModel模式的WPF应用程序。 In my app I have 2 views - EmployeesList and EmployeeDetails.
在我的应用程序中,我有2个视图-EmployeesList和EmployeeDetails。 List of employees is storage in GidView.
员工列表存储在GidView中。
The main problem I have is 我的主要问题是
Base navigation is in xaml with DataTmplate and ItmCntrol: 基本导航在带有DataTmplate和ItmCntrol的xaml中:
<Window.Resources>
<DataTemplate DataType="{x:Type local:HomeViewModel}">
<local:HomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:EmployeesListViewModel}">
<local:EmployeesListView />
</DataTemplate>
</Window.Resources>
<ItemsControl ItemsSource="{Binding PageViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
also I've got ApplicationViewModel where is list of views 我也有ApplicationViewModel在哪里视图列表
public class ApplicationViewModel : ObservableObject
{
#region Fields
private ICommand _changePageCommand;
private IPageViewModel _currentPageViewModel;
private List<IPageViewModel> _pageViewModels;
#endregion
public ApplicationViewModel()
{
// Add available pages
PageViewModels.Add(new HomeViewModel());
PageViewModels.Add(new EmployeesListViewModel());
PageViewModels.Add(new EmployeeDetailsViewModel());
// Set starting page
CurrentPageViewModel = PageViewModels[0];
}
#region Properties / Commands
public ICommand ChangePageCommand
{
get
{
if (_changePageCommand == null)
{
_changePageCommand = new RelayCommand(
p => ChangeViewModel((IPageViewModel)p),
p => p is IPageViewModel);
}
return _changePageCommand;
}
}
public List<IPageViewModel> PageViewModels
{
get
{
if (_pageViewModels == null)
_pageViewModels = new List<IPageViewModel>();
return _pageViewModels;
}
}
public IPageViewModel CurrentPageViewModel
{
get
{
return _currentPageViewModel;
}
set
{
if (_currentPageViewModel != value)
{
_currentPageViewModel = value;
OnPropertyChanged("CurrentPageViewModel");
}
}
}
#endregion
#region Methods
private void ChangeViewModel(IPageViewModel viewModel)
{
if (!PageViewModels.Contains(viewModel))
PageViewModels.Add(viewModel);
CurrentPageViewModel = PageViewModels
.FirstOrDefault(vm => vm == viewModel);
}
#endregion
}
How to change view when I double-click on a row 双击行时如何更改视图
First, you need to add EventTrigger for MouseDoubleClick event: 首先,您需要为MouseDoubleClick事件添加EventTrigger:
<DataGrid Name="gridEmployees" ItemsSource="{Binding Employees}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<local:CustomCommandAction Command="{Binding DoubleClickCommand}" CommandParameter="{Binding ElementName=gridEmployees, Path=SelectedItems[0]}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</DataGrid>
CustomCommandAction is a class, that inherits from TriggerAction and is used as a link between event and command in your View Model. CustomCommandAction是一个类,它继承自TriggerAction,并用作视图模型中事件和命令之间的链接。 Here is the code:
这是代码:
public sealed class CustomCommandAction : TriggerAction<DependencyObject>
{
public static readonly DependencyProperty CommandParameterProperty =
DependencyProperty.Register("CommandParameter", typeof(object), typeof(CustomCommandAction), null);
public static readonly DependencyProperty CommandProperty = DependencyProperty.Register(
"Command", typeof(ICommand), typeof(CustomCommandAction), null);
public ICommand Command
{
get
{
return (ICommand)this.GetValue(CommandProperty);
}
set
{
this.SetValue(CommandProperty, value);
}
}
public object CommandParameter
{
get
{
return this.GetValue(CommandParameterProperty);
}
set
{
this.SetValue(CommandParameterProperty, value);
}
}
protected override void Invoke(object parameter)
{
if (this.AssociatedObject != null)
{
ICommand command = this.Command;
if (command != null)
{
if (this.CommandParameter != null)
{
if (command.CanExecute(this.CommandParameter))
{
command.Execute(this.CommandParameter);
}
}
else
{
if (command.CanExecute(parameter))
{
command.Execute(parameter);
}
}
}
}
}
}
After that the easiest solution is to use ChangeViewModel method in yours command Execute method, eg: 之后,最简单的解决方案是在您的命令Execute方法中使用ChangeViewModel方法,例如:
...
_doubleClickCommand = new RelayCommand(OnDoubleClick);
...
private RelayCommand _doubleClickCommand = null;
private ApplicationViewModel _applicationViewModel;
private void OnDoubleClick(object obj)
{
EmployeeDetailsViewModel selectedModel = obj as EmployeeDetailsViewModel;
_applicationViewModel.ChangeViewModel(selectedModel);
}
public ICommand DoubleClickCommand
{
get
{
return _doubleClickCommand;
}
}
How to get the value from the first column (employee_id) and pass it into EmployeeDetails view 如何从第一列(employee_id)获取值并将其传递到EmployeeDetails视图
For your DataGrid you may use collection of EmployeeDetailsViewModel as ItemsSource. 对于您的DataGrid,您可以使用EmployeeDetailsViewModel的集合作为ItemsSource。 If you do so, selected item will be passed to your command Execute method as an instance of EmployeeDetailsViewModel, and you'll be able to get Id from there.
如果这样做,所选项目将作为EmployeeDetailsViewModel的实例传递到命令Execute方法,您将能够从那里获取ID。
It looks like you're missing a needed element to show the selected view. 您似乎缺少显示所选视图所需的元素。 If you look at the linked sample note the ItemsControl is contained within a Border which is in turn inside a DockPanel .
如果查看链接的示例,请注意ItemsControl包含在Border中 ,而Border又在DockPanel内部。
Below the DockPanel there is a ContentControl which is a key element needed to show the selected view. 在DockPanel下方有一个ContentControl ,它是显示所选视图所需的关键元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.