WPF DataGrid 点击按钮弹窗显示详细信息并填写 - 详细教程

WPF DataGrid 点击按钮弹窗显示详细信息并填写 - 详细教程

本教程详细介绍如何在 WPF DataGrid 中实现点击按钮弹出弹窗显示详细信息的功能，并允许用户进行填写。

1. 在 XAML 中定义 DataGrid 和按钮

在 XAML 中定义一个 DataGrid，并为其中的每一行添加一个按钮，用于弹出详细信息的弹窗。例如：

<DataGrid ItemsSource='{Binding Items}' AutoGenerateColumns='False'>
    <DataGrid.Columns>
        <!-- 其他列定义 -->
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content='详细信息' Click='ShowDetails_Click' />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

2. 在 ViewModel 中定义 Command 处理按钮点击事件

在对应的 ViewModel 中，定义一个 Command 来处理按钮的点击事件，并在点击事件中显示详细信息的弹窗。例如：

public ICommand ShowDetailsCommand { get; set; }

public ViewModel()
{
    ShowDetailsCommand = new RelayCommand(ShowDetails);
}

private void ShowDetails(object obj)
{
    // 获取当前选中的数据项
    var selectedItem = obj as YourDataItemType;

    // 创建并显示详细信息的弹窗
    var detailsWindow = new DetailsWindow(selectedItem);
    detailsWindow.ShowDialog();
}

3. 创建新的 Window 显示详细信息和填写控件

创建一个新的 Window，用于显示详细信息，并在该窗口中添加需要填写的控件。例如：

<Window x:Class='YourNamespace.DetailsWindow'
        <!-- 省略其他属性定义 -->
        >
    <StackPanel>
        <!-- 显示数据项的详细信息的控件 -->
        <TextBlock Text='{Binding SelectedItem.Name}' />
        <TextBlock Text='{Binding SelectedItem.Age}' />
        
        <!-- 其他需要填写的控件 -->
        <TextBox Text='{Binding OtherProperty}' />
        
        <!-- 确认按钮 -->
        <Button Content='确认' Click='Confirm_Click' />
    </StackPanel>
</Window>

4. 在 DetailsWindow 代码-behind 中处理确认按钮点击事件

在 DetailsWindow 的代码-behind 中，为确认按钮的点击事件编写逻辑，将填写的信息传回到 ViewModel 中，并关闭窗口。例如：

private void Confirm_Click(object sender, RoutedEventArgs e)
{
    // 获取填写的信息
    var otherProperty = OtherPropertyTextBox.Text;

    // 将填写的信息传回到 ViewModel 中
    var viewModel = DataContext as YourViewModelType;
    viewModel.OtherProperty = otherProperty;

    // 关闭窗口
    Close();
}

这样，当在 DataGrid 中点击按钮时，会弹出详细信息的弹窗，可以进行填写并确认，填写的信息会传回到 ViewModel 中进行处理。