WPF+Mvvm项目入门完整教程-仓储管理系统（二）

🕗 发布于 2024-07-22 06:04 wpf MVVM

一、搭建一个主界面框架

主要实现主界面的框架样式和基础功能。这里特别说明一下，由于MvvmLight 已经过时不在维护，本项目决定将MvvmLight框架变更为 CommunityToolkit.Mvvm 框架，使用方法和 MvvmLight 一样，具体配置大家可以参考像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包这篇文章。本节实现效果如下所示：
在这里插入图片描述

二、实现步骤

1.主界面区域划分

这里我们分析一下，主界面一共分成上中下三个区域，最上面的为系统功能按钮，中间区域显示内容信息，底部显示系统版本版权信息等。分割效果图如下：
在这里插入图片描述

2.主界面区域实现

MainWindow.xaml 文件完整代码如下：

<Window x:Class="CommonProject_DeskTop.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:CommonProject_DeskTop"
        xmlns:behavior="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:viewmodel="clr-namespace:CommonProject_DeskTop.ViewModel" 
        mc:Ignorable="d" Title="通用基础案例"
        DataContext="{Binding Source={StaticResource Locator},Path=Main}" MinWidth="1200" MinHeight="700"
        ResizeMode="CanResize"  Background="#1F1F1F" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Assets/Styles/SystemButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid x:Name="MainContent" ClipToBounds="True" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <!--顶部系统菜单按钮-->
        <Grid Background="#1F2336" MouseDown="DragMoveWindow">
            <!--绘制多边形形状作为标题背景底色-->
            <Polygon Points="0 0,280,0,220 40 20 40 0 40" StrokeThickness="0" Stroke="White" HorizontalAlignment="Left">
                <Polygon.Fill>
                    <SolidColorBrush Color="Gray"/>
                </Polygon.Fill>
            </Polygon>
            <TextBlock Text="仓储管理系统" TextAlignment="Left"  VerticalAlignment="Center" FontSize="20" Foreground="Gold" Margin="35 0 0 0"/>
            <!--系统按钮-->
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Margin="0 0 10 0" VerticalAlignment="Center" >
                <Button Content="&#xe602;" ToolTip="登录" Style="{StaticResource SystemButtonStyle}" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=ToolTip}"/>
                <Button Content="&#xe650;" ToolTip="最小化" Style="{StaticResource SystemButtonStyle}" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=ToolTip}"/>
                <Button Content="&#xe65b;" ToolTip="最大化" Style="{StaticResource SystemButtonStyle}" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=ToolTip}"/>
                <Button Content="&#xe70f;" ToolTip="关闭" Style="{StaticResource SystemButtonStyle}" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=ToolTip}"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="130"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Fill="#111111"/>
                <ListBox Margin="0 5 0 0" Background="Transparent" Foreground="White" BorderThickness="0" FontSize="16" Name="listMenu">
                    <behavior:Interaction.Triggers>
                        <behavior:EventTrigger EventName="SelectionChanged">
                            <behavior:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=DataContext.MenuClickCmd}" CommandParameter="{Binding ElementName=listMenu,Path=SelectedItem}"/>
                        </behavior:EventTrigger>
                    </behavior:Interaction.Triggers>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <StackPanel Height="35" Orientation="Horizontal" Background="Transparent" Name="container" Cursor="Hand">
                                            <Rectangle Fill="DarkRed" VerticalAlignment="Stretch" Width="5" Visibility="Hidden" Name="leftSlideRectangle"/>
                                            <ContentPresenter  VerticalAlignment="Center" Margin="15 0 0 0"/>
                                        </StackPanel>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsSelected" Value="True">
                                                <Setter Property="Visibility" Value="Visible" TargetName="leftSlideRectangle"/>
                                                <Setter Property="Background" Value="#3a3a3a" TargetName="container"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Visibility" Value="Visible" TargetName="leftSlideRectangle"/>
                                                <Setter Property="Opacity" Value="0.5" TargetName="leftSlideRectangle"/>
                                                <Setter Property="Background" Value="#1a1a1a" TargetName="container"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBoxItem  Content="首页"/>
                    <ListBoxItem  Content="物资管理"/>
                    <ListBoxItem  Content="仓库设置"/>
                    <ListBoxItem  Content="库位管理"/>
                    <ListBoxItem  Content="客户管理"/>
                    <ListBoxItem  Content="供应商管理"/>
                    <ListBoxItem  Content="物资入库"/>
                    <ListBoxItem  Content="物资出库"/>
                    <ListBoxItem  Content="入库管理"/>
                    <ListBoxItem  Content="出库管理"/>
                </ListBox>
            </Grid>
        </Grid>
        <!--底部版本信息-->
        <Grid Grid.Row="2" Background="#424242">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StatusBarItem Grid.Column="0" FontSize="10" Foreground="#F5F5F5" HorizontalAlignment="Center" Content="版权@2024"/>
            <StatusBarItem Grid.Column="1" FontSize="10" Foreground="#F5F5F5" HorizontalAlignment="Center" Content="XXXXXXXXX有限公司"/>
            <StatusBarItem Grid.Column="3"  HorizontalAlignment="Center" >
                <TextBlock Text="{Binding DateTimeStr}" FontSize="10" Foreground="#EBEBEB"/>
            </StatusBarItem>
        </Grid>

    </Grid>
