使用 WPF 和 MVVM 动态创建行和列

Question

注意：我正在使用 MVVM Light Toolkit 和 MahApps.Metro。

我已经检查了答案，但似乎其中任何一个都与我的问题无关。

我有一个 Grid，它的列和标题应该是动态创建的。列数和值无法查看，行数无法查看。

列、行和行中的数据代表一个数据库表。所有数据都存在于 ViewModel 中。

我的 ViewModel 中有一个 ObservableCollection<ServerRow> ServerRows;。

Server Row 对象是一个如下所示的模型：

    public class ServerRow : ObservableObject
    {
         private ObservableCollection<ServerColumn> _columns;

         public ObservableCollection<ServerColumn> Columns
         {
             get { return _columns; }
             set { Set(() => Columns, ref _columns, value); }
         }
     }

这是一个ServerColumn 类：

    public class ServerColumn : ObservableObject
    {
         private string _name;
         private string _type;
         private string _value;

         public string Name
         {
             get { return _name; }
             set { Set(() => Name, ref _name, value); }
         }

         public string Type
         {
             get { return _type; }
             set { Set(() => Type, ref _type, value); }
         }

         public string Value
         {
             get { return _value; }
             set { Set(() => Value, ref _value, value); }
         }
}

想法是将DataGrid绑定到ObservableCollection<ServerRow> ServerRows;，然后根据ServerRow对象生成列，该对象具有ServerColumns，而Name（应该是列的标题），@987654331 @ 为列数据的数据类型，Value 为每行/列应表示的值。

我的 XAML 非常简单（因为它不完整，当然 - 不工作）

<DataGrid AutoGenerateColumns="True" ItemsSource="{Binding ServerRows}"/>

如何正确编写 XAML 以实现我想要做的事情？

这是结果，这是有道理的，因为 Grid 试图在单个 Column 中显示对象集合并调用其 ToString() 方法。

Answer 1

我以前也遇到过这个问题。

如果你看看这里做了什么：

https://github.com/taori/WMPR/blob/0a81bc6a6a4c6fc36edc4cbc99f0cfa8a2b8871c/src/WMPR/WMPR.Client/ViewModels/Sections/ReportEvaluationViewModel.cs#L503

当底层结构实际上是 DynamicGridCell 类型时，您将可迭代集合提供为 ObservableCollection<object>，它使用可在

找到的 DynamicGridCellDescriptor

动态网格单元：

public class DynamicGridCell : DynamicObject, ICustomTypeDescriptor, IDictionary<string, object>
{
    private readonly Dictionary<string, object> _values = new Dictionary<string, object>();

    AttributeCollection ICustomTypeDescriptor.GetAttributes()
    {
        return new AttributeCollection();
    }

    string ICustomTypeDescriptor.GetClassName()
    {
        return nameof(DynamicGridCell);
    }

    string ICustomTypeDescriptor.GetComponentName()
    {
        return null;
    }

    TypeConverter ICustomTypeDescriptor.GetConverter()
    {
        return null;
    }

    EventDescriptor ICustomTypeDescriptor.GetDefaultEvent()
    {
        return null;
    }

    PropertyDescriptor ICustomTypeDescriptor.GetDefaultProperty()
    {
        return null;
    }

    object ICustomTypeDescriptor.GetEditor(Type editorBaseType)
    {
        return null;
    }

    EventDescriptorCollection ICustomTypeDescriptor.GetEvents()
    {
        return null;
    }

    EventDescriptorCollection ICustomTypeDescriptor.GetEvents(Attribute[] attributes)
    {
        return null;
    }

    private PropertyDescriptor[] CreatePropertyDescriptors()
    {
        var result = new List<PropertyDescriptor>();
        foreach (var pair in _values)
        {
            result.Add(new DynamicGridCellDescriptor(pair.Key));
        }

        return result.ToArray();
    }

    PropertyDescriptorCollection ICustomTypeDescriptor.GetProperties()
    {
        var result = new PropertyDescriptorCollection(CreatePropertyDescriptors());
        return result;
    }

    PropertyDescriptorCollection ICustomTypeDescriptor.GetProperties(Attribute[] attributes)
    {
        var result = new PropertyDescriptorCollection(CreatePropertyDescriptors());
        return result;
    }

    object ICustomTypeDescriptor.GetPropertyOwner(PropertyDescriptor pd)
    {
        return this;
    }

    public IEnumerator GetEnumerator()
    {
        return _values.GetEnumerator();
    }

    IEnumerator<KeyValuePair<string, object>> IEnumerable<KeyValuePair<string, object>>.GetEnumerator()
    {
        return _values.GetEnumerator();
    }

