zoukankan      html  css  js  c++  java
  • WPF新手快速入门系列 3.MVVM

    【概要】

    这一章主要讲述,讲述MVVM模式和用法。

    如有学习过程中想交流学习、疑惑解答可以来此QQ群交流:580749909。(所有涉及到的源码都上传到了群文件里)

    希望加群的人提问时尽量想清楚自己的问题,愿意钻研而不是等现成的答案而不去思考。祝各位同仁早日学会WPF这项技术。

    【MVVM】

    前言:MVVM的核心思想就是界面与代码分离,实现“解耦”。是一种开发模式,并不是一种开发框架。主要是以数据驱动的开发模式。

    先从项目应用的角度来介绍一下MVVM是什么、怎么用、项目中该怎么建项目结构。

    话不多说直接上图:

    图中的结构一眼就能看明白如何建项了,但是实际开发中它们之间的关系又是如何呢,如何使用起来呢。

    【关系】

    View:

    拿到需求的第一件事就是会知道界面要做成什么样子,那么第一个创建的就是View。

    ViewModel:

    主要用来实现业务逻辑的地方,比如需要计算 1 + 1的结果显示到View上。

    Model:

    这一层主要是用来存放,ViewModel种需要用到的实体类。比如ViewModel业务处理逻辑需要用到的自定义类都可以放到这一层。

    【调用】

    View:

    <Window
        x:Class="TestX.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:local="clr-namespace:TestX"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="800"
        Height="800"
        Opacity="1"
        mc:Ignorable="d">
        <Grid>
            <ListBox ItemsSource="{Binding NameCollection}"></ListBox>
        </Grid>
    </Window>

    View-Code:

    DataContext 一般是用来放view model的,因为你要绑定或操作的对象都在view model里。当然也能存放其它类型的对象。
    namespace TestX
    {
        /// <summary>
        /// MainWindow.xaml 的交互逻辑
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.DataContext = new MainViewModel();
            }
        }
    }

    ViewModel:

    using GalaSoft.MvvmLight;
    using System.Collections.ObjectModel;
    using TestX.Models;
    
    namespace TestX.ViewModels
    {
        public class MainViewModel : ViewModelBase
        {
            private ObservableCollection<MainModel> _nameCollection;
    
            public ObservableCollection<MainModel> NameCollection
            {
                get
                {
                    return _nameCollection;
                }
    
                set
                {
                    _nameCollection = value;
                }
            }
    
            /// <summary>
            /// Initializes a new instance of the MainViewModel class.
            /// </summary>
            public MainViewModel()
            {
                Do();
            }
             
            private void Do() {
                NameCollection = new ObservableCollection<MainModel>();
                NameCollection.Add(new MainModel() { Name = "张三" });
                NameCollection.Add(new MainModel() { Name = "李四" });
                NameCollection.Add(new MainModel() { Name = "王五" });
            }
        }
    }

    Model:

     public class MainModel
        {
            public string Name { get; set; }
    
            public override string ToString()
            {
                return Name;
            }
        }

    最终效果:

  • 相关阅读:
    js面向对象设计之function类
    js 面向对象设计之 Function 普通类
    JS 面试题 实践一
    es6面试问题——Promise
    我给出的一份前端面试题
    如何面试前端工程师?
    前端面试中的自我介绍
    第四章 --- 关于Javascript 设计模式 之 迭代器模式
    第三章 --- 关于Javascript 设计模式 之 代理模式
    第二章 --- 关于Javascript 设计模式 之 策略模式
  • 原文地址:https://www.cnblogs.com/justzhuzhu/p/10636780.html
Copyright © 2011-2022 走看看