</Window>

2、MainWindow.xaml.cs 后端代码如下：

using CommonProject_DeskTop.ViewModel;
using CommunityToolkit.Mvvm.Messaging;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Collections.Generic;
using System.Diagnostics;
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 CommonProject_DeskTop
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //消息注册
            RegisterMessage();
        }

        private void RegisterMessage()
        {
            注册一个系统菜单功能消息
            WeakReferenceMessenger.Default.Register<string>(this, HandleMessage);
        }

        private void HandleMessage(object recipient, string message)
        {
            switch (message)
            {
                case "MainWindowClose":
                    AppClose();
                    break;
                case "MainWindowMax":
                    MainWindowMax();
                    break;
                case "MainWindowMin":
                    MainWindowMin();
                    break;
            }
        }


        /// <summary>
        /// 窗体最小化
        /// </summary>
        private void MainWindowMin()
        {
            this.WindowState = WindowState.Minimized;
        }
        /// <summary>
        /// 窗体最大化
        /// </summary>
        private void MainWindowMax()
        {
            if (this.WindowState == WindowState.Maximized)
            {
                this.WindowState = WindowState.Normal;
            }
            else
            {
                this.WindowState = WindowState.Maximized;
            }
        }
        /// <summary>
        /// 退出系统
        /// </summary>
        private void AppClose()
        {
            //DataCenter.Instance.Dispose();
            string appName = AppDomain.CurrentDomain.SetupInformation.ApplicationName.Replace(".exe", "");
            foreach (var item in Process.GetProcessesByName(appName))
            {
                item.Kill();
            }
        }


        /// <summary>
        /// 窗体拖拽方法
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DragMoveWindow(object sender, MouseButtonEventArgs e)
        {
            this.WindowState = WindowState.Normal;
            if (e.LeftButton == MouseButtonState.Pressed && this.WindowState != WindowState.Maximized)
            {
                this.DragMove();
            }
        }
    }
}

3、MainViewModel.cs 文件代码如下：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace CommonProject_DeskTop.ViewModel
{
    public class MainViewModel : ObservableObject
    {
        #region 属性
        [ObservableProperty]
        private string dateTimeStr;
        public string DateTimeStr
        {
            get { return dateTimeStr; }
            set { SetProperty(ref dateTimeStr, value); }
        }
        #endregion

        #region 命令
        public RelayCommand<string> ButtonClickCmd { get; set; }
        public RelayCommand<object>MenuClickCmd { get; set; }

        #endregion

        #region 方法



        #region 系统按钮方法
        private void FunMenu(string p)
        {
            switch (p)
            {
                case "最小化":
                    WindowMin();
                    break;
                case "最大化":
                    WindowMax();
                    break;
                case "关闭":
                    AppClose();
                    break;
            }
        }
        private void AppClose()
        {
            WeakReferenceMessenger.Default.Send("MainWindowClose");
        }

        private void WindowMax()
        {
            WeakReferenceMessenger.Default.Send("MainWindowMax");
        }

        private void WindowMin()
        {
            WeakReferenceMessenger.Default.Send("MainWindowMin");
        }
        #endregion

        #region 菜单按钮方法
        private void MenuChange(object obj)
        {
            var menu =obj as ListBoxItem;
            switch (menu.Content.ToString())
            {
                case "首页":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "物资管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "仓库设置":
                    MessageBox.Show(menu.Content.ToString(),"");
                    break;
                case "库位管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "客户管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "供应商管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "物资入库":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "物资出库":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "入库管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
                case "出库管理":
                    MessageBox.Show(menu.Content.ToString(), "");
                    break;
            }
        }
        #endregion

        private void CreateTimer()
        {
            #region 系统时间定时器获取时间数据
            DispatcherTimer cpuTimer = new DispatcherTimer
            {
                Interval = new TimeSpan(0, 0, 0, 1, 0)
            };
            cpuTimer.Tick += DispatcherTimer_Tick;
            cpuTimer.Start();
            #endregion
        }

        private void DispatcherTimer_Tick(object sender, EventArgs e)
        {
            DateTimeStr = DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss");
        }


        #endregion

        public MainViewModel()
        {
            ButtonClickCmd = new RelayCommand<string>(FunMenu);
            MenuClickCmd = new RelayCommand<object>(MenuChange);
            //创建定时器
            CreateTimer();
        }
    }
}