    void ICollection<KeyValuePair<string, object>>.Add(KeyValuePair<string, object> item)
    {
        _values.Add(item.Key, item.Value);
    }

    void ICollection<KeyValuePair<string, object>>.Clear()
    {
        _values.Clear();
    }

    bool ICollection<KeyValuePair<string, object>>.Contains(KeyValuePair<string, object> item)
    {
        return _values.Contains(item);
    }

    void ICollection<KeyValuePair<string, object>>.CopyTo(KeyValuePair<string, object>[] array, int arrayIndex)
    {
    }

    bool ICollection<KeyValuePair<string, object>>.Remove(KeyValuePair<string, object> item)
    {
        if (_values.ContainsKey(item.Key))
        {
            _values.Remove(item.Key);
            return true;
        }

        return false;
    }

    public int Count => _values.Count;

    bool ICollection<KeyValuePair<string, object>>.IsReadOnly => false;

    public bool ContainsKey(string key)
    {
        return _values.ContainsKey(key);
    }

    public void Add(string key, object value)
    {
        _values.Add(key, value);
    }

    bool IDictionary<string, object>.Remove(string key)
    {
        return _values.Remove(key);
    }

    public bool TryGetValue(string key, out object value)
    {
        return _values.TryGetValue(key, out value);
    }

    public object this[string key]
    {
        get { return _values[key]; }
        set
        {
            if (_values.ContainsKey(key))
            {
                _values[key] = value;
            }
            else
            {
                _values.Add(key, value);
            }
        }
    }

    public ICollection<string> Keys => _values.Keys;
    public ICollection<object> Values => _values.Values;
}

动态网格单元描述符

public class DynamicGridCellDescriptor : PropertyDescriptor
    {
        public DynamicGridCellDescriptor(string name) : base(name, null)
        {
        }

        public override bool CanResetValue(object component)
        {
            return true;
        }

        public override object GetValue(object component)
        {
            return ((DynamicGridCell) component)[Name];
        }

        public override void ResetValue(object component)
        {
            ((DynamicGridCell) component)[Name] = null;
        }

        public override void SetValue(object component, object value)
        {
            ((DynamicGridCell) component)[Name] = value;
        }

        public override bool ShouldSerializeValue(object component)
        {
            return false;
        }

        public override Type ComponentType => typeof(DynamicGridCell);
        public override bool IsReadOnly => false;
        public override Type PropertyType => typeof(object);
    }

只要确保您绑定到的属性是 ObservableCollection<object> 类型 - 否则对我来说自动网格列生成不起作用。

Answer 2

如果两行和列确实需要动态，你最好的选择是使用两个嵌套的ItemControls，外层代表行，内层代表列：

<ItemsControl ItemsSource="{Binding Rows}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Columns}" ItemTemplateSelector="{StaticResource ColumnTemplateSelector}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这允许您通过定义一个可能类似于以下内容的模板选择器来显示不同类型的列：

public class ColumnTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var column = item as ServerColumn;
        switch (column.Type)
        {
            case "Text":
                return TextTemplate;
            case "Number":
                return NumberTemplate;
            case "Image":
                return ImageTemplate;
        }
        // Fallback
        return TextTemplate;
    }

    public DataTemplate TextTemplate { get; set; }
    public DataTemplate NumberTemplate { get; set; }
    public DataTemplate ImageTemplate { get; set; }
}

...根据每列的类型，将引用不同的模板（所有这些模板显然都需要在某处定义并引用为StaticResource。（这甚至允许轻松创建可更改的（非只读）网格。）

请注意，您当然可以使用ListView 或派生自ItemsControl 的任何其他控件来代替外部ItemsControl。例如，如果您需要自动滚动，使用 ListView 可能会很有用。

Answer 3

你有一些逻辑问题。

当您设置DataGrid 的ItemsSource 时，绑定集合将用于创建行，如果您不更改它，属性AutoGenerateColumns 将设置为true。在这种情况下，DataGrid 将为绑定集合中的每个属性生成一个列，这正是您的示例中发生的情况。 您使用属性“列”绑定了一个实例，并获得了一个名为“列”的 DataGrid 列。并且您获得的行数与此属性中显示为“（集合）”的条目一样多，因为 ServerColumn 继承自 ObservableObject。

您可以将AutoGenerateColumns设置为false，并且必须自己创建列；通常在 xaml => 硬编码中。

如果您真的想动态生成列，您必须编写自己的逻辑来创建和绑定列。我做过一次，如果你想让它通用，那就太痛苦了。 如果您想要一个带有动态列的DataGrid，用户可以在其中更改值，那么它比只读的更棘手。

一种方法可能是使用ObservableCollection<string> 作为列名，另一种方法是使用ObservableCollection 存储每一行​​的 ViewModel。