C# WPF支付系统

微信公众号：Dotnet9，网站：Dotnet9。问题或建议，请网站留言；
如果您觉得Dotnet9对您有帮助，欢迎赞赏

文章目录

内容目录

实现效果
业务场景
编码实现
本文参考
源码下载

1.实现效果

支持系统主界面

2.业务场景

简单布局

3.编码实现

3.1 添加Nuget库

站长使用 .Net Core 3.1 创建的WPF工程，创建“PointOfSale”解决方案后，需要添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors，上图的效果是使用该控件库实现的，非常强大。

3.2 工程结构

不需要截图，只修改了两个文件，App.xaml添加MD控件样式，MainWindow主窗口实现效果。

3.3 App.xaml引入MD控件样式

<Application x:Class="PointOfSale.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:PointOfSale"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!--PRIMARY-->
            <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#FF999999"/>
            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#333333"/>
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#FF808080"/>
            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#FF4D4D4D"/>
            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
            <!--ACCENT-->
            <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#689f38"/>
            <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3.4 主窗体 MainWindow.xaml

整体布局，看上图加上下面的界面代码，本文基本就是布局，全在这个界面，直接看代码吧，不细说了：

<Window x:Class="PointOfSale.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:PointOfSale"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="销售系统" MinHeight="600" MinWidth="1080" WindowStartupLocation="CenterScreen" WindowState="Maximized" FontFamily="Roboto">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1.5*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Background="#FF363636">
            <Grid Height="150" Background="Gray"/>
            <ListView>
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="ViewDashboard" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="控制面板" VerticalAlignment="Center" Margin="5"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="BoxVariant" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="产品" VerticalAlignment="Center" Margin="5"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="User" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="用户" VerticalAlignment="Center" Margin="5"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Settings" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="设置" VerticalAlignment="Center" Margin="5"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
        </StackPanel>

        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.7*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <StackPanel Margin="10">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="Gray" Text="用户: " FontWeight="Bold"/>
                    <TextBlock Text="ADMIN" Foreground="LightGray" Margin="5 0"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="Gray" Text="现金出纳人: " FontWeight="Bold"/>
                    <TextBlock Text="2019-06-10 06:30AM" Foreground="LightGray" Margin="5 0"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="Gray" Text="现金出纳ID: " FontWeight="Bold"/>
                    <TextBlock Text="5" Foreground="LightGray" Margin="5 0"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Foreground="Gray" Text="顾客: " FontWeight="Bold"/>
                    <TextBlock Text="未选择客户" Foreground="LightGray" Margin="5 0"/>
                </StackPanel>
            </StackPanel>

            <Border Grid.Row="1" BorderBrush="LightGray" BorderThickness="1" Margin="10" CornerRadius="5">
                <ListView Margin="0 0 4 0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListViewItem>
                        <Grid Width="400">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="3*"/>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="3*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="Assets/coke.png" Margin="5"/>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="5">
                                <TextBlock Text="可乐 500ml" Foreground="Gray" FontSize="14"/>
                                <TextBlock Text="99124667764512" Foreground="Gray" FontSize="10"/>
                            </StackPanel>
                            <TextBlock Grid.Column="2" Text="￥ 5.00" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
                            <TextBlock Grid.Column="3" Text="3" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
                            <TextBlock Grid.Column="4" Text="$ 15.00" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
                        </Grid>
                    </ListViewItem>
                </ListView>
            </Border>

            <Grid Grid.Row="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>

                <TextBox Grid.Row="0" Grid.Column="0" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="条形码" Margin="10"/>
                <TextBox Grid.Row="0" Grid.Column="1" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="数量" Margin="10"/>
                <TextBox Grid.Row="0" Grid.Column="2" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="优惠" Margin="10"/>
                <TextBox Grid.Row="0" Grid.Column="3" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="添加" Margin="10"/>
                <Button Grid.Column="1" Content="支付" Grid.Row="1" Grid.ColumnSpan="3" Margin="10" Width="Auto" Height="Auto"/>
            </Grid>

        </Grid>
        <Grid Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="1.5*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
            <materialDesign:ColorZone Margin="5">
                <TextBlock Text="￥ 15.00" FontSize="40" HorizontalAlignment="Center" Margin="20"/>
            </materialDesign:ColorZone>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Grid.Row="1" Margin="5">
                <Grid>
                    <Image Source="Assets/3263.jpg" Margin="10"/>
                </Grid>
            </Border>
            <Grid Grid.Row="2" Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>

                <Button Grid.Column="0" Grid.Row="0" Width="Auto" Height="Auto" Content="7" Margin="5"/>
                <Button Grid.Column="1" Grid.Row="0" Width="Auto" Height="Auto" Content="8" Margin="5"/>
                <Button Grid.Column="2" Grid.Row="0" Width="Auto" Height="Auto" Content="9" Margin="5"/>

                <Button Grid.Column="0" Grid.Row="1" Width="Auto" Height="Auto" Content="4" Margin="5"/>
                <Button Grid.Column="1" Grid.Row="1" Width="Auto" Height="Auto" Content="5" Margin="5"/>
                <Button Grid.Column="2" Grid.Row="1" Width="Auto" Height="Auto" Content="6" Margin="5"/>

                <Button Grid.Column="0" Grid.Row="2" Width="Auto" Height="Auto" Content="1" Margin="5"/>
                <Button Grid.Column="1" Grid.Row="2" Width="Auto" Height="Auto" Content="2" Margin="5"/>
                <Button Grid.Column="2" Grid.Row="2" Width="Auto" Height="Auto" Content="3" Margin="5"/>

                <Button Grid.Column="0" Grid.Row="3" Width="Auto" Height="Auto" Content="清空" Margin="5"/>
                <Button Grid.Column="1" Grid.Row="3" Width="Auto" Height="Auto" Content="0" Margin="5"/>
                <Button Grid.Column="2" Grid.Row="3" Width="Auto" Height="Auto" Content="." Margin="5"/>

                <Button Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="4" Width="Auto" Height="Auto" Content="确定" Margin="5"/>
                <Button Grid.Column="2" Grid.Row="4" Width="Auto" Height="Auto" Content="取消" Margin="5" Style="{StaticResource MaterialDesignFlatButton}"/>
            </Grid>
        </Grid>
    </Grid>
