WPF: Dynamically binding a list to (some of) an object's properties

Question

I have a collection of objects stored in a CollectionViewSource and bound to a DataGrid. I want to display a 'detail view' of the object currently selected in the DataGrid. I can obtain the current object using CollectionViewSource.View.CurrentItem.

MyClass{
    [IsImportant]   
    AProperty{}

    AnotherProperty{}

    [IsImportant]
    YetAnotherProperty{}
}

What I would like to do is display a label (with the property name) and a control (for editing) in a listbox, for each of those properties marked with the IsImportant attribute. The binding must work between the edits made, the DataGrid and the backing object. The control displayed should vary based on the property's type, which can either be boolean, string or IEnumerable<string> (I have written an IValueConverter to convert between enumerable and newline-delimited string).

Does anyone know of a method for accomplishing this? I can currently display the values of each property through the following, but editing them would not update the backing object:

            listBox.ItemsSource = from p in typeof(MyClass).GetProperties()
                                         where p.IsDefined(typeof(IsImportant), false)
                                         select p.GetValue(_collectionViewSource.View.CurrentItem, null);

To clarify, I would like this to happen 'automagically', without manually specifying property names in the XAML. If I can dynamically add to the XAML at runtime based on which properties are marked with attributes, that would also be fine.

Answer 1

You want a control that has a label with the property name and control to edit the property value, so start by creating a class that wraps a property of a specific object to act as the DataContext for that control:

public class PropertyValue
{
    private PropertyInfo propertyInfo;
    private object baseObject;

    public PropertyValue(PropertyInfo propertyInfo, object baseObject)
    {
        this.propertyInfo = propertyInfo;
        this.baseObject = baseObject;
    }

    public string Name { get { return propertyInfo.Name; } }

    public Type PropertyType { get { return propertyInfo.PropertyType; } }

    public object Value
    {
        get { return propertyInfo.GetValue(baseObject, null); }
        set { propertyInfo.SetValue(baseObject, value, null); }
    }
}

You want to bind the ItemsSource of a ListBox to an object in order to populate it with these controls, so create an IValueConverter that will convert an object to a list of PropertyValue objects for its important properties:

public class PropertyValueConverter
    : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return
            from p in value.GetType().GetProperties()
            where p.IsDefined(typeof(IsImportant), false)
            select new PropertyValue(p, value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Binding.DoNothing;
    }
}

The final trick is that you want the edit control to vary based on the property's type. You can do that by using a ContentControl and setting the ContentTemplate to one of various editor templates based on the property type. This example uses a CheckBox if the property is a Boolean and a TextBox otherwise:

<DataTemplate x:Key="CheckBoxTemplate">
    <CheckBox IsChecked="{Binding Value}"/>
</DataTemplate>
<DataTemplate x:Key="TextBoxTemplate">
    <TextBox Text="{Binding Value}"/>
</DataTemplate>
<Style x:Key="EditControlStyle" TargetType="ContentControl">
    <Setter Property="ContentTemplate" Value="{StaticResource TextBoxTemplate}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding PropertyType}" Value="{x:Type sys:Boolean}">
            <Setter Property="ContentTemplate" Value="{StaticResource CheckBoxTemplate}"/>
        </DataTrigger>
    </Style.Triggers>
</Style>
<DataTemplate DataType="{x:Type local:PropertyValue}">
    <StackPanel Orientation="Horizontal">
        <Label Content="{Binding Name}"/>
        <ContentControl Style="{StaticResource EditControlStyle}" Content="{Binding}"/>
    </StackPanel>
</DataTemplate>

Then, you can just create your ListBox as:

<ItemsControl ItemsSource="{Binding Converter={StaticResource PropertyValueConverter}}"/>

Answer 2

This is a very elegant solution. I'm facing a somewhat similar problem, and this might be most helpful. However, I want to be able to create a 2 way binding, is it possible to extend this code to do that?

Thanks, Omer

Answer 3

I don't know how to automate this but u can do this with drag and drop, just set the [DisplayName("YourPropertyName")] and use drag and drop to create new dataset and bind it to datagrid, also u can use drag and drop from dataset to create detail (related textbox, calendar, ...)