C# WPF host computer development (membership recharge software)

In software development, there is a very important control, which is the form. You can imagine that there is a special form-making software in the office software, that is excel. The same is true for the host computer. The data of many databases can be displayed directly on the table, which is very intuitive. At this time, if the customer needs to compare the relevant data year-on-year or month-on-month, then just add a data chart.

In addition, c# wpf unbundles the display and the data itself, that is, program developers only need to pay attention to the data itself and no longer need to pay attention to the display part. At this time, we can choose datagrid to implement this function.

1. Simple recharge software design

The entire software is divided into two parts. The left part is the data input area. Here you can enter First Name, Last Name, Age, Sum. After the input is completed, you can click the Add Person button. The right side is the data display part, which is responsible for displaying all current data. If there is no problem with the entered data, the data will be added to the table on the right.

2. Interface design

The interface design is not complicated. The main thing is to divide it into two columns according to the design idea. The column on the left is responsible for data input, and the column on the right is responsible for data output. You only need to fill in a datagrid on the right side. This part is relatively simple.

On the left side, it needs to be implemented through the stack panel. To put it simply, the stack panel can be divided into 5 rows for layout. Add a stack panel to each row. Each stack panel has two controls, a label on the left and a textbox on the right. The last row is a bit of an exception, it only has one button by itself. In this way, through the stack panel nesting method, we can achieve the interface design we want.

<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. Code design

There are two places to pay attention to in code design. First, we need to design the associated data format, because the data will eventually be uploaded to the datagrid. Second, all data will be pushed into the ObservableCollection variable and finally passed to the ItemSource of the dataGrid.

The last step is to add the button callback function. This part of the content is relatively simple. It uses the method of data parsing. After obtaining the raw data, it is directly added to the ObservableCollection variable to update the interface.

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. Actual usage scenarios

In actual situations, generally all data will not be displayed. For example, only one page will be displayed, or only about 10-20 will be displayed. A better way to handle this part is to operate it in combination with db. It would be a little more troublesome to use code to add, delete, modify and check everything.