2017-07-22 34 views
0

请 - 我不想在此时使用/ MVVMlite(etc)之类的外部框架。我需要手动执行此操作,以便我可以看到完整的过程。如何使用ICommand Mvvm模式在MainWindow.xaml中切换Usercontrol(s)?

我已经看到了我所问的问题的各种表达,但我没有看到任何版本的问题,它将一个命令绑定到一个用户控件以更改MainWindow.xaml中的一个用户控件。在下面的代码中,我演示了我试图制作一个Wpf/Mvvm应用程序来切换MainWindow.xaml中的用户控件的努力/尝试。问题/要求是我需要采取哪些步骤来跟进此项目?在我的项目中,我有标准Models/ViewModels/Views文件夹,我想在MainWindow.xaml中切换的3个用户控件视图(MainWindow.xaml驻留在项目的根文件夹中) - BlueView,OrangeView, RedView。这些views/usercontrols的唯一内容是Blueview有一个蓝色背景网格,OrangeView有一个橙色背景网格,RedView有一个红色背景网格。我在MainWindow.xaml左边的一个堆栈面板中有3个按钮,还有一个内容控件,我想在MainWindow.xaml右边加载/切换usercontrols。我有3个相应的ViewModel,BlueViewModel,OrangeViewModel,RedViewModel。我还有一个MainViewModel用于在Models文件夹中绑定这3个viewModels和RelayCommand.cs。但我不知道该从哪里出发。

这是我的代码 - 注意:我只打算添加MainWindow.xaml,RelayCommand.cs,MainViewModel和BlueViewModle/BlueView,因为除了背景网格颜色外其他视图/ ViewModel是相同的。我需要做些什么/添加,以便我可以在MainWindow.xaml的内容控件中加载/切换usercontrols?我无法显示一个usercontrol - 所以我没有在MainViewModel.cs中显示/显示方法如何加载usercontrols?我需要ViewModels中的方法吗?

--MainWindow.xaml - 驻留在项目的根文件夹

<Window x:Class="ViewChangerFromICommand.MainWindow" 
     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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:ViewChangerFromICommand" 
     xmlns:viewmodels="clr-namespace:ViewChangerFromICommand.ViewModels" 
     xmlns:views="clr-namespace:ViewChangerFromICommand.Views" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 

    <Window.Resources> 
     <DataTemplate x:Name="redViewTemplate" DataType="{x:Type viewmodels:RedViewModel}"> 
      <views:RedView DataContext="{Binding}"/> 
     </DataTemplate> 
     <DataTemplate x:Name="BlueViewTemplate" DataType="{x:Type viewmodels:BlueViewModel}"> 
      <views:BlueView DataContext="{Binding}"/> 
     </DataTemplate> 
     <DataTemplate x:Name="OrangeViewTemplate" DataType="{x:Type viewmodels:OrangeViewModel}"> 
      <views:OrangeView DataContext="{Binding}"/> 
     </DataTemplate> 
    </Window.Resources> 

     <Window.DataContext> 
      <viewmodels:MainViewModel /> 
     </Window.DataContext> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 

     <DockPanel Background="Gray" Grid.Row="0" Grid.Column="0" Grid.RowSpan="5"> 
      <StackPanel> 
       <Button Content="Red View"/> 
       <Button Content="Blue View"/> 
       <Button Content="Orange View"/> 
      </StackPanel> 
     </DockPanel> 
     <ContentControl Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="5" Content="{Binding}"/> 
    </Grid> 
</Window> 

--RelayCommand.cs - 驻留在Models文件夹

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Input; 

namespace ViewChangerFromICommand.Models 
{ 
    public class RelayCommand : ICommand 
    { 
     readonly Action _execute; 
     readonly Func<bool> _canExecute; 

     public RelayCommand(Action execute, Func<bool> canExecute) 
     { 
      if (execute == null) 
       throw new NullReferenceException("execute"); 

      _execute = execute; 
      _canExecute = canExecute; 
     } 

     public RelayCommand(Action execute) : this(execute, null) 
     { 

     } 

     public event EventHandler CanExecuteChanged 
     { 
      add { CommandManager.RequerySuggested += value; } 
      remove { CommandManager.RequerySuggested -= value; } 
     } 

     public bool CanExecute(object parameter) 
     { 
      return _canExecute == null ? true : _canExecute(); 
     } 

     public void Execute(object parameter) 
     { 
      _execute.Invoke(); 
     } 
    } 
} 

--MainViewModel.cs - 驻留在文件夹中的ViewModels

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using ViewChangerFromICommand.Models; 
using ViewChangerFromICommand.Views; 

namespace ViewChangerFromICommand.ViewModels 
{ 
    public class MainViewModel 
    { 
     public BlueViewModel blueVM { get; set; } 

     public OrangeViewModel orangeVM { get; set; } 

     public RedViewModel redVM { get; set; } 

     public MainViewModel() 
     { 
      blueVM = new BlueViewModel(); 
      orangeVM = new OrangeViewModel(); 
      redVM = new RedViewModel(); 

     }   
    } 
} 

