C# WPF上位机开发（会员充值软件）

在软件开发中，有一种很重要的控件，那就是表格。大家可以想象下，办公软件里面是不是就有一个专门做表格的软件，那就是excel。对于上位机来说也是一样，很多数据库的数据本身就可以直接放在表格上面显示，非常直观。这个时候，如果客户需要把相关的数据进行同比、环比比较，那么再加一个data chart就可以了。

此外，c# wpf把显示和数据本身做了解绑，即程序开发人员只需要关注数据本身，不再需要关注显示的部分。这个时候，我们可以选择datagrid来实现这个功能。

1、简单充值软件设计

整个软件分成两个部分，左边的部分就是数据输入区域。这里可以输入First Name、Last Name、Age、Sum。输入结束之后，可以点击Add Person这个按钮。右边是数据显示部分，这里就是负责显示当前所有的数据。如果输入的数据没有问题的话，那么数据就会添加到右侧的表格当中。

2、界面设计

界面设计也不复杂，主要就是根据设计的思路，分成两个column。左边的column负责数据输入，右边的column负责数据输出。右侧只需要填充一个datagrid就可以，这部分比较简单。

左侧的话则需要通过stack panel来实现。简单来说，stack panel可以先分成5行来布局。每一行再增加一个stack panel，每一个stack panel里面有两个控件，左边是label，右边是textbox。最后一行有点例外，它本身只有一个button。这样通过stack panel嵌套的方法，就可以实现我们想得到的界面设计了。

复制代码

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="ChargeSoftware" Height="280" Width="450">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- Left side with input fields and button -->
        <StackPanel Orientation="Vertical" Margin="10" Grid.Column="0">
            <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
                <TextBlock Text="First Name:" Width="65" Margin="0,0,10,0"/>
                <TextBox x:Name="txtFirstName"  Width="60"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
                <TextBlock Text="Last Name:"  Width="65" Margin="0,0,10,0"/>
                <TextBox x:Name="txtLastName"  Width="60"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
                <TextBlock Text="Age          :" Width="65" Margin="0,0,10,0"/>
                <TextBox x:Name="txtAge" Width="60"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,5">
                <TextBlock Text="Sum         :" Width="65" Margin="0,0,10,0"/>
                <TextBox x:Name="txtSum" Width="60"/>
            </StackPanel>
            <Button Content="Add Person" Click="AddPerson_Click" Height="35" Width="70" HorizontalAlignment="Left" Margin="30,10,0,10"/>
        </StackPanel>

        <!-- Right side with DataGrid -->
        <DataGrid x:Name="dataGrid" AutoGenerateColumns="True" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Margin="0,0,10,0"/>
    </Grid>
</Window>

3、代码设计

代码设计中有两个地方需要注意。第一，我们需要设计一下关联的数据格式，因为这些数据最终是要被上传到datagrid里面的。第二，所有的数据都会被压入到ObservableCollection变量里面，最后传给dataGrid的ItemSource里面。

最后就是添加按钮回调函数。这部分内容就相对简单多了，它本身就是通过数据解析的方法，获取到裸数据之后，直接添加到ObservableCollection变量里面来更新界面的。

复制代码

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.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;

using System.Collections.ObjectModel;

namespace WpfApp
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {

        public ObservableCollection<Person> People;

        public MainWindow()
        {
            InitializeComponent();

            // Sample data
            People = new ObservableCollection<Person>
            {
                new Person { FirstName = "John", LastName = "Doe", Age = 30, Sum=1000 },
                new Person { FirstName = "Jane", LastName = "Smith", Age = 25, Sum=200 },
                new Person { FirstName = "Bob", LastName = "Johnson", Age = 40, Sum=5000 }
            };

            // Set the data context for the DataGrid
            dataGrid.ItemsSource = People;
        }

        private void AddPerson_Click(object sender, RoutedEventArgs e)
        {
            // Retrieve values from TextBoxes
            string firstName = txtFirstName.Text;
            string lastName = txtLastName.Text;

            if (int.TryParse(txtAge.Text, out int age) && int.TryParse(txtSum.Text, out int sum))
            {
                // Add a new person to the collection
                People.Add(new Person { FirstName = firstName, LastName = lastName, Age = age, Sum=sum });

                // Clear TextBoxes after adding
                txtFirstName.Clear();
                txtLastName.Clear();
                txtAge.Clear();
                txtSum.Clear();
            }
            else
            {
                MessageBox.Show("Please enter a valid age.", "Invalid Age", MessageBoxButton.OK, MessageBoxImage.Warning);
            }
        }

        public class Person
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public int Age { get; set; }
            public int Sum { get; set; }
        }
    }
}

4、实际使用场景

实际情况下一般数据不会全部显示，比如只显示一页，或者说只显示10-20个左右。这部分比较好的处理方式是结合db来进行操作。全部用代码去增删改查的话，稍微麻烦点。