RadPropertyGrid: Creating a single visual property from a combination of 3 propertis (name, type and value)

[Maor]

Hi,

I've created a demo project that will demonstrate my current situation and my goal.

The code and XAML are attached below.

As you could see in the picture marked as "Desired display" and in propertyGrid2 in the code I had to create a mockup classes that will display the properties.

My goal is to get the "Desired display" look by using only the "MainObject" and "PropertiesObject".

The main issues I have are:
1. I need to translate the 3 properties from "PropertiesObject": "PropertyName", "PropertyType" and "PropertyValue" into a single property (without generating a new class on run time).
2. I need to make the observable collection nested properties display the list of "PropertiesObject" (after my conversion to a single property) without the extra nested properties (like Count).
3. I don't want to use or display the "CollectionEditor".

The amount and variety of the properties in the "OtherProperties" observable collection are unknown during compile-time and change during run-time from another source.

I do not require the ability to edit the properties so they can all be read-only.

Do you have any hints on how I can accomplish my goal?

This is the code I'm using:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TelerikPropertyGrid
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            PropertiesObject property1 = new PropertiesObject() { PropertyName = "stringProperty1", PropertyType = typeof(string), PropertyValue="string 1" };
            PropertiesObject property2 = new PropertiesObject() { PropertyName = "stringProperty2", PropertyType = typeof(string), PropertyValue = "string 2" };
            PropertiesObject property3 = new PropertiesObject() { PropertyName = "boolProperty1", PropertyType = typeof(bool), PropertyValue= (Boolean)true };
            PropertiesObject property4 = new PropertiesObject() { PropertyName = "boolProperty2", PropertyType = typeof(bool), PropertyValue = (Boolean)false };
            PropertiesObject property5 = new PropertiesObject() { PropertyName = "intProperty1", PropertyType = typeof(int), PropertyValue=(Int32)10 };
            ObservableCollection<PropertiesObject> properties = new ObservableCollection<PropertiesObject>() { property1, property2, property3, property4, property5 };
            MainObject main = new MainObject() { Name = "john", Age = 25, OtherProperties = properties };

            //this is the property grid I have and want to modify using only MainObject and PropertiesObject classes
            PropertyGrid1.Item = main;
            PropertyGrid1.Visibility = System.Windows.Visibility.Visible;

            //this proeprty grid demonstrates how I want my grid to look like.
            //I created the "goal*" classes in order to populate it, I don't have those in the production system
            PropertyGrid2.Item = new GoalDisplayObject();
            PropertyGrid2.Visibility = System.Windows.Visibility.Hidden;
        }
    }

    public class MainObject //exist in production
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public ObservableCollection<PropertiesObject> OtherProperties { get; set; }
    }

    public class PropertiesObject //exist in production
    {
        public string PropertyName { get; set; }
        public Type PropertyType { get; set; }
        public object PropertyValue { get; set; }
    }

    public class GoalDisplayObject  //doesn't exist in production
    {
        public string Name { get { return "john"; } set { } }
        public int Age { get { return 25; } set { } }
        public GoalNestedProperties OtherProperties { get { return new GoalNestedProperties(); } set { } }

    }
    public class GoalNestedProperties  //doesn't exist in production
    {
        public bool boolProperty1 { get { return true; } set { } }
        public bool boolProperty2 { get { return false; } set { } }
        public string stringProperty1 { get { return "string 1"; } set { } }
        public string stringProperty2 { get { return "string 2"; } set { } }
        public int intProperty1 { get { return 10; } set { } }
        public override string ToString() { return ""; }
    }
}

And this is the XAML:

<Window x:Class="TelerikPropertyGrid.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:TelerikPropertyGrid"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadPropertyGrid x:Name="PropertyGrid1" Grid.Row="0" NestedPropertiesVisibility="Visible" SortAndGroupButtonsVisibility="Collapsed" SearchBoxVisibility="Collapsed" FieldIndicatorVisibility="Collapsed" DescriptionPanelVisibility="Collapsed"/>
        <telerik:RadPropertyGrid x:Name="PropertyGrid2" Grid.Row="0" AutoGeneratePropertyDefinitions="False" NestedPropertiesVisibility="Visible" SortAndGroupButtonsVisibility="Collapsed" SearchBoxVisibility="Collapsed" FieldIndicatorVisibility="Collapsed" DescriptionPanelVisibility="Collapsed">
            <telerik:RadPropertyGrid.PropertyDefinitions>
                <telerik:PropertyDefinition Binding="{Binding Name}" DisplayName="Name"/>
                <telerik:PropertyDefinition Binding="{Binding Age}" DisplayName="Age"/>
                <telerik:PropertyDefinition Binding="{Binding OtherProperties}" DisplayName="Other Properties" IsExpanded="True">
                    <telerik:PropertyDefinition.NestedProperties>
                        <telerik:PropertyDefinition Binding="{Binding boolProperty1}" DisplayName="boolProperty1"/>
                        <telerik:PropertyDefinition Binding="{Binding boolProperty2}" DisplayName="boolProperty2"/>
                        <telerik:PropertyDefinition Binding="{Binding stringProperty1}" DisplayName="stringProperty1"/>
                        <telerik:PropertyDefinition Binding="{Binding stringProperty2}" DisplayName="stringProperty2"/>
                        <telerik:PropertyDefinition Binding="{Binding intProperty1}" DisplayName="intProperty1"/>
                    </telerik:PropertyDefinition.NestedProperties>
                </telerik:PropertyDefinition>
            </telerik:RadPropertyGrid.PropertyDefinitions>
        </telerik:RadPropertyGrid>
    </Grid>
