WPF&C#超市管理系统（6）订单详情、顾客注册、商品销售排行查询和库存提示、LiveChat报表

10. 订单详情

10.1 页面布局

• 页面分三行布置，第一行复用OutstorageView界面的第一行，将属性和命令修改为顾客相关
• 第二行复用CustomerOrderView页面内展示内容，并设置订单初始化
• 第三行为Order增加销售总额 和订单数量 两个属性

<UserControl x:Class="超市管理系统.View.OrderDetailView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:超市管理系统.View" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d" 
             Background="{Binding AppData.Background}"
             DataContext="{Binding Source={StaticResource Locator}, Path=OrderDetailViewModel}"
             d:DesignHeight="450" d:DesignWidth="800">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName ="Loaded">
            <i:InvokeCommandAction Command="{Binding LoadedCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border BorderBrush="#22304B" BorderThickness="0 0 0 1">
            <TextBlock Text="商品管理" VerticalAlignment="center" Margin="5 0 0 0" Foreground="{Binding AppData.Foreground}" FontSize="16"/>
        </Border>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Grid>
                <StackPanel Orientation="Horizontal" Margin="0 5 0 5">
                    <TextBlock Text="选择顾客" VerticalAlignment="Center" Foreground="White" Margin="5 0 5 0"/>
                    <ComboBox VerticalContentAlignment="Center" MinWidth="100" MaxWidth="200" Margin="5 0 5 0" Height="25"
                          ItemsSource="{Binding CustomerList }"
                          SelectedItem="{Binding SelectedCustomer}" 
                          DisplayMemberPath="Name"/>
                    <Button Content="查询" Command="{Binding SelectCommand}"  Width="80" Margin="0 0 10 0" Height="25"/>
                    <Button Content="全部" Command="{Binding SearchCommand}"  Width="80" Margin="0 0 10 0" Height="25"/>

                </StackPanel>
            </Grid>
            <ScrollViewer Grid.Row="1">
                <ItemsControl ItemsSource="{Binding OrderList}" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="#505B70" BorderThickness="1" Margin="10">
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Border Grid.Row="0" Height="30" Background="#505B70">
                                        <Grid>
                                            <TextBlock  HorizontalAlignment="Left" VerticalAlignment="Center">
                                                <Run Text="  顾客姓名："/>
                                                <Run Text="{Binding CustomerName, Mode=OneWay}" Foreground="White"/>
                                                <Run Text="  订单号："/>
                                                <Run Text="{Binding SN}" Foreground="White"/>
                                                <Run Text="  状态："/>
                                                <Run Text="{Binding OrderState}" Foreground="White"/>
                                                <Run Text="  支付时间："/>
                                                <Run Text="{Binding PayDate}" Foreground="White"/>
                                                <Run Text="  总金额："/>
                                                <Run Text="{Binding SumPrice }" Foreground="White"/>
                                            </TextBlock>
                                        </Grid>
                                    </Border>
                                    <Border Grid.Row="1">
                                        <DataGrid ItemsSource="{Binding Children}" Style="{StaticResource DataGridStyle}">
                                            <DataGrid.Columns>
                                                <!--数据模板写法-->


                                                <DataGridTemplateColumn Width="auto" Header="商品名称">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <TextBox Text="{Binding ProductTitle, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}"/>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                </DataGridTemplateColumn>

                                                <DataGridTemplateColumn Width="auto" Header="商品图片">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <Image Source="{Binding BitmapImage}" >
                                                                    <Image.ToolTip>
                                                                        <Grid>
                                                                            <Image Source="{Binding BitmapImage}"/>
                                                                        </Grid>
                                                                    </Image.ToolTip>
                                                                </Image>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                </DataGridTemplateColumn>

                                                <DataGridTemplateColumn Width="auto" Header="单价">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <TextBox Text="{Binding Price, Mode=OneWay, UpdateSourceTrigger=LostFocus}" Style="{StaticResource DataGridTextBoxStyle}" HorizontalAlignment="Left"/>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                </DataGridTemplateColumn>
                                                <DataGridTemplateColumn Width="auto" Header="数量">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <TextBox Text="{Binding QuantityEx, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}" HorizontalAlignment="Left"/>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                </DataGridTemplateColumn>

                                                <DataGridTemplateColumn Width="auto" Header="日期">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <TextBox Text="{Binding InsertDate, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}" HorizontalAlignment="Left"/>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                </DataGridTemplateColumn>
                                            </DataGrid.Columns>
                                        </DataGrid>
                                    </Border>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Margin="0 5 5 5" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <TextBlock Text="销售金额："  Margin="0 0 0 0" Foreground="White" Width="auto" />
                    <TextBlock Text="{Binding SumMoney, StringFormat={}{0:C}}" Foreground="White"  Width="auto"/>
                    <TextBlock Text="订单数量："  Margin="10 0 10 0" Foreground="White" Width="auto" />
                    <TextBlock Text="{Binding SumOrderCount}" Foreground="White"  Width="auto"/>
                </StackPanel>

                <StackPanel Grid.Column="1"  Margin="0 5 5 5" Orientation="Horizontal" HorizontalAlignment="Right">
                    <!--<Button Content="删除" Command="{Binding DeleteCommand}" Margin="0 0 10 0" Width="80" Height="25" />-->
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</UserControl>

