WPF学习笔记（6）——WPF+Stylet+MVVM：ListBox添加项、获取所选项、删除项、删除所选项

功能描述

使用Stylet框架，对WPF进行MVVM模式下的开发。不在xaml.cs中写业务逻辑，业务逻辑均在VM中，且业务逻辑只针对属性，不涉及ListBox控件。
实现功能：
（1）ListBox添加一个项，项具有图片、信息
（2）展示一个所选项的信息
（3）删除一个项
（4）删除所选项

实现效果

首先创建学生类

namespace StyletTest.Model
{
    public class Student
    {
        /// <summary>
        /// 图片路径
        /// </summary>
        public string ImagePath { get; set; }


        /// <summary>
        /// 学生姓名
        /// </summary>
        public string StudentName { get; set; }

        /// <summary>
        /// 注册时间
        /// </summary>
        public string RegistTime { get; set; }
    }
}

在ViewModel中去创建绑定的Item集合以及业务逻辑

using Stylet;
using StyletTest.Model;
using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace StyletTest.ViewModel
{
    public class ListBoxViewModel : Screen
    {
        IWindowManager _windowManager;

        #region 属性
        private ObservableCollection<Student> _students;
        /// <summary>
        /// 绑定的学生类Item集合
        /// </summary>
        public ObservableCollection<Student> Students
        {
            get
            {
                return _students;
            }
            set
            {
                SetAndNotify(ref _students, value);
            }
        }

        private Student _selectedStudent;
        /// <summary>
        /// 绑定的已选的学生类Item
        /// </summary>
        public Student SelectedStudent
        {
            get
            {
                return _selectedStudent;
            }
            set
            {
                SetAndNotify(ref _selectedStudent, value);
            }
        }
        #endregion


        // 构造函数
        public ListBoxViewModel(IWindowManager windowManager)
        {
            _windowManager = windowManager;
        }


        // 窗体初次加载执行
        protected override void OnViewLoaded()
        {
            Students = new ObservableCollection<Student>();
        }


        // 方法：添加一个项
        public void AddOneItem()
        {
            Student student1 = new Student();
            //student1.ImagePath = AppDomain.CurrentDomain.BaseDirectory + "Images\\Image (" + Students.Count + ").png";
            student1.ImagePath = AppDomain.CurrentDomain.BaseDirectory + "Images\\学生.png";
            student1.StudentName = "学生" + Students.Count.ToString();
            student1.RegistTime = DateTime.Now.ToString();
            Students.Add(student1);
        }

        // 方法：显示选择项的信息
        public void ShowSelectedStudentMessage()
        {
            if (SelectedStudent == null)
                return;

            MessageBox.Show("姓名：" + SelectedStudent.StudentName + "\r\n注册时间：" + SelectedStudent.RegistTime);
        }

        // 方法：倒序删除一个项
        public void DeleteOneItem()
        {
            if (Students.Count == 0)
                return;

            // 获取最大序号
            int index = Students.Count - 1;
            // 删除最大序号项目
            Students.Remove(Students[index]);
        }

        // 方法：删除所选项
        public void DeleteSelectedItem()
        {
            if (SelectedStudent == null)
                return;

            // 删除
            Students.Remove(SelectedStudent);
        }

    }
}

（ViewModel创建了View中绑定的属性以及方法）

View

<Window
    x:Class="StyletTest.View.ListBoxView"
    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:StyletTest.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:s="https://github.com/canton7/Stylet"
    Title="ListBoxView"
    Width="600"
    Height="500"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="6*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox
            Grid.Row="0"
            Grid.Column="0"
            Margin="5"
            Background="AliceBlue"
            ItemsSource="{Binding Students}"
            SelectedItem="{Binding SelectedStudent}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Image
                            Grid.Column="0"
                            Margin="2"
                            Source="{Binding ImagePath}" />
                        <TextBlock
                            Grid.Column="1"
                            VerticalAlignment="Center"
                            Text="{Binding StudentName}" />
                        <GridSplitter
                            Grid.Column="2"
                            Width="5"
                            Background="White" />
                        <TextBlock
                            Grid.Column="3"
                            VerticalAlignment="Center"
                            Text="{Binding RegistTime}" />
                    </Grid>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button
            Grid.Row="1"
            Grid.Column="0"
            Margin="5"
            Command="{s:Action AddOneItem}"
            Content="AddOneItem" />
        <Button
            Grid.Row="1"
            Grid.Column="1"
            Margin="5"
            Command="{s:Action ShowSelectedStudentMessage}"
            Content="ShowSelectedStudentMessage" />
        <Button
            Grid.Row="2"
            Grid.Column="0"
            Margin="5"
            Command="{s:Action DeleteOneItem}"
            Content="DeleteOneItem" />
        <Button
            Grid.Row="2"
            Grid.Column="1"
            Margin="5"
            Command="{s:Action DeleteSelectedItem}"
            Content="DeleteSelectedItem" />

    </Grid>
</Window>

（view中侧重看Bind的内容，与VM中的属性是对应的，也就是说，VM对属性操作，属性的内容以及改变通过View绑定这个属性的控件显示出来，在VM中没有再对View.ListBox类似的操作，脱离对UI的直接接触，以数据作为中间桥梁）