如何使用ICommand Mvvm模式在MainWindow.xaml中切换Usercontrol？

时间：2017-07-22 05:39:24

标签： c# wpf xaml mvvm

请 - 我现在不想使用/使用像MVVMlite（等）这样的外部框架。我需要手动执行此操作，以便我可以看到完整的过程。

我已经看到了我要问的问题的各种表达，但我没有看到我的问题的任何版本将命令绑定到usercontrol以更改MainWindow.xaml中的用户控件。在下面的代码中，我演示了我尝试使用Wpf / Mvvm应用程序在MainWindow.xaml中切换用户控件的努力/尝试。问题/请求是我需要采取哪些步骤来完成这个项目？

在我的项目中，我有标准的Models / ViewModels / Views文件夹，我想在MainWindow.xaml中切换的3个usercontrol视图（MainWindow.xaml驻留在项目的根文件夹中） - BlueView，OrangeView，RedView 。这些视图/用户控件的唯一内容是Blueview具有蓝色背景网格，OrangeView具有橙色背景网格，RedView具有红色背景网格。我在MainWindow.xaml左侧的堆栈面板中有3个按钮，还有一个内容控件，我想在MainWindow.xaml右侧加载/切换用户控件。我有3个相应的ViewModel，BlueViewModel，OrangeViewModel，RedViewModel。我还有一个MainViewModel用于绑定这三个viewModel，以及Model文件夹中的RelayCommand.cs。但我不知道从哪里去。

这是我的代码 - 注意：我只会添加MainWindow.xaml，RelayCommand.cs，MainViewModel和BlueViewModle / BlueView，因为除了背景网格颜色之外，其他视图/ ViewModel是相同的。我需要做什么/添加什么才能在MainWindow.xaml的内容控件中加载/切换用户控件？我无法显示用户控件 - 因此我在MainViewModel.cs中没有显示/显示方法。如何加载用户控件？我是否需要ViewModel中的方法？

- 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 - 位于Views文件夹

<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>

1 个答案:

答案 0 :(得分：0)

考虑以下方法。

在MainViewModel中创建＆＃39;选择＆＃39; property，它将反映您想要查看的ViewModel / View。设置RelayCommands将所需的视图模型分配给＆＃39; Selected＆＃39;属性。

在视图（窗口）中，将ContentControl的内容绑定到＆＃39;已选中＆＃39;和设置命令绑定。

MainViewModel还需要实现INotifyPropertyChanged以更改为“已选择”＃39;视图可以识别的属性。

查看型号：

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>

相关问题
最新问题