使用MVVM,如何从DataTable动态生成WPF DataGrid列并显示按钮列?

时间:2013-11-20 03:08:13

标签: wpf xaml mvvm datagrid datatable

我正在尝试从DataTable动态生成DataGrid,同时显示“Edit”和“Delete”功能的两个按钮列。我可以在XAML中手动创建一个按钮列,我可以从DataTable动态生成列,但我似乎无法同时执行这两个操作。如果我只是在代码隐藏中对此进行编码,我认为这将是一个更简单的问题,因为我可以直接访问控件。但是,我正在使用MVVM构建此视图,我无法想到一种方法来动态地操纵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>

视图模型:

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更复杂的对象或属性。

我已经在这个问题上工作了几个小时,所以我们将非常感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:5)

您可以使用附加行为来实现您的目标。您将根据附加行为操作并向网格添加其他列 - 这意味着您仍在遵循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>

结果网格:

enter image description here

阅读此附加行为的CodeProject article

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