跟着丑萌气质狗学习WPF——图书馆程序

1. 图书馆程序（自行设计）

1.1 界面图片

• 用户名：WPF
• 密码：666
• 如果用户名或密码不正确则弹窗报错，然后用户名和密码会被自动清空；
• 如果用户名和密码都正确，点击登录，则会隐藏当前窗口，弹出书单列表窗口；
• • 使用到 属性与界面绑定 技术。
    
    

1.2 界面代码

• 登录界面

<Window x:Class="LibraryLog.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LibraryLog"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="惠州市图书馆"  Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" FontSize="20" Margin="10"/>
        <StackPanel Grid.Row="1" Background="LightSkyBlue">
            <TextBlock Text="登录" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" FontSize="25" Margin="10"/>
        </StackPanel>

        <Grid Grid.Row="3" HorizontalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" FontSize="20" Margin="10"/>
            <TextBlock Text="密码" Grid.Row="1" Grid.Column="0" FontSize="20" Margin="10"/>
            <CheckBox Content="记住密码"  Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" FontSize="16" Margin="10"/>
            <Button Content="登录" Click="Button_Click" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Width="280" Height="40" FontSize="20" Margin="10"/>
            <TextBox Text="{Binding UserName}" Grid.Row="0" Grid.Column="1" FontSize="20" Margin="10" Width="200"/>
            <TextBox Text="{Binding Password}" Grid.Row="1" Grid.Column="1" FontSize="20" Margin="10" Width="200"/>
        </Grid>
    </Grid>
</Window>

• 书单列表界面

<Window x:Class="LibraryLog.Index"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LibraryLog"
        mc:Ignorable="d"
        Title="Index" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ListBoxItem Content="《学习C#》" Grid.Row="0"/>
        <ListBoxItem Content="《学习Python》"  Grid.Row="1"/>
        <ListBoxItem Content="《深度学习》"  Grid.Row="2"/>
        <ListBoxItem Content="《多模态大模型》"  Grid.Row="3"/>
    </Grid>
</Window>

1.3 C#代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LibraryLog
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }

        private string _UserName;
        public string UserName
        {
            get
            {
                return _UserName;
            }
            set
            {
                _UserName = value;
                RaisePropertyChanged("UserName");
            }
        }
        private string _Password;
        public string Password
        {
            get
            {
                return _Password;
            }
            set
            {
                _Password = value;
                RaisePropertyChanged("Password");
            }
        }
        
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (UserName == "WPF" && Password == "666")
            {
                Index idx = new Index();
                idx.Show();
                this.Hide();
            }
            else
            {
                MessageBox.Show("用户名或密码不正确！");
                Password = "";
                UserName = "";
            }   
        }
    }
}

2. 图书馆程序（MVVM）

2.0 MVVM简介（来自文心一言）

MVVM（Model-View-ViewModel）是一种软件架构设计模式，用于构建用户界面。它特别适用于开发复杂的单页面应用程序（SPA），如现代Web应用和移动应用。MVVM 架构将应用程序分为三个核心部分：Model（模型）、View（视图）和 ViewModel（视图模型），它们各自承担不同的职责，并通过特定的方式相互通信。

1. Model（模型）

• 职责：表示数据以及业务逻辑（或业务规则）。它负责管理应用程序的数据，包括数据的验证和修改等。
• 特点：通常是纯粹的数据对象，不包含任何与界面相关的逻辑。

2. View（视图）

• 职责：负责展示用户界面。它使用数据来渲染视图，并将用户交互通知给 ViewModel。
• 特点：通常是HTML、XAML等标记语言或模板文件，也可能是渲染引擎生成的界面。

3. ViewModel（视图模型）

• 职责：作为Model和View之间的桥梁，它负责将Model的数据转换为View可以展示的格式，同时也负责将用户的输入和操作转换为Model可以理解的数据。ViewModel通常还包含命令（Commands）和数据绑定（Data Binding）的逻辑。
• 特点：它封装了与界面交互的逻辑，使得Model可以独立于界面而存在，便于测试和重用。

4. MVVM的优势

1. 低耦合：Model、View和ViewModel之间相对独立，便于维护和扩展。
2. 高内聚：ViewModel封装了与界面相关的逻辑，使得业务逻辑更加清晰。
3. 易于测试：由于Model和ViewModel可以独立于View进行测试，因此可以更容易地编写单元测试。
4. 双向数据绑定：通过数据绑定，View和ViewModel之间的数据可以自动同步，减少了手动更新UI的需要。

2.1 模型

• LoginModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LibraryLog
{
    public class LoginModel
    {
        private string _UserName;
        public string UserName
        {
            get
            {
                return _UserName;
            }
            set
            {
                _UserName = value;
            }
        }
        private string _Password;
        public string Password
        {
            get
            {
                return _Password;
            }
            set
            {
                _Password = value;
            }
        }
    }
}

2.2 视图

<Window x:Class="LibraryLog.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LibraryLog"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="惠州市图书馆"  Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" FontSize="20" Margin="10"/>
        <StackPanel Grid.Row="1" Background="LightSkyBlue">
            <TextBlock Text="登录" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" FontSize="25" Margin="10"/>
        </StackPanel>

        <Grid Grid.Row="3" HorizontalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="用户名" Grid.Row="0" Grid.Column="0" FontSize="20" Margin="10"/>
            <TextBlock Text="密码" Grid.Row="1" Grid.Column="0" FontSize="20" Margin="10"/>
            <CheckBox Content="记住密码"  Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" FontSize="16" Margin="10"/>
            <Button Content="登录" Command="{Binding LoginAction}" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Width="280" Height="40" FontSize="20" Margin="10"/>
            <TextBox Text="{Binding UserName}" Grid.Row="0" Grid.Column="1" FontSize="20" Margin="10" Width="200"/>
            <TextBox Text="{Binding Password}" Grid.Row="1" Grid.Column="1" FontSize="20" Margin="10" Width="200"/>
        </Grid>
    </Grid>
</Window>

2.3 视图模型

• LoginVM

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;

namespace LibraryLog
{
    public class LoginVM : INotifyPropertyChanged
    {
        private MainWindow _main;
        public LoginVM(MainWindow  main)
        {
            _main = main;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }

        private LoginModel _LoginM = new LoginModel();
        public LoginModel LoginM
        {
            get
            {
                if (_LoginM == null)
                    _LoginM = new LoginModel();
                return _LoginM;
            }
            set
            {
                _LoginM = value;
                RaisePropertyChanged("LoginM");
            }
        }
        public string UserName
        {
            get
            {
                return _LoginM.UserName;
            }
            set
            {
                _LoginM.UserName = value;
                RaisePropertyChanged("UserName");
            }
        }
        public string Password
        {
            get
            {
                return _LoginM.Password;
            }
            set
            {
                _LoginM.Password = value;
                RaisePropertyChanged("Password");
            }
        }
        /// <summary>
        /// 登陆方法
        /// </summary>
        void LoginFunc()
        {
            if (UserName == "WPF" && Password == "666")
            {
                Index idx = new Index();
                idx.Show();
                _main.Hide();
            }
            else
            {
                MessageBox.Show("用户名或密码不正确！");
                Password = "";
                UserName = "";
            }
        }
        bool CanLoginExecute()
        {
            return true;
        }

        public ICommand LoginAction
        {
            get
            {
                return new RelayCommond(LoginFunc, CanLoginExecute);
            }
        }
    }
}

2.4 交互逻辑

using System.Windows;

namespace LibraryLog
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        LoginVM loginvm;
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new LoginVM(this);
        }  
    }
}