WPF【二】基于MVVM模式，通过点击按钮（RadioButton）实现主页面显示不同的UserControl

效果展示

启动程序主页面

点击Main按钮，在按钮下方指定区域显示对应的UserControl界面

效果图

此功能需要用到的类包以及版本，如下图所示

具体实现流程

• 一、UI界面的按钮绑定对应的命令【Command】以及命令参数【CommandParameter】

• 二、

  UI【代码】通过内容去绑定需要显示的UserControl页

• 三、

  编写对应的ViewModel.cs文件实现对应的功能，注意：代码中SecondWindow以及FirstPageView两个类是需要用户鼠标右键点击添加【新建项目】选择【用户控件(Windows窗体)】创建对应的SecondWindow以及FirstPageView名称。

  • • 【代码】

internal class MainViewModel : ViewModelBase
{
    //字段
    private UserControl m_CurrentUserControl;

    //属性
    public UserControl CurrentUserControl
    {
        get { return m_CurrentUserControl; }
        set
        {
            m_CurrentUserControl = value;
            //通知UI界面属性修改信号
            RaisePropertyChanged(nameof(CurrentUserControl));
        }
    }

    private UserControl m_mainFrameElement;

    private UserControl m_visionFrameElement;

    public RelayCommand ShowViewCommand
    { 
        get; 
    }

    public MainViewModel()
    {
        ShowViewCommand = new RelayCommand(ShowCurrentContent);
    }

    //1根据ui的属性判断，content接收UI属性CommandParameter值
    //2实例化对应CommandParameter值的UserControl用户窗体对象
    public void ShowCurrentContent(string content)
    {
        if (content.Equals("VisionView"))
        {
            if (m_visionFrameElement == null) m_visionFrameElement = new SecondWindow();

            CurrentUserControl = m_visionFrameElement;
        }
        else if (content.Equals("MainView"))
        {
            if (m_mainFrameElement == null) m_mainFrameElement = new FirstPageView();

            CurrentUserControl = m_mainFrameElement;
        }
    }
}

• 四、

  在主窗体【MainWindow】的构造函数中添加数据获取和修改的数据上下文

  • 【代码】

public MainWindow()
{
     InitializeComponent();
     this.DataContext = new MainViewModel();
}