</Window>

Thanks in advance,

[Maor]

Any comment on how this can be done will be greatly appreciated.

If it can't be done please let me know that as well.

[Vera]

Hello Maor,

I would suggest you to check RadPropertyGrid UnboundMode help article for a reference.

Regards,
Vera
Telerik

 

 

[Maor]

Hi Vera,

My main issue is #1 I need to display an object that has 3 properties like a single property without knowing how it looks like during the compilation-phase.

I have an object with:

public string PropertyName { get; set; }
public object PropertyValue { get; set; }
public Type PropertyType { get; set; }

PropertyName is the name of the so-called "property" I want the grid to show (AKA the display name).
PropertyValue is the value the property grid should display.
PropertyType is the type of the property and should determine which control the property grid should use (like combo box for enum, date time picker for DateTime etc).

I need the grid to display that object just like it would've displayed an object with only 1 property:

public PropertyType PropertyName { get; set; } //the value is PropertyValue

Please keep in mind that I have a collection of those object with an unknown size.
I'm not sure how I can define a dynamic number of properties in the XAML (the number changes during run-time multiple times).

From what I understand the Unbound mode (which I reviewed before posting the original question) requires me to know which nested properties I have while I'm coding and doesn't offer the ability to change it during run-time.

[Maor]

Any comment on that?

How can I display a list of the objects I described in my post above as a list of properties?

Is this possible using your product?

[Vera]

Hello Maor,

Generally, you can use DataTemplateSelector for this purpose but this is not recommended since RadPropertyGrid determines the editor for each PropertyDefinition based on the type of the respective bound property.


Regards,
Vera
Telerik

 

 

[Nir]

Hi Vera,

Thank you for your reply.

After going through the DataTemplateSelector documentation and the demo once more we still don't see how our goal can be accomplished by it.

When I use the DataTemplateSelector it works on a single property.

Our goal is to transform 3 properties into a single property.

We don't want to change the visual aspect of the RadPropertyGrid and we're happy with how it looks.

We just need a way to tell the RadPropertyGrid to treat those 3 properties as a building block for a single property where one of our properties is the name, another is the type and the 3rd is the value of the new property we want to display.

After we will be able to transform the 3 properties into a single property we'll need to transform an ObservableCollection of objects which contain those 3 properties into a list of single properties.

If this gets too complicated for the forum we can move this discussion to a support ticket instead (our company has paid for support for "UI for WPF").

Thanks in advance,
Nir Moshe

[Dimitrina]

Hello Nir,

As it turns out there is not an easy way to accomplish your exact requirement.

I would suggest you to consider using RadPropertyGrid based on how it is designed to work as explained with our documentation and examples on different use cases.

We apologize for the inconvenience.

Regards,
Didie
Telerik

 

 

[Nir]

Thank you for your reply.

[De]

Just an idea.  One can always create a transient/proxy class that wraps around those the properties that want to be wrapped.  Then expose the transient/proxy as a property so the RadPropertyGrid can bind to.  Any properties that don't want to be shown on UI can be decorated using [Browsable(false)].

[Dimitrina]

Hello,

This is indeed correct. When using the Browsable attribute and having it set to false, this would make RadPropertyGrid skip the respective property. 

Regards,
Didie
Telerik

 

 

[Nir]

Hi Didie,

Can you elaborate a bit on that topic (an example will be great) please?

If it'll be more convenient than we can communicate through support ticket ID:814112.

Thanks,
Nir

[Dimitrina]

Hello Nir,

You can expose a new property instead of the existing three. This is not directly related to RadPropertyGrid but to your data representation.
As to using the [Browsable(false)] attribute, please check the "DataAnnotations Support" WPF Demo. Using this specific attribute is not demonstrated, however, the approach would be similar.

Regards,
Didie
Telerik