手把手教你搭WPF架构之界面绑定显示

364 阅读2分钟

1 前言

之前的许多介绍已经完成界面搭建的熟悉内容,现在在搭建的基础上完成简单的界面切换。


2 定义文件

我们在已有项目中需要定义两个CS文件,在这个两个CS文件中,我们可以在MainModel.cs中定义对应的属性,然后在MainViewModel.cs中对MainModel 类使用,再同步更新到对应的UI界面中,从而实现MVVM模式。

MainModel——常用于处理数据和业务逻辑。

MainViewModel——常用于调用Models文件,更新用户数据。

image.png

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类的属性进行赋值,更新界面元素。

image.png

<ContentControl Content="{Binding MainModel.MainContent}"/>

ContentControl——一个可以显示单个对象的内容的控件,它非常适合用于绑定到可能改变的UIElementContent="{Binding MainModel.MainContent}" 表示 ContentControlContent 属性将绑定到视图的数据上下文中的 MainModel 对象的 MainContent 属性。这要求 MainModel 对象实现了 INotifyPropertyChanged 接口,以便在 MainContent 属性值改变时通知UI进行更新。

在MVVM模式中,视图(View)不直接与模型(Model)交互,而是通过视图模型(ViewModel)作为中介。在MainViewModel 中包含 MainModel 作为属性,并在视图中设置为数据上下文。

6 界面效果

第一个界面是Mainwindow界面,没有按钮。

第二个是DataModelViews界面,添加一个按钮。

第三个是最终运行出来的效果,将DataModelViews界面加载到Mainwindow界面中!

image.png

这里还存在一个问题,DataModelViews界面在Mainwindow界面显示不完全,还需要后续进行调整!


总结

本文仅仅简单介绍了界面绑定显示的方法,但是默认了界面显示,后续需要根据按钮进行界面切换。