C# WPF支付系统

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

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

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条)