This is a migrated thread and some comments may be shown as answers.

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

12 Answers 397 Views

PropertyGrid

This is a migrated thread and some comments may be shown as answers.

Maor asked on 26 Mar 2014, 01:39 PM

current-display.png

desired-display.png

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,

12 Answers, 1 is accepted

answered on 31 Mar 2014, 11:06 AM

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.

answered on 03 Apr 2014, 11:28 AM

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

answered on 13 May 2014, 11:05 AM

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

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.