4、SystemButton.xaml 样式文件代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="SystemButtonStyle">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Margin" Value="3 0 3 0"/>
        <Setter Property="Foreground" Value="Gainsboro"/>
        <Setter Property="Tag" Value="#3F3F41"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Name="back">
                        <Border Name="hover" Background="{TemplateBinding Background}" Visibility="Collapsed"/>
                        <TextBlock Text="{TemplateBinding Content}" FontFamily="{DynamicResource iconfont}" 
                                VerticalAlignment="Center" HorizontalAlignment="Center" Name="txt"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" Value="Visible" TargetName="hover"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{Binding Tag,RelativeSource={RelativeSource Mode=Self}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

原文地址：https://blog.csdn.net/qq_21419015/article/details/140448762

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：甄选范文“论系统安全架构设计及其应用”，软考高级论文，系统架构设计师论文
下一篇：网络编程：UDP数据报套接字编程与TCP流套接字编程

前端模拟面试：7个JavaScript数组进阶面试题
你坐在面试室里，对面的面试官微笑着，轻敲着桌面问道：“那我们来聊聊 JavaScript 吧。数组操作你有多熟悉？”你意识到，眼前这个问题看似简单，但面试官可能在考察你对 JavaScript 基础知
阅读更多2024-11-13
Kafka 快速入门（一）
kafka详细的安装、集群部署及关于生产者和消费者的命令
阅读更多2024-11-13
Python模拟A卷选择题
Python模拟A卷选择题
阅读更多2024-11-13
科研绘图系列：R语言差异分析双侧柱状图（grouped barplot）
科研绘图系列：R语言差异分析双侧柱状图（grouped barplot）
阅读更多2024-11-13
消息中间件类型介绍
• 常见的实现有Kafka、RabbitMQ（在特定配置下）、Redis的Pub/Sub功能等。• 流处理平台不仅提供了消息传递的功能，还提供了对流数据进行实时处理和分析的能力。• 消息队列是一种通用
阅读更多2024-11-13
初始化mysql5.7
初始化mysql5.7
阅读更多2024-11-13
Knife4j调试全局对象参数自动化
Knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案，其中具备了在线调试功能，但是在许多场景当中需要在请求头或者请求体当中携带认证信息，这样就会增加调试的繁琐性。所以针
阅读更多2024-11-13
Python、selenium 自动化 - 实现自动上传外部文件
selenium上传文件
阅读更多2024-11-13
深入探索AutoDL平台：深度学习GPU算力最佳选择
在深度学习领域，计算资源是推动研究和开发的重要因素之一。幸运的是，AutoDL作为一款专业的GPU租用平台，正在改变我们获取计算资源的方式。今天，我将为大家详细讲解如何高效利用AutoDL，以及一些实
阅读更多2024-11-13
STM32WB55RG开发(3)----生成 BLE 程序连接手机APP
本项目旨在利用 STM32WB55 微控制器的蓝牙低功耗（BLE）功能，实现与手机 APP 的无线连接。通过配置时钟源、启动关键模块（如 RCC、RTC、RF、IPCC 和 HSEM），以及启用蓝牙功
阅读更多2024-11-13

WPF+Mvvm项目入门完整教程-仓储管理系统（二）

目录

一、搭建一个主界面框架

二、实现步骤

1.主界面区域划分

2.主界面区域实现

相关文章