wpf - 使用 MVVM，如何从 DataTable 动态生成 W​​PF DataGrid 列并显示按钮列？

Question

我正在尝试从 DataTable 动态生成 DataGrid，同时显示两个用于“编辑”和“删除”功能的按钮列。我可以在 XAML 中手动创建一个按钮列，我可以从 DataTable 动态生成列，但我似乎无法同时做到这两点。如果我只是在代码隐藏中对此进行编码，我认为这将是一个更容易解决的问题，因为我可以直接访问控件。但是，我正在使用 MVVM 构建此 View ，但我想不出一种方法来动态操作 View 到这种详细程度。

这是我的一些代码(请注意，对于 WPF/MVVM 经验比我多的人来说，可能有一些复制/粘贴失败是显而易见的):

XAML:

        <DataGrid   x:Name="grdMapValues"
                    AutoGenerateColumns="True"
                    ItemsSource="{Binding GridSourceDataTable}">
            <DataGrid.Columns>
                <DataGridTemplateColumn IsReadOnly="True">
                    <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button HorizontalAlignment="Left"
                                        Command="{Binding Path=DataContext.Commands.AddMapValue,
                                        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"                                                    
                                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                                    <Image Width="14" Height="14" Source="/Controls;component/Resources/Images/new.gif" ToolTip="New" />
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"                                 
                                        Command="{Binding Path=DataContext.Commands.EditMapValue,
                                        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
                                    <Image Width="14" Height="14" Source="/Controls;component/Resources/Images/edit.gif" />
                                </Button>
                                <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"                                                    
                                        Command="{Binding Path=DataContext.Commands.DeleteMapValue,
                                        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
                                    <Image Width="14" Height="14" Source="/Controls;component/Resources/Images/delete.gif" />
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

View 模型:

private DataTable _gridSource;
public DataTable GridSourceDataTable
{
    get
    {
        return _gridSource;
    }
    set
    {
        _gridSource = value;
        OnPropertyChanged("GridSourceDataTable");
    }
}

private void GenerateDataTable()
{        
    switch (caseInt)
    {
        case 1:
            if (_isDate)
            {
                _gridSource.Columns.Add("Date", typeof(DateTime));
            }
            else
            {
                _gridSource.Columns.Add("Number", typeof(string));
            }
            _gridSource.Columns.Add("Value", typeof(decimal));
            _gridSource.Columns.Add("SourceString", typeof(string));
            GridIsVisible = true;
            break;
        //Other similar case blocks removed
        default:
            GridIsVisible = false;
            break;
    }
    OnPropertyChanged("GridSourceDataTable");
}

所以我猜测如果有解决方案的话，要么涉及 XAML 和 DataTable 属性的某种混合，要么涉及比我的简单 DataTable 更复杂的对象或属性。

我已经为此工作了几个小时，所以如果能提供任何帮助，我将不胜感激。

Answer 1

您可以使用附加行为来实现您正在尝试的目标。您将从附加行为中操作并向网格添加额外的列 - 这意味着您仍在遵循 MVVM 模式。

这是我尝试过的附加行为:

public class DataGridColumnBehavior : Behavior<DataGrid>
{
    public AdditionalColumnsList AdditionalColumns { get; set; }

    protected override void OnAttached()
    {
        base.OnAttached();
        AddAdditionalColumns();
    }

    void AddAdditionalColumns()
    {
        if(AdditionalColumns == null || AdditionalColumns.Count == 0) return;

        foreach (var additionalColumn in AdditionalColumns)
        {
            AssociatedObject.Columns.Add(new DataGridTemplateColumn
            {
                HeaderTemplate = additionalColumn.HeaderTemplate,
                CellTemplate = additionalColumn.CellTemplate
            });
        }
    }
}

我使用了几个简单的类来表示附加列和附加列列表。

public class AdditionalColumn
{
    public DataTemplate HeaderTemplate { get; set; }

    public DataTemplate CellTemplate { get; set; }
}

public class AdditionalColumnsList : List<AdditionalColumn>
{

}

并且，这就是将行为附加到 DataGrid 的方式:

<DataGrid Margin="5" ItemsSource="{Binding GridSource}">
    <i:Interaction.Behaviors>
        <local:DataGridColumnBehavior>
            <local:DataGridColumnBehavior.AdditionalColumns>
                <local:AdditionalColumnsList>
                    <local:AdditionalColumn>
                        <local:AdditionalColumn.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text="Button Header" />
                            </DataTemplate>
                        </local:AdditionalColumn.HeaderTemplate>
                        <local:AdditionalColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="Button" Command="{Binding ButtonCommand}" />
                            </DataTemplate>
                        </local:AdditionalColumn.CellTemplate>
                    </local:AdditionalColumn>
                </local:AdditionalColumnsList>
            </local:DataGridColumnBehavior.AdditionalColumns>
        </local:DataGridColumnBehavior>
    </i:Interaction.Behaviors>
</DataGrid>

以及生成的网格:

阅读此 CodeProject article关于附加行为。

请注意，我在这里使用了混合行为。 This博文讨论了附加行为和混合行为之间的差异。