10.2 功能实现

using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using 超市管理系统.Entity.Model;
using 超市管理系统.Entity;
using System.Collections.ObjectModel;

namespace 超市管理系统.ViewModel
{
    public class OrderDetailViewModel : ViewModelBase2
    {
        public static OrderDetailProvider orderDetailProvider = new OrderDetailProvider();

        private List<Customer> customerList = new List<Customer>();
        public List<Customer> CustomerList
        {
            get { return customerList; }
            set
            {
                customerList = value;
                RaisePropertyChanged();
            }
        }
        //当前选中的顾客实体
        private Customer selectedCustomer;
        public Customer SelectedCustomer
        {
            get { return selectedCustomer; }
            set
            {
                selectedCustomer = value;
                RaisePropertyChanged();
            }
        }
        private ObservableCollection<Order> orders = new ObservableCollection<Order>();

        public ObservableCollection<Order> OrderList
        {
            get { return orders; }
            set { orders = value; RaisePropertyChanged(); }
        }

        private double sumMoney;
        /// <summary>
        /// 扩展属性，合计金额
        /// </summary>
        public double SumMoney
        {
            get { return sumMoney; }
            set
            {
                sumMoney = value; RaisePropertyChanged();
            }
        }
        private double sumOrderCount;
        /// <summary>
        /// 扩展属性，合计数量
        /// </summary>
        public double SumOrderCount
        {
            get { return sumOrderCount; }
            set
            {
                sumOrderCount = value; RaisePropertyChanged();
            }
        }
        
        #region commands
        /// <summary>
        /// 加载所有记录
        /// </summary>
        public RelayCommand<UserControl> LoadedCommand
        {
            get
            {
                return new RelayCommand<UserControl>((view) =>
                {
                    CustomerList = CustomerViewModel.customerProvider.GetAll();
                    SelectedCustomer = null;

                    InitOrder();
                });
            }
        }

        /// <summary>
        /// 加载所选顾客订单详情
        /// </summary>
        public RelayCommand<UserControl> SelectCommand
        {
            get
            {
                return new RelayCommand<UserControl>((view) =>
                {
                    if (selectedCustomer == null) return;
                    InitOrder(selectedCustomer);
                });
            }
        }

        //查询所有顾客订单
        public RelayCommand<UserControl> SearchCommand
        {
            get
            {
                return new RelayCommand<UserControl>((view) =>
                {
                    InitOrder();
                });
            }
        }

        #endregion

        public void InitOrder(Customer customer = null)
        {
            SumMoney = 0;
            SumOrderCount = 0;
            if (customer == null)
            {
                var _orders = OrderViewModel.orderProvider.GetAll().Where(t => t.OrderState == OrderState.已完成.ToString()).ToList();
                if (_orders != null)
                {
                    OrderList.Clear();
                    foreach (var order in _orders)
                    {
                        OrderList.Add(order);

                        var details = OrderDetailViewModel.orderDetailProvider.GetAll().Where(t => t.OrderId == order.Id);
                        if (details != null)
                        {
                            order.Children.Clear();
                            foreach (var detail in details)
                            {
                                order.Children.Add(detail);
                                order.SumPrice += (double)(detail.Price * detail.QuantityEx);
                            }
                        }
                        SumMoney += (double)order.Children.Sum(t => t.QuantityEx * t.Price);
                    }
                    SumOrderCount += _orders.Count;
                }
            }
            else
            {
                var _orders = OrderViewModel.orderProvider.GetAll().Where(t => t.CustomerId == selectedCustomer.Id && t.OrderState == OrderState.已完成.ToString()).ToList();
                if (_orders != null)
                {
                    OrderList.Clear();
                    foreach (var order in _orders)
                    {
                        OrderList.Add(order);

                        var details = OrderDetailViewModel.orderDetailProvider.GetAll().Where(t => t.OrderId == order.Id);
                        if (details != null)
                        {
                            order.Children.Clear();
                            foreach (var detail in details)
                            {
                                order.Children.Add(detail);
                                order.SumPrice += (double)(detail.Price * detail.QuantityEx);
                            }
                        }
                        SumMoney += (double)order.Children.Sum(t => t.QuantityEx * t.Price);
                    }
                    SumOrderCount += _orders.Count;
                }
            }
        }
    }
}

