Displaying Multiple Properties in a Single Cell

• May 12, 2020
• 4 minutes to read

In certain scenarios, you may need to display multiple properties of a bound object in the same property grid cell. You can accomplish this by overriding the content template of a property definition.

The following example demonstrates a custom template assigned to the PropertyDefinitionBase.ContentTemplate property. The template contains two CellEditorPresenter objects, each representing a property of a bound object. Cell editor presenters are linked to properties of the bound object using the CellEditorPresenter.Path property.

XAML

<dxprg:PropertyDefinition Path="Address">
    <dxprg:PropertyDefinition.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <!-- The Path property associates a cell editor presenter with the property of the bound object. -->
                <dxprg:CellEditorPresenter Path="AddressLine1"/>
                <dxprg:CellEditorPresenter Path="AddressLine2"/>
            </StackPanel>
        </DataTemplate>
    </dxprg:PropertyDefinition.ContentTemplate>
</dxprg:PropertyDefinition>

Tip

If a property grid contains a cell editor presenter and a property definition that have the same Path, the settings of the property definition are applied to the corresponding cell editor presenter.

For example, you can assign the required editor and/or make a cell value read-only.

The following example demonstrates a property grid that displays two properties of a composite Customer object in the same cell. The Email property is displayed by an in-place hyperlink editor.

XAML

<!-- -->
<dxprg:PropertyGridControl SelectedObject="{Binding Customer}"
       ShowProperties="WithPropertyDefinitions" >
    <dxprg:PropertyDefinition Path="Name" />
    <dxprg:PropertyDefinition Path="Phone">
        <dxprg:PropertyDefinition.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <dxprg:CellEditorPresenter Path="Email" PathMode="Absolute" />
                    <dxprg:CellEditorPresenter Path="Phone" PathMode="Absolute" />
                </StackPanel>
            </DataTemplate>
        </dxprg:PropertyDefinition.ContentTemplate>
    </dxprg:PropertyDefinition>
    <!-- Settings for the cell editor presenter that displays the Email property -->
    <dxprg:PropertyDefinition Path="Email" Visibility="Collapsed">
        <dxprg:PropertyDefinition.EditSettings>
            <dxe:HyperlinkEditSettings AllowAutoNavigate="True" NavigationUrlFormat="mailto:{0}" />
        </dxprg:PropertyDefinition.EditSettings>
    </dxprg:PropertyDefinition>    
</dxprg:PropertyGridControl>
<!-- -->

C#

public class Customer {
    public Int32 ID { get; set; }
    public String Name { get; set; }
    public String Email { get; set; }
    public String Phone { get; set; }
}

Absolute and Relative Property Path

By default, the path specified by the CellEditorPresenter.Path property is relative to the parent PropertyDefinition. This behavior can be configured using the CellEditorPresenter.PathMode property. The following table describes the available options.

CellEditorPresenter.PathMode property value	Description
Relative	The CellEditorPresenter.Path points to a property of an object associated with the parent PropertyDefinition.
Absolute	The CellEditorPresenter.Path points to a property of PropertyGridControl.SelectedObject.

This example demonstrates a custom template that displays multiple properties in a single PropertyGridControl cell.

Both the absolute and relative paths are specified for the cell editor presenter objects.

ViewModel.cs

using System;

namespace DXSample {
    public class CategoryAttributesViewModel {
        public virtual Person Person { get; protected set; }
        public CategoryAttributesViewModel() {
            Person = new Person {
                FirstName = "Anita",
                LastName = "Benson",
                Address = new Address {
                    AddressLine1 = "9602 South Main",
                    AddressLine2 = "Seattle, 77025, USA",
                },
                Phone = "7138638137",
            };
        }
    }
    public class Person {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Address Address { get; set; }
        public string Phone { get; set; }
    }
    public class Address {
        public string AddressLine1 { get; set; }
        public string AddressLine2 { get; set; }
    }
}

MainWindow.xaml

<Window x:Class="DXSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxprg="http://schemas.devexpress.com/winfx/2008/xaml/propertygrid"  
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:local="clr-namespace:DXSample"
        DataContext="{dxmvvm:ViewModelSource Type=local:CategoryAttributesViewModel}"
        dx:ThemeManager.ThemeName="Office2013"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxprg:PropertyGridControl SelectedObject="{Binding Person}" ExpandCategoriesWhenSelectedObjectChanged="True" ShowProperties="WithPropertyDefinitions">
            <dxprg:PropertyGridControl.PropertyDefinitions>
                <dxprg:PropertyDefinition Path="FirstName"/>
                <dxprg:PropertyDefinition Path="LastName"/>
                <dxprg:PropertyDefinition Path="Address" Header="Contact">
                    <dxprg:PropertyDefinition.ContentTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <dxprg:CellEditorPresenter Path="AddressLine1"/>
                                <dxprg:CellEditorPresenter Path="AddressLine2"/>
                                <dxprg:CellEditorPresenter Path="Phone" PathMode="Absolute"/>
                            </StackPanel>
                        </DataTemplate>
                    </dxprg:PropertyDefinition.ContentTemplate>
                </dxprg:PropertyDefinition>
            </dxprg:PropertyGridControl.PropertyDefinitions>
        </dxprg:PropertyGridControl>
    </Grid>
</Window>

ViewModel.vb

Imports System

Namespace DXSample
    Public Class CategoryAttributesViewModel
        Private privatePerson As Person
        Public Overridable Property Person() As Person
            Get
                Return privatePerson
            End Get
            Protected Set(ByVal value As Person)
                privatePerson = value
            End Set
        End Property
        Public Sub New()
            Person = New Person With {.FirstName = "Anita", .LastName = "Benson", .Address = New Address With {.AddressLine1 = "9602 South Main", .AddressLine2 = "Seattle, 77025, USA"}, .Phone = "7138638137"}
        End Sub
    End Class
    Public Class Person
        Public Property FirstName() As String
        Public Property LastName() As String
        Public Property Address() As Address
        Public Property Phone() As String
    End Class
    Public Class Address
        Public Property AddressLine1() As String
        Public Property AddressLine2() As String
    End Class
End Namespace