Silverlight/WPF/Windows Phone 开发之MVVM设计模式之入门

简介: 1、新建一个WPF、Silverlight或Windows Phone的项目。2、在项目中新建几个文件夹,Models、Views、ViewModels、Data、Service、Commands。
1、新建一个WPF、Silverlight或Windows Phone的项目。

2、在项目中新建几个文件夹,Models、Views、ViewModels、Data、Service、Commands。

3、在ViewModels文件夹中新建一个NotificationObject.cs类,代码如下:

    public class NotificationObject:INotifyPropertyChanged
    {
        #region INotifyPropertyChanged 成员

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        public void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

4、在Commands文件夹中新建一个DelegateCommand.cs命令类,代码如下:
    public class DelegateCommand : ICommand
    {
        #region ICommand 成员
		public Action<object> ExecuteAction { get; set; }
        public Func<object, bool> CanExecuteFunc { get; set; }

        public bool CanExecute(object parameter)
        {
            if (this.CanExecuteFunc == null)
            {
                return true;
            }
            return this.CanExecuteFunc(parameter);
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            if (this.ExecuteAction == null)
            {
                return;
            }
            this.ExecuteAction(parameter);
        }
        #endregion
    }

5、在Data文件夹下新建一个xml文件,Data.xml,内容如下:
<?xml version="1.0" encoding="utf-8" ?>
<Students>
  <Student>
    <Name>张三</Name>
    <Age>25</Age>
    <Sex>男</Sex>
    <Job>IT开发工程师</Job>
  </Student>
    <Student>
    <Name>李四</Name>
    <Age>26</Age>
    <Sex>女</Sex>
    <Job>销售经理</Job>
  </Student>
</Students>

6、在Models文件夹下,新建一个Student.cs类,代码如下:
    public class Student
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string Sex { get; set; }
        public string Job { get; set; }
    }

7、在Services文件下,新建一个IDataService.cs接口文件,代码如下:
    public interface IDataService
    {
        List<Student> GetAllStudents();
    }
  还有一个XmlDataService.cs读取xml的类,用来实现以上接口,代码如下:
    public class XmlDataService : IDataService
    {
        #region IDataService 成员

        public List<Student> GetAllStudents()
        {
            List<Student> studentList = new List<Student>();
            string xmlFileName = System.IO.Path.Combine(Environment.CurrentDirectory, @"Data\Data.xml");
            XDocument document = XDocument.Load(xmlFileName);
            var students = document.Descendants("Student");
            foreach (var stu in students)
            {
                Student studnet = new Student();
                studnet.Name = stu.Element("Name").Value;
                studnet.Age = stu.Element("Age").Value;
                studnet.Sex = stu.Element("Sex").Value;
                studnet.Job = stu.Element("Job").Value;
                studentList.Add(studnet);
            }
            return studentList;
        }

        #endregion
    }

8、在ViewModels文件夹下,新建一个StudentItemViewModel.cs类,代码如下:
    class StudentItemViewModel:NotificationObject
    {
        public Student Student { get; set; }

        private bool _isSelected;

        public bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                _isSelected = value;
                this.RaisePropertyChanged("IsSelected");
            }
        }
    }
在新建一个类,StudentViewModel.cs,代码如下:
    class StudentViewModel : NotificationObject
    {
		//命令属性
        public DelegateCommand SelectStudentItemCommand { get; set; }

		//数据属性,用来统计选中多少学生
        private int _count;

        public int Count
        {
            get { return _count; }
            set
            {
                _count = value;
                this.RaisePropertyChanged("Count");
            }
        }

        private Student _student;

        public Student Student 
        {
            get { return _student; }
            set
            {
                _student = value;
                this.RaisePropertyChanged("Student");
            }
        }

        private List<StudentItemViewModel> _studentList;

        public List<StudentItemViewModel> StudentList
        {
            get { return _studentList; }
            set
            {
                _studentList = value;
                this.RaisePropertyChanged("StudentList");
            }
        }

        public StudentViewModel()
        {
            this.LoadStudentList();
            this.SelectStudentItemCommand = new DelegateCommand(new Action(this.SelectStudentItemCommandExecute));
        }

        void LoadStudentList()
        {
            XmlDataService ds = new XmlDataService();
            var students = ds.GetAllStudents();
            this.StudentList = new List<StudentItemViewModel>();
            foreach (var student in students)
            {
                StudentItemViewModel item = new StudentItemViewModel();
                item.Student = student;
                this.StudentList.Add(item);
            }
        }

        private void SelectStudentItemCommandExecute()
        {
            this.Count = this.StudentList.Count(p=>p.IsSelected==true);
        }
    }