11. 顾客注册

• 修改LoginView，增加注册按钮，绑定打开注册窗口命令

</StackPanel>
    <Button x:Name="Register" Command="{Binding RegisterCommand}"
            CommandParameter="{Binding ElementName=loginView}" 
            Content="注册" Width="150" Height="25" Margin="30 10 0 0"/>
</StackPanel>

public RelayCommand<LoginView> RegisterCommand
{
    get
    {
        //传入参数CommandParameter
        return new RelayCommand<LoginView>((view) =>
        {
            view.Hide();
            new SignUpView().ShowDialog();
            view.Show();
        });
    }
}

• 新增SignUpView和SignUpViewModel，复用AddCustomerView和AddCustomerViewModel的界面和功能，实现如下

<Window x:Class="超市管理系统.View.SignUpView"
        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:超市管理系统.View"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        DataContext="{Binding Source={StaticResource Locator}, Path=SignUpViewModel}"
        Title="SignUpView" Height="450" Width="800">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName ="Loaded">
            <i:InvokeCommandAction Command="{Binding LoadedCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Height="50" Background="{Binding AppData.Background}">
            <!--TextBlock设置height时，VerticalAlignment不生效，此地设置给grid-->
            <TextBlock Text="尊敬的顾客，欢迎您注册馒头超市" FontSize="24" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
        <StackPanel Grid.Row="1" Margin="10" HorizontalAlignment="Center" Width="500">
            <StackPanel Orientation="Horizontal" Height="30" Margin="0 5 0 10">
                <TextBlock Text="姓名：" Width="100" FontSize="18" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Customer.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200" Height="30" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="30" Margin="0 5 0 10">
                <TextBlock Text="密码：" Width="100" FontSize="18" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Customer.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200" Height="30" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="30" Margin="0 5 0 10">
                <TextBlock Text="电话：" Width="100" FontSize="18" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Customer.Telephone, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="200" Height="30" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="30" Margin="0 5 0 10">
                <TextBlock Text="地址：" Width="100" FontSize="18" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Customer.Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="250" Height="30" VerticalAlignment="Center"/>
            </StackPanel>
        </StackPanel>

        <StackPanel Grid.Row="2" Margin="10" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Name="button1" Content="新增" Command="{Binding AddCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Margin="10" Width="60" Height="25"/>
            <Button x:Name="button2" Content="关闭" Command="{Binding ExitCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" Margin="10"  Width="60" Height="25"/>
        </StackPanel>
    </Grid>
</Window>

using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using 超市管理系统.Entity;

namespace 超市管理系统.ViewModel
{
    public class SignUpViewModel:ViewModelBase2
    {
        private Customer customer;
        public Customer Customer
        {
            get { return customer; }
            set
            {
                customer = value;
                RaisePropertyChanged();
            }
        }

        public RelayCommand<Window> LoadedCommand
        {
            get
            {
                return new RelayCommand<Window>((view) =>
                {
                    Customer = new Customer();
                });
            }
        }

        public RelayCommand<Window> AddCommand
        {
            get
            {
                return new RelayCommand<Window>((view) =>
                {
                    if (string.IsNullOrEmpty(Customer.Name))
                    {
                        MessageBox.Show("姓名不能为空！");
                        return;
                    }
                    if (string.IsNullOrEmpty(Customer.Password))
                    {
                        MessageBox.Show("密码不能为空！");
                        return;
                    }

                    Customer.InsertDate = DateTime.Now;
                    int count = CustomerProvider.Current.Insert(Customer);
                    if (count > 0)
                    {
                        MessageBox.Show("注册成功！");
                    }
                    view.DialogResult = true;
                    view.Close();
                });
            }
        }

        public RelayCommand<Window> ExitCommand
        {
            get
            {
                return new RelayCommand<Window>((view) =>
                {
                    view.Close();
                });
            }
        }
    }
}

12. 商品销售排行查询与库存提示

• 在管理员登录的首页展示商品的销售排行榜和库存榜。
• 销售排行榜采用datagrid控件按数量从大到小排序。库存提示榜采用listbox控件，对库存不足商品提示。
• 界面布局设计如下：