</Window>

4.本文参考

Design com WPF大神的学习视频：：Point Of Sale
开源控件库：MaterialDesignInXamlToolkit
本站对MD开源控件库的介绍：控件介绍

5.代码下载</>

Github：源码地址

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明：
作者：Dotnet9
链接：https://dotnet9.com/6804.html
来源：Dotnet9
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表评论

登录后才能评论

评论列表（5条）

小飞机MLA 2020年1月3日 08:29

我又来学习啦嘻嘻嘻~~~

回复
- Dotnet9 2020年1月3日 14:35
  
  @小飞机MLA：欢迎回来
  
  回复
土豆泥 2020年1月3日 14:31

有没有datagrid+treeview或ListView+treeview的控件？主要是想做一个可视多级菜单列表

回复
- Dotnet9 2020年1月3日 14:36
  
  @土豆泥：自己组合吧
  
  回复
- Dotnet9 2020年1月3日 14:36
  
  @土豆泥：你这头像好给力，还是gif
  
  回复

C# WPF支付系统

内容目录

1.实现效果

2.业务场景

3.编码实现

3.1 添加Nuget库

3.2 工程结构

3.3 App.xaml引入MD控件样式

3.4 主窗体 MainWindow.xaml

4.本文参考

5.代码下载</>

相关推荐

Dragablz-C# WPF可拖拽的TabControl控件

[WPF 自定义控件]﻿Window(窗体)的UI元素及行为

[WPF 自定义控件]自定义控件库系列文章

WPF 自定义雷达图

C# 调用百度地图

C# WPF支付界面（Payment Screen）

发表评论

评论列表（5条）

[WPF 自定义控件]Window(窗体)的UI元素及行为