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