<UserControl x:Class="超市管理系统.View.IndexView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:超市管理系统.View" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d" 
             Background="{Binding AppData.Background}"
             DataContext="{Binding Source={StaticResource Locator}, Path=IndexViewModel}"
             d:DesignHeight="450" d:DesignWidth="800">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName ="Loaded">
            <i:InvokeCommandAction Command="{Binding LoadedCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition/>
        </Grid.RowDefinitions>
        <Border BorderBrush="#22304B" BorderThickness="0 0 0 1">
            <TextBlock Text="首页" VerticalAlignment="center" Margin="5 0 0 0" Foreground="{Binding AppData.Foreground}" FontSize="16"/>
        </Border>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <!--销售排行榜-->
            <Border BorderThickness="1" BorderBrush="Gray" Grid.Column="0" Margin="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Border BorderThickness="0 0 0 1" BorderBrush="Gray">
                        <TextBlock Text="销售排行榜" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="20"/>
                    </Border>
                    <DataGrid Grid.Row="1" Margin="5" Style="{StaticResource DataGridStyle}"
                              ItemsSource="{Binding SaleList}">
                        <DataGrid.Columns>
                            <!--数据模板写法-->
                            <DataGridTemplateColumn Width="auto" Header="商品ID">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding ProductId,Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>

                            <DataGridTemplateColumn Width="auto" Header="商品名称">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding ProductName, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>

                            <DataGridTemplateColumn Width="auto" Header="数量">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding Quantity, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
                            
                            <DataGridTemplateColumn Width="auto" Header="单位">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding Unit, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource DataGridTextBoxStyle}"/>
                                        </Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>

                            <DataGridTemplateColumn Width="auto" Header="商品图片">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Image Source="{Binding BitmapImage}" >
                                                <Image.ToolTip>
                                                    <Grid>
                                                        <Image Source="{Binding BitmapImage}"/>
                                                    </Grid>
                                                </Image.ToolTip>
                                            </Image>
                                        </Grid>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
                        </DataGrid.Columns>
                    </DataGrid>
                </Grid>
            </Border>
            
            <!--库存提示榜-->
            <Border BorderThickness="1" BorderBrush="Gray" Grid.Column="1" Margin="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Border BorderThickness="0 0 0 1" BorderBrush="Gray">
                        <TextBlock Text="库存提示" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="20"/>
                    </Border>
                    <ListBox Grid.Row="1" ItemsSource="{Binding ProductList}" Style="{StaticResource ListBoxStyle}" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border CornerRadius="5" Width="auto" Height="70" BorderThickness="1" BorderBrush="Gray" >
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="Background" Value="#ebeff5"/>
                                                </Trigger>
                                                <Trigger Property="IsMouseOver" Value="False">
                                                    <Setter Property="Background" Value="White"/>
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                            <ColumnDefinition Width="30"/>
                                            <ColumnDefinition Width="350"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Border Grid.Column="0" Width="5" Background="blue"/>
                                        <TextBlock Grid.Column="1" Text="&#xf05a;" FontFamily="/Fonts/#FontAwesome" FontSize="20" Foreground="red" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5"/>
                                        <StackPanel Grid.Column="2">
                                            <TextBlock Text="提示" FontSize="20" FontWeight="Bold" Margin="5 10 0 0"/>
                                            <TextBlock VerticalAlignment="Center" >
                                                <Run>当前</Run>
                                                <Run Text="{Binding Name}" FontSize="14" Foreground="Red" />
                                                <Run Text="的库存为"/>
                                                <Run Text="{Binding Quantity}" FontSize="14" Foreground="Red"/>
                                            </TextBlock>
                                        </StackPanel>
                                        <Image Grid.Column="3" Source="{Binding BitmapImage}" Margin="5" >
                                            <Image.ToolTip>
                                                <Grid>
                                                    <Image Source="{Binding BitmapImage}"/>
                                                </Grid>
                                            </Image.ToolTip>
                                        </Image>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</UserControl>

• 功能代码如下：

using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data.SqlTypes;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;
using 超市管理系统.Entity;
using 超市管理系统.Entity.Model;

namespace 超市管理系统.ViewModel
{
    public class IndexViewModel : ViewModelBase2
    {
        //所有出库记录
        private List<StockRecord> stockRecordList = new List<StockRecord>();
        public List<StockRecord> StockRecordList
        {
            get { return stockRecordList; }
            set
            {
                stockRecordList = value;
                RaisePropertyChanged();
            }
        }

        //销售排行榜
        private ObservableCollection<StockRecord> saleList =new ObservableCollection<StockRecord>() ;
        public ObservableCollection<StockRecord> SaleList
        {
            get { return saleList; }
            set
            {
                saleList = value;
                RaisePropertyChanged();
            }
        }
        
