MVVM: customize devexpress propertyGridControl

Question

I have a PropertyGridControl in my XAML. It shows the properties of an object, from the selected row of a GridControl. When I click a row, it populates the PropertyGridControl. I'm working with the MVVM pattern.

The XAML of the propertyGridControl is:

<dxprg:PropertyGridControl  SelectedObject="{Binding SelectedItem,ElementName=lst1}" ShowProperties="All" ShowCategories="False" Margin="473,0,0,133"/>

But how can I customize the PropertyGridControl? EXAMPLE:

from this:

to this:

The focus point, for me, is customize the boolean/tinyint fields of the database in radio button element and the external key in a combobox.

FOR DMITRIG:

following yout hint, now I have my xaml file, with:

<dxlc:DataLayoutControl Grid.Column="1" CurrentItem="{Binding GroupedLayoutData}" HorizontalAlignment="Left" Height="204" Margin="10,132,0,0" VerticalAlignment="Top" Width="278"/>

and my viewModel.cs file, where I created a UI following the sample. But I can't see nothing, where is the mistake?

   public class GroupedLayoutData {
        const string JobGroup = "Job";
        const string ContactGroup = "Contact";
        const string AddressGroup = "Address";
        const string PersonalGroup = "Personal";

        [Display(GroupName = AddressGroup, ShortName = "", Order = 4)]
        public string AddressLine1 { get; set; }
        [Display(GroupName = AddressGroup, ShortName = "")]
        public string AddressLine2 { get; set; }
        [Display(GroupName = PersonalGroup, Name = "Birth date")]
        public DateTime BirthDate { get; set; }
        [Display(GroupName = ContactGroup)]
        public string Email { get; set; }
        [Display(Name = "First name", Order = 0)]
        public string FirstName { get; set; }
        [Display(GroupName = PersonalGroup, Order = 5)]
        //public Gender Gender { get; set; }
        //[Display(GroupName = JobGroup, Order = 2)]
        public string Group { get; set; }
        [Display(GroupName = JobGroup, Name = "Hire date")]
        public DateTime HireDate { get; set; }
        [Display(Name = "Last name", Order = 1)]
        public string LastName { get; set; }
        [Display(GroupName = ContactGroup, Order = 3), DataType(DataType.PhoneNumber)]
        public string Phone { get; set; }
        [Display(GroupName = JobGroup), DataType(DataType.Currency)]
        public decimal Salary { get; set; }
        [Display(GroupName = JobGroup, Order = 21)]
        public string Title { get; set; }
    }

EDIT ii: How do I bind the class defining my layout to my datalayoutcontrol?

Answer 1

When using the DevExpress for accomplishing a task that you described, I suggest you to try using the DataLayoutControl . This control will automatically build a layout to edit object's public properties when you bind a DataLayoutControl to any data-object via the DataLayoutControl.CurrentItem property.

Below the minimal example with DataLayoutControl and Grid:

Model(C# code):

public class Person {
    const string PersonalGroup = "Personal";
    [Display(Name = "First Name", GroupName = PersonalGroup)]
    public string FirstName { get; set; }
    [Display(Name = "Last Name", GroupName = PersonalGroup)]
    public string LastName { get; set; }
    [Display(Name = "Birth date", GroupName = PersonalGroup)]
    public DateTime BirthDate { get; set; }
    [Display(GroupName = PersonalGroup)]
    public int Age { get; set; }

    [Display(GroupName = "Contact"), DataType(DataType.PhoneNumber)]
    public string Phone { get; set; }
}

ViewModel(C# code)

public class ViewModel {
    public ViewModel() {
        Persons = new ObservableCollection<Person> { 
            new Person(){ FirstName = "Peter", LastName ="Parker", Age=33 },
            new Person(){ FirstName = "Mary", LastName ="Jane" , Age=31 }
        };
    }
    public ObservableCollection<Person> Persons { get; private set; }
    public Person SelectedPerson { get; set; }
}

View (XAML-markup):

<Window.DataContext>
    <local:ViewModel />
</Window.DataContext>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <dxg:GridControl Grid.Column="0" 
            AutoGenerateColumns="AddNew"
            ItemsSource="{Binding Persons}" 
            SelectedItem="{Binding SelectedPerson}"
        >
        <dxg:GridControl.View>
            <dxg:TableView ShowGroupPanel="False" BestFitArea="All" AllowEditing="False"/>
        </dxg:GridControl.View>
    </dxg:GridControl>
    <dxlc:DataLayoutControl Grid.Column="1"
            CurrentItem="{Binding SelectedPerson}"
       />
</Grid>

Result(screenshot):

You can review this approach in action in this demo (the link points to the Silverlight version, but the WPF version behaves exactly the same). You can either use the attributes from the System.ComponentModel.DataAnnotations namespace or use the Fluent-API to manage the process of property-editors generation.

Update:
You can use the DataLayoutControl.AutoGeneratingItem event to change the editor for any property. This approach is already discussed in the following DevExpress Support threads:
- How to Customize controls inside WPF DataLayoutControl
- WPF DataLayoutControl questions
- DataLayoutControl

PS In the future, I suggest you use DevExpress Support Center to get official and guaranteed assistance on the use of DevExpress products.

Answer 2

尝试使用FocusedRowChanged事件的gridview。

propertyGridControl1.SelectedObject = gridView1.GetFocusedRow();