Achieving propertygrid look and feel programmatically with additional column in wpf

Question

I am kind of stuck in achieving what is meant to be a propertyGrid kind of control but in my case for a given property I have value before and value after. e.g. if property is name that it is having two values say name before and name after.

class Person
    {

        #region  class constructor
        /// <summary>
        /// class constructor
        /// </summary>
        /// <param name="_person"></param>
        public Person(string before,string after)
        {
            this.nameBefore = before; // assign beforename to namebefore
            this.nameAfter = after;  // assign aftername to nameAfter
        }

        #endregion class constructor

        #region properties

        /// <summary>
        /// Name property
        /// </summary>
        private string nameBefore;

        /// <summary>
        /// public Property
        /// for nameBefore
        /// </summary>
        public string NameBefore
        {
            get { return nameBefore; }
            set { nameBefore = value; }
        }


        /// <summary>
        /// name property after
        /// </summary>
        private string nameAfter;


        /// <summary>
        /// public property for nameAfter
        /// </summary>
        public string NameAfter
        {
            get { return nameAfter; }
            set { nameAfter = value; }
        }

        #endregion properties

    }

I need to expose all properties of this class which may have its value before and value after. these values are set externally. I need to populate these value much like a propertygrid. but in my case I have got one more additional column (value after).

thats how my xaml looks like:

<Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition  Height="20" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBlock Background="Gray" Padding="5,2,5,5" Grid.Column="0" Grid.Row="0" Text="Property" />
        <TextBlock Background="Gray" Padding="5,2,5,5" Grid.Column="1" Grid.Row="0"  Text="Before" />
        <TextBlock Background="Gray" Padding="5,2,5,5" Grid.Column="2" Grid.Row="0" Text="After" />

        <TextBlock Grid.Column="0" Grid.Row="1" Text="Name" />
        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Before }" />
        <TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding After }" />

    </Grid>

I need something like this

property Window

Can we get something like this programmatically? I mean having a property and its multiple value. it can also be multikeyvalue dictionary too?

Answer 1

You'll be wasting a lot of time if you duplicate every property. Instead of doing that, just duplicate the class that contains the properties. In this way, you could do something like this:

Define a class for each row of the Grid (for display purposes):

public class PropertyGridRow : INotifyPropertyChanged
{
    public string PropertyName { get; set; }
    public object PropertyValueBefore { get; set; }
    public object PropertyValueAfter { get; set; }
}

Then you could fill it like this, or slightly differently in a loop:

Person before = GetBeforePerson();
Person after = GetAfterPerson();
...
PropertyGridRow propertyGridRow = new PropertyGridRow();
propertyGridRow.PropertyName = "Some Property";
propertyGridRow.PropertyValueBefore = before.SomeProperty;
propertyGridRow.PropertyValueAfter = after.SomeProperty;
PropertyGridRows.Add(propertyGridRow);

Then display it like this:

<GridView ItemsSource="{Binding PropertyGridRows}" ... />