        //库存提示
        private ObservableCollection<Product> productList = new ObservableCollection<Product>();
        public ObservableCollection<Product> ProductList
        {
            get { return productList; }
            set
            {
                productList = value;
                RaisePropertyChanged();
            }
        }

        public RelayCommand<UserControl> LoadedCommand
        {
            get
            {
                return new RelayCommand<UserControl>((view) =>
                {
                    //销售排行榜
                    StockRecordList = InstorageViewModel.stockRecordProvider.GetAll().Where(t => t.Type == StockType.出库.ToString()).ToList();

                    var group = StockRecordList.GroupBy(t => t.ProductId);
                    foreach (var list in group)
                    {
                        StockRecord stock = new StockRecord();
                        stock.Quantity = 0;
                        foreach (var item in list)
                        {
                            stock.ProductId = item.ProductId;
                            stock.Type = item.Type;
                            stock.Quantity += item.Quantity;
                        }
                        SaleList.Add(stock);
                    }
                    var tmpSaleList = SaleList.OrderByDescending(t => t.Quantity).ToList();
                    SaleList.Clear();
                    tmpSaleList.ForEach(t => SaleList.Add(t));

                    //库存提示
                    var tmpProductList = ProductViewModel.productProvider.GetAll().Where(t => t.Quantity <= 100).ToList();
                    ProductList.Clear();
                    tmpProductList.ForEach(t => ProductList.Add(t));
                });
            }
        }
    }
}

• 其中库存提示榜设计了Border的style添加在App.xaml中。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ListBoxStyle" TargetType="ListBox">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

14. LiveChart报表

• 可以采用Nuget中LiveChart.wpf创建报表。参考链接https://livecharts.dev/docs/wpf/2.0.0-rc5.4/gallery
• 以产品月份销售数量趋势图和销售柱状图为例，展示如下：

 <!--销售走势-->
 <wpf:CartesianChart Grid.Row="0" Grid.Column="0" Series="{Binding SeriesCollection}" Margin="5">
     <wpf:CartesianChart.AxisX>
         <wpf:Axis Labels="{Binding ColumnXLabels}" Title="月度销售额统计"></wpf:Axis>
     </wpf:CartesianChart.AxisX>
 </wpf:CartesianChart>

 <wpf:CartesianChart Grid.Row="0" Grid.Column="1"  Series="{Binding ColunmSeriesCollection}" Margin="5" LegendLocation="Right">
     <wpf:CartesianChart.AxisX>
         <wpf:Axis Labels="{Binding ColumnXLabels}" Title="商品销售对比柱状图"></wpf:Axis>
     </wpf:CartesianChart.AxisX>
     <wpf:CartesianChart.AxisY>
         <wpf:Axis></wpf:Axis>
     </wpf:CartesianChart.AxisY>
 </wpf:CartesianChart>

//销售走势
private SeriesCollection seriesCollection;
public SeriesCollection SeriesCollection
{
    get { return seriesCollection; }
    set
    {
        seriesCollection = value;
        RaisePropertyChanged();
    }
}

private SeriesCollection colunmSeriesCollection ;
public SeriesCollection ColunmSeriesCollection
{
    get { return colunmSeriesCollection; }
    set
    {
        colunmSeriesCollection = value;
        RaisePropertyChanged();
    }
}
private List<string> columnXLabels = new List<string>();
public List<string> ColumnXLabels
{
    get { return columnXLabels; }
    set
    {
        columnXLabels = value;
        RaisePropertyChanged();
    }
}

    public RelayCommand<UserControl> LoadedCommand
    {
        get
        {
            return new RelayCommand<UserControl>((view) =>
            {
                //销售走势
                LineSeries mylineseries = new LineSeries();
                mylineseries.Title = "销售走势";
             
                double[] mynum = { 1, 3, 1, 6, 2, 9, 4 };
                mylineseries.Values = new ChartValues<double>(mynum);
                SeriesCollection = new SeriesCollection { mylineseries };

                //商品销售对比柱状图
                List<double> columnValues = new List<double> ();
                foreach (var item in SaleList)
                {
                    ColumnXLabels.Add(item.ProductName);
                    columnValues.Add((double)item.Quantity);
                }
                
                ColumnSeries colunmseries = new ColumnSeries();
                colunmseries.DataLabels = true;
                colunmseries.Title = "";
                colunmseries.Values = new ChartValues<double>(columnValues);
                ColunmSeriesCollection = new SeriesCollection { colunmseries };
            });
        }
    }
}

总结

资源下载：https://download.csdn.net/download/lzt1027/91693079