9、在Views文件夹下,新建一个Student.xaml,内容如下:
     <Grid>
        <DataGrid AutoGenerateColumns="False" CanUserAddRows="False"  ItemsSource="{Binding StudentList}"  CanUserDeleteRows="False" Height="138" HorizontalAlignment="Left" Margin="10,82,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="256">
            <DataGrid.Columns>
                <DataGridTextColumn Header="姓名" Binding="{Binding Student.Name}" Width="50"></DataGridTextColumn>
                <DataGridTextColumn Header="年龄" Binding="{Binding Student.Age}" Width="50"></DataGridTextColumn>
                <DataGridTextColumn Header="性别" Binding="{Binding Student.Sex}" Width="50"></DataGridTextColumn>
                <DataGridTextColumn Header="工作" Binding="{Binding Student.Job}" Width="50"></DataGridTextColumn>
                <DataGridTemplateColumn Header="选中" SortMemberPath="IsSelected">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox IsChecked="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged}" Command="{Binding Path=DataContext.SelectStudentItemCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGrid}}}">
                            </CheckBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="21,238,0,0" Name="textBlock7" Text="共选中:" VerticalAlignment="Top" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="75,238,0,0" Name="textBlock8" Text="{Binding Count}" VerticalAlignment="Top" />
    </Grid>

	public partial class Student : Window
    {
        public Student()
        {
            InitializeComponent();
            this.DataContext = new StudentViewModel();
        }
    }

10、在App.xaml中设置起始页
<Application x:Class="WPFDemo2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views/Student.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

11、运行一下程序,看看效果吧。


相关文章
|
11月前
|
前端开发 C# 开发者
WPF开发者必读:MVVM模式实战,轻松构建可维护的应用程序,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离关注点,提高了代码的可维护性和可扩展性。本文详细介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定与逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种模式,开发者可以更高效地构建桌面应用程序。希望本文能帮助你在WPF开发中更好地应用MVVM模式。
535 1
|
10月前
|
设计模式 前端开发 C#
WPF 项目中 MVVM模式 的简单例子说明
本文通过WPF项目中的加法操作示例,讲解了MVVM模式的结构和实现方法,包括数据模型、视图、视图模型的创建和数据绑定,以及命令的实现和事件通知机制。
|
11月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
284 0
|
11月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
539 0
|
11月前
|
设计模式 前端开发 C#
WPF/C#:理解与实现WPF中的MVVM模式
WPF/C#:理解与实现WPF中的MVVM模式
726 0
|
设计模式 开发框架 前端开发
深入理解WPF中MVVM的设计思想
近些年来,随着WPF在生产,制造,工业控制等领域应用越来越广发,很多企业对WPF开发的需求也逐渐增多,使得很多人看到潜在机会,不断从Web,WinForm开发转向了WPF开发,但是WPF开发也有很多新的概念及设计思想,如:数据驱动,数据绑定,依赖属性,命令,控件模板,数据模板,MVVM等,与传统WinForm,ASP.NET WebForm开发,有很大的差异,今天就以一个简单的小例子,简述WPF开发中MVVM设计思想及应用。
201 0
|
前端开发 C# 图形学
【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入
前言:在C/S架构上,WPF无疑已经是“桌面一霸”了。在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用。但是WPF也有很多年的历史了,并且基于MVVM的开发模式,受到了很多开发者的喜爱。
847 0
【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入
|
前端开发
WPF-Binding问题-MVVM中IsChecked属性CommandParameter转换值类型空异常
WPF-Binding问题-MVVM中IsChecked属性CommandParameter转换值类型空异常
260 0
|
前端开发 算法 JavaScript
走进WPF之MVVM完整案例
走进WPF之MVVM完整案例
425 0
|
前端开发 C# 数据库
WPF MVVM系统入门-下
本文详细讲解WPF,MVVM开发,实现UI与逻辑的解耦。
399 0