2017-07-22 32 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

問題:如果我實現了棱鏡,這將如何改變? –