1 前言
之前的许多介绍已经完成界面搭建的熟悉内容,现在在搭建的基础上完成简单的界面切换。
2 定义文件
我们在已有项目中需要定义两个CS文件,在这个两个CS文件中,我们可以在MainModel.cs中定义对应的属性,然后在MainViewModel.cs中对MainModel 类使用,再同步更新到对应的UI界面中,从而实现MVVM模式。
MainModel——常用于处理数据和业务逻辑。
MainViewModel——常用于调用Models文件,更新用户数据。
3 定义属性
在MainModel.cs中定义属性。
UIElement 是一个非常基础和核心的类,它是几乎所有可视化元素的基类。UIElement 类提供了许多用于处理用户输入、布局、渲染和其他UI功能的属性和方法。
我们使用到了NotifyChanged 方法,设置新值时调用 NotifyChanged 方法,可用于后台数据更新时刷新界面数据,用于通知绑定的UI元素属性值发生了变化。
class MainModel
{
private UIElement _mainContent;
public UIElement MainContent
{
get { return _mainContent; }
set { _mainContent = value; this.NotifyChanged(); }
}
}
4 控制器使用
我们定义MainModel类,用这个类的属性获取对应的UI元素名称,然后方法内部使用 Type.GetType(name) 获取相应的 Type 对象,然后使用 Activator.CreateInstance(type) 创建这个类型的实例,最终达到调用显示的效果。
public MainModel MainModel { get; set; } = new MainModel();
private void NavPage(string name)
{
Type type = Type.GetType(name);
this.MainModel.MainContent = (System.Windows.UIElement)Activator.CreateInstance(type);
}
public MainViewModel()
{
this.NavPage("InterfacialDesign.Views.DataModelViews");
}
5 界面内容绑定
这里就是最简单的界面数据绑定,我们在后台使用MainModel类,在控制器对MainModel类的属性进行赋值,更新界面元素。
<ContentControl Content="{Binding MainModel.MainContent}"/>
ContentControl——一个可以显示单个对象的内容的控件,它非常适合用于绑定到可能改变的UIElement。Content="{Binding MainModel.MainContent}" 表示 ContentControl 的 Content 属性将绑定到视图的数据上下文中的 MainModel 对象的 MainContent 属性。这要求 MainModel 对象实现了 INotifyPropertyChanged 接口,以便在 MainContent 属性值改变时通知UI进行更新。
在MVVM模式中,视图(View)不直接与模型(Model)交互,而是通过视图模型(ViewModel)作为中介。在MainViewModel 中包含 MainModel 作为属性,并在视图中设置为数据上下文。
6 界面效果
第一个界面是Mainwindow界面,没有按钮。
第二个是DataModelViews界面,添加一个按钮。
第三个是最终运行出来的效果,将DataModelViews界面加载到Mainwindow界面中!
这里还存在一个问题,DataModelViews界面在Mainwindow界面显示不完全,还需要后续进行调整!
总结
本文仅仅简单介绍了界面绑定显示的方法,但是默认了界面显示,后续需要根据按钮进行界面切换。