WPF DataGrid 实例：添加行、删除行、序号自增、日期选择、下拉菜单、事件处理

本文介绍如何使用 WPF 的 DataGrid 创建一个表格，该表格支持添加行、删除行，并自动更新行号。表格包含多个列，包括日期选择、下拉菜单、文本框、按钮和图片。示例代码涵盖了 XAML 和 C# 部分，并解释了关键步骤和代码逻辑。

WPF 代码：

<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="序号" Binding="{Binding Number}" />
        <DataGridTemplateColumn Header="开始日期">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <DatePicker SelectedDate="{Binding StartDate}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="结束日期">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <DatePicker SelectedDate="{Binding EndDate}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="电源设备">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="{Binding PowerDevices}" SelectedItem="{Binding SelectedPowerDevice}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="端口号">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="{Binding PortNumbers}" SelectedItem="{Binding SelectedPortNumber}" PreviewMouseLeftButtonDown="OnPortNumberPreviewMouseLeftButtonDown" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="功率瓦数">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="{Binding PowerValues}" SelectedItem="{Binding SelectedPowerValue}" PreviewMouseLeftButtonDown="OnPowerValuePreviewMouseLeftButtonDown" SelectionChanged="OnPowerValueSelectionChanged" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="泵温度" Binding="{Binding PumpTemperature}" />
        <DataGridTextColumn Header="功率值" Binding="{Binding Power}" />
        <DataGridTemplateColumn Header="开关">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="{Binding SwitchText}" Click="OnSwitchButtonClick" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="图片">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding ImagePath}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

C# 代码：

public partial class MainWindow : Window
{
    private ObservableCollection<DataItem> dataItems;

    public MainWindow()
    {
        InitializeComponent();

        dataItems = new ObservableCollection<DataItem>();
        dataGrid.ItemsSource = dataItems;
    }

    private void OnAddButtonClick(object sender, RoutedEventArgs e)
    {
        int number = dataItems.Count + 1;
        dataItems.Add(new DataItem(number));
    }

    private void OnDeleteButtonClick(object sender, RoutedEventArgs e)
    {
        if (dataGrid.SelectedItem != null)
        {
            dataItems.Remove((DataItem)dataGrid.SelectedItem);
        }
    }

    private void OnPortNumberPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        // 获取当前电脑的串口号
        // ...
    }

    private void OnPowerValuePreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        // ...
    }

    private void OnPowerValueSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // ...
    }

    private void OnSwitchButtonClick(object sender, RoutedEventArgs e)
    {
        // ...
    }
}

public class DataItem
{
    public int Number { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public ObservableCollection<string> PowerDevices { get; set; }
    public string SelectedPowerDevice { get; set; }
    public ObservableCollection<string> PortNumbers { get; set; }
    public string SelectedPortNumber { get; set; }
    public ObservableCollection<string> PowerValues { get; set; }
    public string SelectedPowerValue { get; set; }
    public string PumpTemperature { get; set; }
    public string Power { get; set; }
    public string SwitchText { get; set; }
    public string ImagePath { get; set; }

    public DataItem(int number)
    {
        Number = number;
        StartDate = DateTime.Now;
        EndDate = DateTime.Now;
        PowerDevices = new ObservableCollection<string>()
        {
            '设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10',
            '设备11', '设备12', '设备13', '设备14', '设备15', '设备16', '设备17', '设备18', '设备19', '设备20'
        };
        SelectedPowerDevice = '设备1';
        PortNumbers = new ObservableCollection<string>();
        for (int i = 1; i <= 10; i++)
        {
            PortNumbers.Add('COM' + i);
        }
        SelectedPortNumber = 'COM1';
        PowerValues = new ObservableCollection<string>()
        {
            '100瓦', '200瓦', '300瓦', '400瓦', '500瓦', '600瓦', '700瓦', '800瓦', '900瓦', '1000瓦'
        };
        SelectedPowerValue = '100瓦';
        PumpTemperature = "";
        Power = "";
        SwitchText = '开';
        ImagePath = "";
    }
}

示例代码中包含了以下关键内容：

• 使用 DataGrid 创建表格，并通过 AutoGenerateColumns 属性禁用自动生成列。
• 使用 DataGridTextColumn 和 DataGridTemplateColumn 创建表格列，并绑定数据到相应的属性。
• 使用 ComboBox 创建下拉菜单，并绑定数据到相应的属性。
• 使用 DatePicker 创建日期选择器，并绑定数据到相应的属性。
• 使用 Button 创建按钮，并绑定事件到相应的事件处理方法。
• 使用 Image 创建图片，并绑定数据到相应的属性。
• 使用 ObservableCollection 管理数据，并通过 ItemsSource 属性绑定到 DataGrid。
• 使用 C# 代码实现添加行、删除行、更新行号、处理事件等操作。

本文提供的代码示例仅供参考，您可以根据实际需求进行修改和扩展。