--BlueViewModel.cs - 驻留在的ViewModels文件夹

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Input; 
using ViewChangerFromICommand.Models; 
using ViewChangerFromICommand.Views; 

namespace ViewChangerFromICommand.ViewModels 
{ 
    public class BlueViewModel 
    { 
     public BlueViewModel() 
     { 
     }   
    } 
} 

--BlueView.xaml - 驻留在浏览文件夹

<UserControlx:Class="ViewChangerFromICommand.Views.BlueView" 
    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" 
    xmlns:local="clr-namespace:ViewChangerFromICommand.Views" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="300"> 

    <Grid Background="Blue"> 

    </Grid> 
</UserControl> 
+0

我只是想澄清我回答之前 - 在您的最终设计(假设这是简化的)会有任何RedViewModel,BlueViewModel和OrangeViewModel类之间的区别?或者他们都拥有相同的属性,命令等? –

+0

所有viewmodesl(MainViewModel除外)都是相同的(除了一个是蓝色背景,一个是红色背景,一个是橙色背景)。这个练习只是使用Mvvm模式(如果这是前进的道路)用于在MainWindow.xaml中加载/切换这些用户控件。 –

回答

0

考虑以下方法。

在MainViewModel中创建'Selected'属性,它将反映出您想要查看的ViewModel/View。设置RelayCommands将所需的视图模型分配给“Selected”属性。

在视图(窗口)中,将ContentControl的内容绑定到“选定”并设置命令绑定。

MainViewModel还需要实现INotifyPropertyChanged以更改为'Selected'属性以被视图识别。

视图模型:

public class MainViewModel:INotifyPropertyChanged //Look into using Prism and BindableBase instead of INotifyPropertyChanged 
{ 
    private BlueViewModel blueVM; 

    private OrangeViewModel orangeVM; 

    private RedViewModel redVM; 

    public event PropertyChangedEventHandler PropertyChanged=delegate { }; 

    object selectedView; 
    public object SelectedView 
    { 
     get { return selectedView; } 
     private set 
     { 
      selectedView = value; 
      RaisePropertyChanged("SelectedView"); 
     } 
    } 

    public ICommand SelectBlueViewCommand { get; private set; } 
    public ICommand SelectOrangeViewCommand { get; private set; } 
    public ICommand SelectRedViewCommand { get; private set; } 

    public MainViewModel() 
    { 
     blueVM = new BlueViewModel(); 
     orangeVM = new OrangeViewModel(); 
     redVM = new RedViewModel(); 
     SelectBlueViewCommand = new RelayCommand(() => SelectedView = blueVM); 
     SelectOrangeViewCommand = new RelayCommand(() => SelectedView = orangeVM); 
     SelectRedViewCommand = new RelayCommand(() => SelectedView = redVM); 
    } 

    void RaisePropertyChanged(string property) 
    { 
     PropertyChanged(this, new PropertyChangedEventArgs(property)); 
    } 
} 

视图/窗口

<Window x:Class="WpfApp1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:system="clr-namespace:System;assembly=mscorlib" 
    xmlns:av="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:local="clr-namespace:ViewChangerFromICommand" 
    xmlns:viewmodels="clr-namespace:ViewChangerFromICommand.ViewModels" 
    xmlns:views="clr-namespace:ViewChangerFromICommand.Views" 

      Title="Window1" Height="650" Width="750"> 
<Window.Resources> 
    <DataTemplate x:Name="redViewTemplate" DataType="{x:Type viewmodels:RedViewModel}"> 
     <views:RedView DataContext="{Binding}"/> 
    </DataTemplate> 
    <DataTemplate x:Name="BlueViewTemplate" DataType="{x:Type viewmodels:BlueViewModel}"> 
     <views:BlueView DataContext="{Binding}"/> 
    </DataTemplate> 
    <DataTemplate x:Name="OrangeViewTemplate" DataType="{x:Type viewmodels:OrangeViewModel}"> 
     <views:OrangeView DataContext="{Binding}"/> 
    </DataTemplate> 
</Window.Resources> 

<Window.DataContext> 
    <viewmodels:MainViewModel /> 
</Window.DataContext> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <DockPanel Background="Gray" Grid.Row="0" Grid.Column="0" Grid.RowSpan="5"> 
     <StackPanel> 
      <Button Content="Red View" Command="{Binding SelectBlueViewCommand}"/> 
      <Button Content="Blue View" Command="{Binding SelectOrangeViewCommand}"/> 
      <Button Content="Orange View" Command="{Binding SelectRedViewCommand}"/> 
     </StackPanel> 
    </DockPanel> 
    <ContentControl Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="5" 
        Content="{Binding SelectedView}"/> 
</Grid> 

+0

谢谢弗拉基米尔的回复和建议。我试过了,它效果很好!注意:我必须将xaml中的'Selected'属性更改为'SelectedView',那么它的效果很好。非常感谢您的帮助! –

+0

不用客气,我编辑了xaml来陈述'SelectedView'。您能否将答案标记为“已接受”? –

+0

问题:如果我实现了棱镜,这将如何改变? –